はじめに
こんにちは、爆走ひつじです。
以前、luxeritasでブログ記事の見出しの色をカスタマイズする方法を記事にしましたが、その後もう少し良い方法が見つかりましたので、まとめます。
luxeritasでブログ記事の見出しの色をカスタマイズする
見出し文字列のひっかけ方
前回は、".typesquare_tags"でひっかけましたが、".post h2"で、ひっかけるのがよさそうです。
これであれば、".post h3"というように、さらに下位の節の見出しもひっかけやすくなります。
具体例
具体的に、以下のように設定しました。
/* 見出しレベル2の設定 */
.post h2 {
color: white; /* 見出し文字の色を白色 */
font-weight: bold; /* 見出し文字の色を白色 */
border-left: none; /* 見出しの左端のボーダー表示をなし */
background: linear-gradient(#0a2e63 , #3f65a9); /* 見出しの背景をグラデーションに */
border-radius: 5px; /* 見出しの背景の角を丸く */
}
.post h2::first-letter{
font-size: 48px; /* 見出しの1文字目を大きく */
}
/* 見出しレベル3の設定 */
.post h3 {
border-left: solid 10px navy; /* 見出しの左端のボーダーの太さと色を設定 */
}
最後に
見た目を凝りだすときりがないのですが、cssの勉強になります。
これからも少しずつ、カスタマイズしていきたいと思います。
またよろしくです!