WordPressのテーマ「Twenty Seventeen」の見出しのデザイン変更方法です。
デフォルトのままだと、記事内のh2とh3が大きすぎるように思ったので、文字を小さくし、h2は左に8pxの罫線を入れ、背景に薄いグレーを入れました。文字色もグレーから黒色に。
h3は下線2px入れました。
よくあるデザインですが、スマホ上でとても読みやすいので気に入っています。
CSSを追記する
外観＞カスタマイズ＞追加CSSを開く。
以下のコードをコピペする。
/* 見出しh2 */
.entry-content h2 {
border-left: 8px solid #000000;
padding: 0 0 0 15px ;
line-height: 1.8;
font-size: 20px;
font-size: 1.25rem;
color: #333;
background-color: #eee;
}
/* 見出しh3 */
.entry-content h3 {
padding: 0 0 0 0px ;
line-height: 1.5;
font-size: 18px;
font-size: 1.125rem;
border-bottom: solid 2px black;
}注意点を１つ。
h2は、トップページの記事タイトルやアーカイブページの記事タイトルにもなっています。
今回は固定ページ・投稿ページ内のh2だけデザイン変更したかったので、クラス名「.entry-content h2」で指定しています。
トップページのh2（ホームページセクションのタイトル）のクラス名は「.entry-title」
以上です。
Other Contents
1-01 小テーマ の作成
1-02 基本構造とデフォルトのカスタマイズについて
1-03 ホームページ設定やテーマオプションが表示されない
2-01 フッター に自分のコピーライトを表記する
2-02 アドセンス審査コードの貼り付け
2-03 スマホ表示でハンバーガーメニューを上部固定
2-04 スマホ表示でハンバーガーメニューの文字を消す
2-05 フロントページのセクション数を変更
2-06 特定のブロックにだけ背景色をつける
2-07 「モデレートしてください」メールを止める
2-08 見出しのデザイン変更する
2-09 パンくずリストを設置
2-10 アイコンフォントを利用する
2-11 任意の画像にのみ枠線をつける