ブログの記事の中で全体の印象を決める要素として、「見出し」があります。
新デフォルトテーマ「Twenty Nineteen」では、ほとんど設定されていないため、味気のない物となっているとともに、若干見にくいので、カスタマイズしておくことをおすすめします。
ということで、今回は「Twenty Nineteen」の「見出し」をカスタマイズしていきます！
コピペで出来るのでお気軽にお試しあれ！
子テーマを使いましょう！
style.cssを編集するので、子テーマを使いましょう～
Twenty Nineteenの子テーマの作り方はこちらの記事で解説しています。
子テーマとは何ぞや？という方はこちらをご参考ください！
デフォルトの状態
「Twenty Nineteen」における見出しタグはこのように表示されます。
気になるのが<h4>の文字サイズが<p>と同じくらいなので、若干見出しなのかたんなる太文字なのかわかりにくいです。
完成図
今回のカスタマイズでこのようになります。
基本的に普段使いするのは、個人的には<h3>くらいなのですが、一応<h4>までカスタマイズしました。
それでは実際にカスタマイズしていきましょう！
style.cssにコピペ！
今回のカスタマイズを適用させるためには、style.cssに追記してください。
body:not(.home) article h2{
position:relative;
padding:15px 0 15px 15px;
line-height:1;
font-size:22px;/*文字サイズ*/
background:#767676;/*背景色*/
color:#fff;/*文字色*/
}
body:not(.home) article h2:before{
content: "";
position: absolute;
background:#fff;
top: 100%;
left: 7%;
margin-top:0;
margin-left: -15px;
border: 15px solid transparent;
border-top: 15px solid #767676;/*h2の突起部分色*/
}
article h3{
border-bottom:3px solid #767676;/*下線薄い方の色*/
position:relative;
padding:10px 0 0px 0px;
font-size:20px;/*文字サイズ*/
}
article h3:before{
content:"";
position:absolute;
bottom:-3px;
height:3px;
background:#000;/*下線濃い方の色*/
width:20%;/*下線濃い方の長さ*/
}
article h4{
display:inline;
padding:5px 10px;
font-size:18px;/*文字サイズ*/
background:#767676;/*背景色*/
color:#fff;/*文字色*/
}
ちなみに上記のコードは、WordPress管理画面の【外観＞テーマの編集＞style.css】でもいいですし、【外観＞カスタマイズ＞追加ＣＳＳ】からコードを追記することができます。
文字色や背景色、文字のサイズなどそれぞれのサイトのスタイルによって好みがあると思います。
変更しやすいように、対応する箇所に/**/でコメントを付けているので、変更したい箇所を使いやすいように変更してください。
ちなみにTwenty Nineteenでは、デフォルト状態のトップページ上で普通に記事の内容が表示されてしまいますが、今回のカスタマイズでは、<h2>のカスタマイズについて、トップページには適用されないようになっています。
なぜかトップページにおけるタイトルは、<h1>ではなく、<h2>になっているという状態のため…
もしトップページの<h2>にも同じくカスタマイズを適用させたい場合は、上記コードのh2を指定している個所の【body:not(.home) 】というコードを削除すると、トップページにも適用されますのお好みでどうぞ！
まとめ
デフォルト状態だと、見出しなのか記事の内容なのかわかりにくいので、とりあえず見出しだけでも簡単にカスタマイズしておくと、記事が見やすくなります。
見出しの前にアイコンを付けるなどして色々と凝ったりすることができますが、そのカスタマイズについてはまた今度やりたいと思います～
