Twenty Sixteen テーマの見出しタグ h2、h3 をカスタマイズ【WordPress公式テーマ】
見出しタグのカスタマイズ
WordPressの公式タグTwenty Sixteenテーマ、悪くないんですが、ちょっと記事内のh2、h3などの見出しタグが見づらい。
上下に余白はあるし文字の大きさが大きくなるのはいいんですが、特にぐだぐだと文章の多い私のサイトではかなり見づらくなってしまいます。
そこで、今回style.cssに下記CSSを追加し、見出しタグ h2とh3のデザインをカスタマイズ。
カスタマイズとは言ってもせっかくのシンプルなTwenty Sixteenのデザインを崩したくもないので、下に線を入れるにとどめました。
.entry-content h2 {
padding-right: 12px;
padding-bottom: 16px;
padding-left: 12px;
border-bottom: 1px solid #666666;
}
.entry-content h3 {
padding-right: 12px;
padding-bottom: 16px;
padding-left: 12px;
border-bottom: 1px solid #666666;
}本サイトには子テーマを設定しているので、上記CSSを子テーマのstyle.cssに記述。
border-bottomでグレーの実践を下に表示。
そのままではタグ内のテキストと下線がくっついてしまうので、padding-bottomで16pxの余白を設定。
また、本文との区別をつけやすいよう、左右にも12pxの余白を入れています。
上の余白はいじらずそのまま。
これらの数値は好みでまた変えても良いでしょう。
h2タグカスタマイズテスト
h2見出しタグのカスタマイズ後のテスト。
下線がついて、ちょっと区別しやすくなった？と思います。
h3タグカスタマイズテスト
左右の余白によってツラ位置を少しずらし、本文との差別をつけています。
なお、管理人がよく使う見出しタグはh2とh3のみでh4以下はあまり使わないため手を付けていません。
好みによって同様のカスタマイズを行っても良いでしょう。