【WordPress】yStandardカスタマイズ、cssで記事中だけ見出し(h2)のスタイルを変える

2020年9月18日

今回は追加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キーを押すと調べるための画面が出ると思います。

いかがだったでしょうか。
記事中だけスタイルを変えたいという場面は結構あると思うので、そんなときは是非この方法を試してみてください。