今回は追加cssを利用して、記事中・本文中のみスタイルを変更します。例として見出し(h2)のスタイルを変えてみたいと思います。
使用テーマはyStandardです。
h2はいろいろ使われている
記事中の見出しをちょっと装飾してみようとh2をカスタマイズしてみます。
h2 {
padding: 0.5em 0.5em;
border-left: 8px solid #45bde5;
font-size: 1.6em;
font-weight: bold;
margin-bottom: 1em;
}
一見上手くいったかのように見えますが、普通にh2をカスタマイズすると・・・
記事中の見出しだけでなく、アーカイブのタイトルやサイドバーのタイトルにまで影響してしまいます。これはh2が他のところでも使われているからです。
記事中のh2だけに適用したい
ブラウザの検証機能(F12)を使ってメインコンテンツの部分を調べてみると、yStandardでは.entry-contentというクラスが付与されていました。
この.entry-contentの中のh2だけスタイルを変えるというふうにすればいいわけです。
.entry-content h2 {
padding: 0.5em 0.5em;
border-left: 8px solid #45bde5;
font-size: 1.6em;
font-weight: bold;
margin-bottom: 1em;
}
このように.entry-contentの後に半角スペースを空けてh2とすることで、記事中の見出し(h2)だけに設定したスタイルが適用されるようになります。
ひとつ気をつけたいのが、このメインコンテンツのクラスはテーマによって異なります。自分が使っているテーマの.entry-contentにあたる部分は前もって調べておきましょう。
ブラウザ上で右クリックしてでるメニューの検証、もしくはF12キーを押すと調べるための画面が出ると思います。
いかがだったでしょうか。
記事中だけスタイルを変えたいという場面は結構あると思うので、そんなときは是非この方法を試してみてください。