スタイルシート on qwerty.work

【Wordpress】TCDテーマ「GENESIS」関連メモ

Mon, 03 Jun 2024 00:00:00 +0000

TCDのワードプレステンプレート「GENESIS（ジェネシス）」でサイト制作した際に参考にしたページのメモ。

TCDテンプレート用のCSSリファレンス

GENESIS用のタグとCSS

https://demo.tcd-theme.com/tcd103/quicktags

共通CSS

TCDのテンプレートで共通して使えるCSS集。

すべてのTCDテーマで使える｜便利なCSS・汎用クラスの使い方 | ワードプレステーマTCD (tcd-theme.com)

TCDテーマ「GENESIS」の公式ページ

WordPressテーマ「GENESIS（TCD103）」 (tcd-theme.com)

デモサイト

【CSS】両端だけ半円（丸）にする border-radius: 9999px;

Fri, 05 Aug 2022 09:45:17 +0900

両サイドだけ丸いボタンを作りたい

スタイルシートで横長のボンタンを作成するとき、簡単に両サイドだけが丸くしたいときに関電できる方法を見つけたのでメモ

.button {
  width: 100px;
  border-radius: 9999px;
}

widthで幅を指定して、border-radius: 9999px;を加えるだけで、とても簡単です。以下の方法でも可能です。

.button {
  width: 200px;
  border-radius: 200px;
}

他にも、以下のページではborder-radius: 100vh;といったやり方もあるようです。

コツとしては幅よりもborder-radius大きい値を指定すればいいみたいですね。

未使用で不要なCSSのルールを削除するために確認する方法

Mon, 11 Apr 2022 14:23:31 +0900

余計なスタイルシートのルールは削除したい

WEBサイトを複製して制作した際に、過去の不要なCSSが残骸として残ってしまいますが、どれを残して、どれを削除すればよいか分からなくなり、そのまま残してしまうことがあります。使用しないルールをそのまま溜め込むと、ファイル容量が大きくなるので、どうにか簡単にお掃除できないかな？と探してみると、方法が見つかったのでメモ。

ブラウザのデベロッパーツールを使う方法

詳しい方法は以下のサイトが参考になります。

https://thesaibase.com/unused-css/ https://thesaibase.com/unused-css/

Chromeの場合

ChromeのデベロッパーツールF12を開き、[**]-[more tool]-[Coverrage]から使用されていないルールを確認できます。

Edgeの場合

Edgeでも同様に開発者ツールF12を開き、[**]-[そのツール]-[カバレッジ]から確認することができます。

ここで不要なルールがわかったとしても、手動で削除いしていくしかなさそうです。必要なルールだけを書き出す方法は見当たりませんでした。（やり方があるのかもしれませんが、わかりませんでした。）

その他のツールは？

もっと簡単にDreamweaverの「HTMLのクリーンアップ」みたいに、Dreamweaver上でできないかな？と探してみましたが、見当たりませんでした。

CSS？SVG？Canvas？動く背景アニメーションのサンプルや参考ページ

Thu, 10 Feb 2022 09:31:06 +0900

こういう背景ってどうやって作るんだろう？

以下のホームページに使われていた背景の動くバブルがいいな～と思いました。あと、フッターの波のような動きも。

https://fukurou-labo.co.jp/recruit/ https://fukurou-labo.co.jp/recruit/

「どうやってやってるのかな？」と、チャレンジしたくなり、方法を探したときにいろいろ見つけたのでメモ。

参考ページ

AdSnseの広告に出る黄色の背景を消すCSS（スタイルシート）

Sat, 23 May 2020 15:02:46 +0900

余計な黄色の背景や余白を消す

AdSense広告を設置したページを開くと、広告が表示される部分に広告は表示されていないけど、全面に黄色い背景が表示されていたり、広告は表示されているけど、黄色い部分が一部表示されていたります。

これをそうにかできないかな？と方法を探したところ、消すというよりCSS（スタイルシート）で透過せることで解決できることがわかりました。

CSS（スタイルシート）例

以下の1行を既存のスタイルシートか、AdSenseの広告コードに加えるだけです。このコードは**『透明』**を意味するスタイルシートのコードです。これでAdSense広告の背景を透過させることができます。

background: transparent;

AdSenseの広告コードに加えた例

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
 <ins class="adsbygoogle"
 style="display:block; text-align:center; <span class="brush:css;">background: transparent;</span>"
 data-ad-layout="in-article"
 data-ad-format="fluid"
 data-ad-client="ca-pub-XXXXXXXXXXXXXXXXX"
 data-ad-slot="XXXXXXXXXXX"></ins>
<script>
 (adsbygoogle = window.adsbygoogle || []).push({});
 </script>

スタイルシートに加えた例

複数のAdSense広告があり、全部ページに共通のCSSで適用する場合は、以下の1行を加えればOKです。

.adsbygoogle { background: transparent;}

黄色の部分が消えた！

これで黄色い背景部分が消えました。ただ、背景を透明（透過）にするだけなので、広告部分を縮める訳ではないので余白部分ができます。

YoutTubeの埋め込みIFLAMEをレスポンシブ対応するCSS

Sat, 23 May 2020 13:56:06 +0900

モバイルページではYouTubeの画面がはみ出る

最近はページにYouTubeの動画を埋め込むことが増えてきました。スマホでそのページを見たときに動画の画面がはみ出ていたので自動的に幅に合わせて表示を変えてくれるレスポンシブに対応する方法を探しました。CSS（スタイルシート）で簡単にできることがわかったのでメモ。

まずは埋め込みタグをで囲む

YouTubeの埋め込みタグを以下のように``で囲みます。

ついでにloading="lazy"を加えて遅延表示対応しています。

<div class="youtube">
<iframe width="560" height="315" src="//www.youtube.com/embed/j1fyn12NH5s" frameborder="0" allowfullscreen loading="lazy"></iframe>
</div>

ちなみに以下の動画は随分前の森永ミルクキャラメルのCMで最後に小さな女の子の笑顔がたまらなく可愛くて、こちらまで幸せな気分になってしまうお気に入りの動画です。

予備動画 1 2

レスポンシブ対応するCSS

最近のaspect-ratioを使用する方法

以前はpadding-top: 56.25%;を使って16:9の縦横比（アスペクト比）に合わせてレスポンシブ対応していましたが、ここ最近ではaspect-ratioがほとんどのモダンブラウズで使えるようになり、簡単にできるようになったみたいです。

ソース例

.youtube {
    aspect-ratio: 16 / 9;
}
.youtube iframe {
    width: 100%;
    height: 100%;
}

または

iframe {
  aspect-ratio: 16/9;
  width: 100%;
  height: 100%;
}

後述の従来のposition: relative;とposition: absolute;とpadding-top: 56.25%;を組合せて使うより簡単でいいですね。

参考サイト

aspect-ratioとobject-fit: cover;について、以下のページが参考になりました。

https://moshashugyo.com/media/aspect-ratio https://moshashugyo.com/media/aspect-ratio

https://coliss.com/articles/build-websites/operation/css/about-aspect-ratio-in-css.html https://coliss.com/articles/build-websites/operation/css/about-aspect-ratio-in-css.html

ブラウザの対応状況

https://caniuse.com/mdn-css_properties_aspect-ratio https://caniuse.com/mdn-css_properties_aspect-ratio

https://caniuse.com/?search=object-fit https://caniuse.com/?search=object-fit

従来のpadding-top: 56.25%;を使用する方法

You-Tubeの埋め込みのサイズでよくあるwidth="560" height="315"の指定があってもページ幅最大に動画を表示するaspect-ratioを使わない従来の方法。PCの場合、サイトの作りによっては幅いっぱいに大きく表示されるようになります。スマホなどは適度な大きさで画面幅に合わせたレスポンシブ表示されます。aspect-ratioを使用するより、コードが多いのですが、IEなど古いブラウザ対応が必要な場合はこちらを使うことが必要になります。

ソース例

.youtube {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
  }
.youtube iframe {
    position: absolute;
    top: 0;
    right: 0;
    width: 100% !important;
    height: 100% !important;
  }

4:3の場合 padding-bottom: 75%;
16:9の場合 padding-bottom: 56.25%;
padding-bottomはpadding-topでも可。

padding-bottom: 56.25%;は16:9の幅16を100％にしたときの高さ9がナンバーセントの比率かを意味するかを意味しています。以下のページが参考になります。これを入れないとwidth: 100%;だけだと高さは変わらず、横だけがレスポンシブになってしまいます。これを入れることにより、縦横比を維持した状態でレスポンシブ表示する対応方法となっています。

参考ページ

https://h2ham.net/youtube-responsive/ https://h2ham.net/youtube-responsive/

従来の方法でスマホ用にちょっと手を加えた例

スマホなどのモバイルページではレスポンシブ表示して、PCなどは大きくなりすぎないように、埋め込みコードの指定通りwidth="560" height="315"で表示する場合の例です。私の場合、埋め込みコードの幅560ピクセルに合わせて、最大559ピクセルまでの解像度でアクセスした場合はレスポンシブ表示するようにしました。

@media screen and (max-width:559px){
   .youtube {
	   position: relative;
	   width: 100%;
	   padding-top: 56.25%;
	   margin: 0.5em 0 1em;
   }
   .youtube iframe {
	   position: absolute;
	   top: 0;
	   right: 0;
	   width: 100% !important;
	   height: 100% !important;
   }
}

動画を連続して埋め込んだときのためにmargin: 0.5em 0 1em;を加えて、上下に余白を入れて動画同士の間に隙間を作るようにしました。

試しにこのページを560px以下の解像度のスマホで見ていただければYouTube動画が幅いっぱいに収まっているはずです。

その他参考ページ

https://design.webclips.jp/youtube-movie-size/ https://design.webclips.jp/youtube-movie-size/

https://qiita.com/0084ken/items/e7d35d2a8eb507f4d59c https://qiita.com/0084ken/items/e7d35d2a8eb507f4d59c

スタイルシート on qwerty.work

【Wordpress】TCDテーマ「GENESIS」関連メモ

TCDテンプレート用のCSSリファレンス

GENESIS用のタグとCSS

共通CSS

TCDテーマ「GENESIS」の公式ページ

デモサイト

【CSS】両端だけ半円（丸）にする border-radius: 9999px;

両サイドだけ丸いボタンを作りたい

未使用で不要なCSSのルールを削除するために確認する方法

余計なスタイルシートのルールは削除したい

ブラウザのデベロッパーツールを使う方法

Chromeの場合

Edgeの場合

その他のツールは？

CSS？SVG？Canvas？動く背景アニメーションのサンプルや参考ページ

こういう背景ってどうやって作るんだろう？

参考ページ

動くバブルみたいなやつはこれっぽい？

動く波はこれっぽい？

静的ウェーブをオンラインで簡単に作れるサイト

その他

SVGアニメーション

CSSでマスクやアニメーションの参考

SVGのストライプなどのパターンを作るサイト

AdSnseの広告に出る黄色の背景を消すCSS（スタイルシート）

余計な黄色の背景や余白を消す

CSS（スタイルシート）例

AdSenseの広告コードに加えた例

スタイルシートに加えた例

黄色の部分が消えた！

YoutTubeの埋め込みIFLAMEをレスポンシブ対応するCSS

モバイルページではYouTubeの画面がはみ出る

まずは埋め込みタグをで囲む

レスポンシブ対応するCSS

最近のaspect-ratioを使用する方法

ソース例

参考サイト

ブラウザの対応状況

従来のpadding-top: 56.25%;を使用する方法

ソース例

参考ページ

従来の方法でスマホ用にちょっと手を加えた例

その他参考ページ