@yuichico_です。サイト訪問者が記事を閲覧するとき、見出しはデフォルトの装飾でも問題ないです。ですが、見出しを自分好みにカスタマイズすれば、他のブログとの差が出ますし、何よりデザインが自分色に染まり、カッコイイと思います。Stinger7利用者ならコピペでできますので、よかったら使ってください。
子テーマのダウンロードとインストール
リンク Stinger7親テーマと子テーマのダウンロードとインストールのやり方
親テーマのみにならず、子テーマをダウンロードしてインストールしてしてください。カスタマイズしていくにあたり重要なことです。
h2
子テーマの 外観→テーマ編集→style.cssの一番下へコピペしてください。
h2{ position: relative; font-size: 20px; font-weight: bold; margin: 0 0 1.5em; padding: 0.5em 0.5em 0.5em 2.5em; border-bottom: 3px solid #3498db; background: #fff; } h2:before{ content: "□"; font-size: 120%; position: absolute; color: #3498db; top: -0.5em; left: 0.2em; height: 12px; width: 12px; border-top: 10px solid #fff; } h2:after{ content: "□"; font-size: 120%; position: absolute; color: #3498db; top: -0.2em; left: -0.3em; height: 12px; width: 12px; border-top: 10px solid #fff; }
h2見出しは1つの記事に必ず1回は使用する見出しですので、デザイン性を高くしてサイト訪問者に閲覧してほしいです。左上に青色のサークルを二つバランスよく入れました。ちなみに赤枠で囲まれているのは 画像 ですので実際に赤枠は反映されませんので、ご安心ください。以下同様です。
h3
.post h3 { color: #333; border-left: 3px solid #3498db; border-bottom: none; font-size: 18px; }
h3見出しはシンプルに左に青色の縦棒を入れました。
h4
.post h4 { background: #fff; border-bottom: 1px solid #3498db; color: #333; font-size: 16px; }
h4見出しは青色の細い下線を入れました。
まとめ
見出しをCSSでカスタマイズすることで、サイトを閲覧している人に段落を分かりやすくするのと、カッコよく見せられます。自分色のデザインにカスタマイズしてみましょう。
コメント