https://qwerty.work/tags/%E8%83%8C%E6%99%AF/ Recent content in 背景 on qwerty.work Hugo -- gohugo.io ja-JP Thu, 10 Feb 2022 09:31:06 +0900 https://qwerty.work/post/2022/02/csss-svg-animation-sample/ Thu, 10 Feb 2022 09:31:06 +0900 https://qwerty.work/post/2022/02/csss-svg-animation-sample/ <h2 id="こういう背景ってどうやって作るんだろう">こういう背景ってどうやって作るんだろう？ </h2><p>以下のホームページに使われていた背景の動くバブルがいいな～と思いました。あと、フッターの波のような動きも。</p> <div class="link-card"> <a href="https://fukurou-labo.co.jp/recruit/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://fukurou-labo.co.jp/recruit/" alt="https://fukurou-labo.co.jp/recruit/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://fukurou-labo.co.jp/recruit/</span> <span class="link-card-url">https://fukurou-labo.co.jp/recruit/</span> </div> </a> </div> <p>「どうやってやってるのかな？」と、チャレンジしたくなり、方法を探したときにいろいろ見つけたのでメモ。</p> <h2 id="参考ページ">参考ページ </h2><h3 id="動くバブルみたいなやつはこれっぽい">動くバブルみたいなやつはこれっぽい？ </h3> <div class="link-card"> <a href="https://coco-factory.jp/ugokuweb/move02/5-3/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://coco-factory.jp/ugokuweb/move02/5-3/" alt="https://coco-factory.jp/ugokuweb/move02/5-3/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://coco-factory.jp/ugokuweb/move02/5-3/</span> <span class="link-card-url">https://coco-factory.jp/ugokuweb/move02/5-3/</span> </div> </a> </div> <h3 id="動く波はこれっぽい">動く波はこれっぽい？ </h3> <div class="link-card"> <a href="https://coco-factory.jp/ugokuweb/move02/5-13/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://coco-factory.jp/ugokuweb/move02/5-13/" alt="https://coco-factory.jp/ugokuweb/move02/5-13/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://coco-factory.jp/ugokuweb/move02/5-13/</span> <span class="link-card-url">https://coco-factory.jp/ugokuweb/move02/5-13/</span> </div> </a> </div> <div class="link-card"> <a href="http://kachibito.net/css/simple-css-waves-with-svg" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://kachibito.net/css/simple-css-waves-with-svg" alt="http://kachibito.net/css/simple-css-waves-with-svg" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://kachibito.net/css/simple-css-waves-with-svg</span> <span class="link-card-url">http://kachibito.net/css/simple-css-waves-with-svg</span> </div> </a> </div> <h4 id="静的ウェーブをオンラインで簡単に作れるサイト">静的ウェーブをオンラインで簡単に作れるサイト </h4> <div class="link-card"> <a href="https://www.shapedivider.app/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://www.shapedivider.app/" alt="https://www.shapedivider.app/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://www.shapedivider.app/</span> <span class="link-card-url">https://www.shapedivider.app/</span> </div> </a> </div> <h3 id="その他">その他 </h3> <div class="link-card"> <a href="https://deshinon.com/2019/03/06/koseiteki-haikei-css/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://deshinon.com/2019/03/06/koseiteki-haikei-css/" alt="https://deshinon.com/2019/03/06/koseiteki-haikei-css/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://deshinon.com/2019/03/06/koseiteki-haikei-css/</span> <span class="link-card-url">https://deshinon.com/2019/03/06/koseiteki-haikei-css/</span> </div> </a> </div> <div class="link-card"> <a href="https://webdesignfacts.net/entry/css-background-animation/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://webdesignfacts.net/entry/css-background-animation/" alt="https://webdesignfacts.net/entry/css-background-animation/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://webdesignfacts.net/entry/css-background-animation/</span> <span class="link-card-url">https://webdesignfacts.net/entry/css-background-animation/</span> </div> </a> </div> <div class="link-card"> <a href="https://web-navigator.blog/background-anime/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://web-navigator.blog/background-anime/" alt="https://web-navigator.blog/background-anime/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://web-navigator.blog/background-anime/</span> <span class="link-card-url">https://web-navigator.blog/background-anime/</span> </div> </a> </div> <div class="link-card"> <a href="https://goworkship.com/magazine/blob-animated-backgrounds/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://goworkship.com/magazine/blob-animated-backgrounds/" alt="https://goworkship.com/magazine/blob-animated-backgrounds/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://goworkship.com/magazine/blob-animated-backgrounds/</span> <span class="link-card-url">https://goworkship.com/magazine/blob-animated-backgrounds/</span> </div> </a> </div> <div class="link-card"> <a href="https://goworkship.com/magazine/liquid-effect-web/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://goworkship.com/magazine/liquid-effect-web/" alt="https://goworkship.com/magazine/liquid-effect-web/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://goworkship.com/magazine/liquid-effect-web/</span> <span class="link-card-url">https://goworkship.com/magazine/liquid-effect-web/</span> </div> </a> </div> <div class="link-card"> <a href="https://goworkship.com/magazine/glsl-shader-effect/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://goworkship.com/magazine/glsl-shader-effect/" alt="https://goworkship.com/magazine/glsl-shader-effect/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://goworkship.com/magazine/glsl-shader-effect/</span> <span class="link-card-url">https://goworkship.com/magazine/glsl-shader-effect/</span> </div> </a> </div> <h3 id="svgアニメーション">SVGアニメーション </h3> <div class="link-card"> <a href="https://b-risk.jp/blog/2017/06/svg-animation/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://b-risk.jp/blog/2017/06/svg-animation/" alt="https://b-risk.jp/blog/2017/06/svg-animation/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://b-risk.jp/blog/2017/06/svg-animation/</span> <span class="link-card-url">https://b-risk.jp/blog/2017/06/svg-animation/</span> </div> </a> </div> <h3 id="cssでマスクやアニメーションの参考">CSSでマスクやアニメーションの参考 </h3> <div class="link-card"> <a href="https://ics.media/entry/210701/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://ics.media/entry/210701/" alt="https://ics.media/entry/210701/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://ics.media/entry/210701/</span> <span class="link-card-url">https://ics.media/entry/210701/</span> </div> </a> </div> <h3 id="svgのストライプなどのパターンを作るサイト">SVGのストライプなどのパターンを作るサイト </h3> <div class="link-card"> <a href="https://www.webcreatorbox.com/webinfo/svg-icons-patterns-illustration" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://www.webcreatorbox.com/webinfo/svg-icons-patterns-illustration" alt="https://www.webcreatorbox.com/webinfo/svg-icons-patterns-illustration" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://www.webcreatorbox.com/webinfo/svg-icons-patterns-illustration</span> <span class="link-card-url">https://www.webcreatorbox.com/webinfo/svg-icons-patterns-illustration</span> </div> </a> </div> <div class="link-card"> <a href="https://svg-pattern-maker.netlify.app/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://svg-pattern-maker.netlify.app/" alt="https://svg-pattern-maker.netlify.app/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://svg-pattern-maker.netlify.app/</span> <span class="link-card-url">https://svg-pattern-maker.netlify.app/</span> </div> </a> </div> <div class="link-card"> <a href="https://patterns.helloyes.dev/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://patterns.helloyes.dev/" alt="https://patterns.helloyes.dev/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://patterns.helloyes.dev/</span> <span class="link-card-url">https://patterns.helloyes.dev/</span> </div> </a> </div> https://qwerty.work/post/2021/11/background-movie-site-sample/ Tue, 23 Nov 2021 16:12:40 +0900 https://qwerty.work/post/2021/11/background-movie-site-sample/ <h2 id="背景に動画を使用した参考サイト">背景に動画を使用した参考サイト </h2> <div class="link-card"> <a href="https://sankoudesign.com/category/movie/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://sankoudesign.com/category/movie/" alt="https://sankoudesign.com/category/movie/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://sankoudesign.com/category/movie/</span> <span class="link-card-url">https://sankoudesign.com/category/movie/</span> </div> </a> </div> <h3 id="wordpressテンプレートtcdのデモサイト">WordPressテンプレート『TCD』のデモサイト </h3> <div class="link-card"> <a href="https://demo.tcd-theme.com/tcd089/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://demo.tcd-theme.com/tcd089/" alt="https://demo.tcd-theme.com/tcd089/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://demo.tcd-theme.com/tcd089/</span> <span class="link-card-url">https://demo.tcd-theme.com/tcd089/</span> </div> </a> </div> <div class="link-card"> <a href="https://demo.tcd-theme.com/tcd086/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://demo.tcd-theme.com/tcd086/" alt="https://demo.tcd-theme.com/tcd086/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://demo.tcd-theme.com/tcd086/</span> <span class="link-card-url">https://demo.tcd-theme.com/tcd086/</span> </div> </a> </div> <div class="link-card"> <a href="https://demo.tcd-theme.com/tcd063/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://demo.tcd-theme.com/tcd063/" alt="https://demo.tcd-theme.com/tcd063/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://demo.tcd-theme.com/tcd063/</span> <span class="link-card-url">https://demo.tcd-theme.com/tcd063/</span> </div> </a> </div> <div class="link-card"> <a href="https://demo.tcd-theme.com/tcd069/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://demo.tcd-theme.com/tcd069/" alt="https://demo.tcd-theme.com/tcd069/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://demo.tcd-theme.com/tcd069/</span> <span class="link-card-url">https://demo.tcd-theme.com/tcd069/</span> </div> </a> </div> <div class="link-card"> <a href="https://demo.tcd-theme.com/tcd071/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://demo.tcd-theme.com/tcd071/" alt="https://demo.tcd-theme.com/tcd071/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://demo.tcd-theme.com/tcd071/</span> <span class="link-card-url">https://demo.tcd-theme.com/tcd071/</span> </div> </a> </div> <div class="link-card"> <a href="https://demo.tcd-theme.com/tcd074/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://demo.tcd-theme.com/tcd074/" alt="https://demo.tcd-theme.com/tcd074/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://demo.tcd-theme.com/tcd074/</span> <span class="link-card-url">https://demo.tcd-theme.com/tcd074/</span> </div> </a> </div> <div class="link-card"> <a href="https://demo.tcd-theme.com/tcd078/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://demo.tcd-theme.com/tcd078/" alt="https://demo.tcd-theme.com/tcd078/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://demo.tcd-theme.com/tcd078/</span> <span class="link-card-url">https://demo.tcd-theme.com/tcd078/</span> </div> </a> </div> <div class="link-card"> <a href="https://demo.tcd-theme.com/tcd083/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://demo.tcd-theme.com/tcd083/" alt="https://demo.tcd-theme.com/tcd083/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://demo.tcd-theme.com/tcd083/</span> <span class="link-card-url">https://demo.tcd-theme.com/tcd083/</span> </div> </a> </div> https://qwerty.work/post/2020/05/adsnse-css-background-transparent/ Sat, 23 May 2020 15:02:46 +0900 https://qwerty.work/post/2020/05/adsnse-css-background-transparent/ <h2 id="余計な黄色の背景や余白を消す">余計な黄色の背景や余白を消す </h2><p>AdSense広告を設置したページを開くと、広告が表示される部分に広告は表示されていないけど、全面に黄色い背景が表示されていたり、広告は表示されているけど、黄色い部分が一部表示されていたります。</p> <p><img class="gallery-image" data-flex-basis="954px" data-flex-grow="397" height="176" loading="lazy" sizes="(max-width: 767px) calc(100vw - 30px), (max-width: 1023px) 700px, (max-width: 1279px) 950px, 1232px" src="https://qwerty.work/post/2020/05/adsnse-css-background-transparent/images/No-05.jpg" width="700"></p> <p>これをそうにかできないかな？と方法を探したところ、消すというよりCSS（スタイルシート）で透過せることで解決できることがわかりました。</p> <h2 id="cssスタイルシート例">CSS（スタイルシート）例 </h2><p>以下の1行を既存のスタイルシートか、AdSenseの広告コードに加えるだけです。このコードは**『透明』**を意味するスタイルシートのコードです。これでAdSense広告の背景を透過させることができます。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-css" data-lang="css"><span style="display:flex;"><span><span style="color:#f92672">background</span><span style="color:#f92672">:</span> <span style="color:#f92672">transparent</span><span style="color:#f92672">;</span> </span></span></code></pre></div><h3 id="adsenseの広告コードに加えた例">AdSenseの広告コードに加えた例 </h3><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-html" data-lang="html"><span style="display:flex;"><span>&lt;<span style="color:#f92672">script</span> <span style="color:#a6e22e">async</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js&#34;</span>&gt;&lt;/<span style="color:#f92672">script</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">ins</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;adsbygoogle&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;display:block; text-align:center; &lt;span class=&#34;</span><span style="color:#a6e22e">brush:css</span><span style="color:#960050;background-color:#1e0010">;&#34;</span>&gt;background: transparent;&lt;/<span style="color:#f92672">span</span>&gt;&#34; </span></span><span style="display:flex;"><span> data-ad-layout=&#34;in-article&#34; </span></span><span style="display:flex;"><span> data-ad-format=&#34;fluid&#34; </span></span><span style="display:flex;"><span> data-ad-client=&#34;ca-pub-XXXXXXXXXXXXXXXXX&#34; </span></span><span style="display:flex;"><span> data-ad-slot=&#34;XXXXXXXXXXX&#34;&gt;&lt;/<span style="color:#f92672">ins</span>&gt; </span></span><span style="display:flex;"><span>&lt;<span style="color:#f92672">script</span>&gt; </span></span><span style="display:flex;"><span> (<span style="color:#a6e22e">adsbygoogle</span> <span style="color:#f92672">=</span> window.<span style="color:#a6e22e">adsbygoogle</span> <span style="color:#f92672">||</span> []).<span style="color:#a6e22e">push</span>({}); </span></span><span style="display:flex;"><span> &lt;/<span style="color:#f92672">script</span>&gt; </span></span></code></pre></div><h3 id="スタイルシートに加えた例">スタイルシートに加えた例 </h3><p>複数のAdSense広告があり、全部ページに共通のCSSで適用する場合は、以下の1行を加えればOKです。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-css" data-lang="css"><span style="display:flex;"><span>.<span style="color:#a6e22e">adsbygoogle</span> { <span style="color:#66d9ef">background</span>: <span style="color:#66d9ef">transparent</span>;} </span></span></code></pre></div><h2 id="黄色の部分が消えた">黄色の部分が消えた！ </h2><p>これで黄色い背景部分が消えました。ただ、背景を透明（透過）にするだけなので、広告部分を縮める訳ではないので余白部分ができます。</p> <p><img class="gallery-image" data-flex-basis="954px" data-flex-grow="397" height="176" loading="lazy" sizes="(max-width: 767px) calc(100vw - 30px), (max-width: 1023px) 700px, (max-width: 1279px) 950px, 1232px" src="https://qwerty.work/post/2020/05/adsnse-css-background-transparent/images/No-06.jpg" width="700"></p>