ブログを初めて数年立ちますが、今まで他人のコードのコピペばかりでしたが、せっかくブログをやっているのだから自分でHTMLやCSSをカスタマイズしてみたいと思い、本を購入しました。
今回は勉強したことを活かすために、簡単なカスタマイズとしてh2タグの1文字目の大きさを変えてみたので備忘録として残します。
疑似要素を使って一文字目の装飾を変更する
疑似要素とは指定した要素の特定の部分についてスタイルを付けられます。
使用方法は簡単でセレクタの後にコロン二つを付けて使用する疑似要素名を記述します。
具体的に言うと下記のとおりです。
セレクタ(ID、タグ名など)::疑似要素名今回はセレクタとしてh2タグを選択しています。また、疑似要素として「::first-letter」
を選択しています。「::first-letter」は最初の文字だけにスタイルを適用するというものです。
他の疑似要素について知りたい方は下記のサイトを参照して下さい。
前置きが長くなりましたが、今回追加したCSSは下記のとおりです。
/*[START]h2タグの最初の文字の色と大きさを変えるCSS*/
h2::first-letter{
color: #ff9e77;
font-size: 36px
}
/*[END]h2タグの最初の文字の色と大きさを変えるCSS*/簡単に解説すると2行目のcolorでh2タグの1文字目の色を指定しています。
今回はQooQのデフォルトカラーのオレンジにしました
そして3行目のfont-sizeで文字の大きさを指定します。
特に指定しなくても大丈夫ですが他の人のブログで1文字目だけ大きくしているのを見かけたので、それに倣って文字サイズを大きくしています。
CSS追加前後の見た目の違い
先ほどのCSSを追加する前のh2タグの見た目は下記の通りです。
CSSをブログ全体に適用したくない場合
先ほど紹介したやり方はこのブログすべてのh2タグの見た目を変えるものでした。
例えば私のブログのサイドバーのコンテンツのタイトルにはh2タグが使われているのですが、先ほどのCSSを使うと記事本文だけではなく、ブログの記事全体に影響を与えてしまいます。
具体的に見てみますとサイドバーにある人気の投稿も以下のようにCSSが適用されてしまいます。
個人的には記事だけにCSSを適用させたいため、ここからは本文の記事だけにCSSを適用する方法を紹介します。
記事本文のIDもしくはクラスセレクタ名を探す。
HTMLにはセレクタと呼ばれるものがあります。簡単に説明するとセレクタを指定してあげることでCSSのスタイルを適用する範囲を選択することができます。
セレクタについて知らない方がいましたら下記サイトを参照お願いします。
HTML編集モードに入って個別記事本文のCSSを規定している個所を探しだします。
私の場合はQooQを使っているのですが、HTMLを確認するとコメントで個別記事本文というものがあります。
これを見ると記事本文のIDとして「single-conten」というものが割り当てられているのが分かります。
なので先ほどのコードを少し修正して下記のようにします。
/*[START]h2タグの最初の文字の色と大きさを変えるCSS*/
#single-content h2::first-letter{
color: #ff9e77;
font-size: 36px
}
/*[END]h2タグの最初の文字の色と大きさを変えるCSS*/追加する場所はbloggerのCSSを追加からでもいいと思いますが、下記のように個別記事本文とコメントが書かれた付近に記述しました。(似た者同士は近くに記述した方が後から分かりやすいというだけの理由です。)
まとめ
今回はHTML/CSSのHellow World的な意味合いでh2タグの見栄えを変えてみました。HTML/CSSはまだ勉強中なので今後も勉強したことを活用できるようにしたいと思います。
↓その他ブログのカスタマイズまとめ記事
.png)
0 件のコメント:
コメントを投稿