ワードプレスでH2/H3などの見出しのデザインを変更する方法

素人のワタシは、いつもサイトをカスタマイズすると、

あれ、どうやったっけ？？

と、忘れてしまうので、『ブログ備忘録』として記録することにしました。

今回は、ワードプレスでサイトを自分らしくデザインするために、H２やH3などの見出しの初期設定のデザインを変更する方法を書き留めたいと思います。

テーマカスタマイザーでは出来ない変更

基本的には、テーマカスタマイザーによって変更できるのですが、どうしても細かい色やデザイン自体を会いたいときにはCSSコードを書く加える必要があります。

*子テーマで編集を行わなければいけないテーマでは、必ず子テーマで追加のCSS編集をしましょう。

H2とH3のディファルトのデザインを確認する

まず、H2の初期設定のデザインを見てみましょう。

H2、H3を比べてみると、H3のほうが手前に引きたってみます。H2はH3よりも大きな見出しにしたいので、H2を強調するようなデザインに変更したいと思います。

親テーマの『style.css』からH2とH3のCSSコードを探す

１. 外観をクリックして、テーマの編集を開く

２. 『編集するテーマを選択する』から親テーマを選ぶ

現在使用しているテーマがハミングバードなので、hummingbirdの親テーマを選択します。

３. H2、H3のCSSコードのあるセクションを探す

それぞれのテーマのデザインによって、CSSコードがあるセクションの名前は違ってきますが、ハミングバードのテーマでは、『POSTS & CONTENT STYLES』にありました。

４. H2とH3のコードをコピーする

この2つをコピーして、あとから使いやすいように、Noteなどに貼り付けて保存しておきます。

テーマカスタマイザーの『追加CSS』で変更する

テーマの編集画面の上の『付属のCSSエディター』のところをクリックすると、自動的にCSSのカスタマイザーが開きます。

この時、H2とH3のコード追加の編集をライブビューで見れるように、元のスタイルを表示しておきましょう。

H2の編集

１. 親テーマのH2のCSSコードを編集する

H2の初期設定のCSSコードは：

しかし、ディファルトのカラー設定が入っているので、このままコピーしては、基本設計に戻ってしまいます。

２. 変更の必要ないCSSコードは削除する

今回変更したいのはカラーのみなので、それ以外の部分は全て削除します。そうなると、とっても短いコードができます。

これをコピーして、サイトカスタマイザーの『追加CSS』に貼り付けます。

３. H2のカラーコードを変更する

『color: #fff; 』の『#fff』に変更したいカラーコードを入力する。

変更したのがこちら・・・・

白のテキストからから、サイトのメインテキスカラーに変更しました。これで『H2見出し』のカスタマイズが終わりました。ここできちんと『公開』を押して保存しておきましょう。

H3の編集

１. 親テーマのH3のCSSコードを『追加CSS』にコピーする

まず、H3の初期設定のCSSコードは・・・・

ですが、左側のボーダーは変えないので、『border-left:4px solid;』を削除します。

これをコピーして、サイトカスタマイザーの『追加CSS』に貼り付けます。

H3の見出しは複雑で、上下の余白を編集したいので、ライブビュー を見ながら数値を少しずつ変えながら、カスタマイズしてきます。

そして、最終的な変更をすませたデザインが、こちら・・・・

最終的に決まったCSSコードは・・・・

変更前と比べてみると、スペースが空きすぎてなくて、しっくりと馴染んでように見えませんか?まあ、これは個人の趣味なので、好きなようにカスタマイズしてみてください。

H4の編集

H4の初期設定は、とってもシンプルな、太文字。これって、どう使うかねぇ・・・と思っていたら、実はあったんですねぇ・・・・ハミングバードのテーマを作っている、OPEN CAGEのサイトに、このH2、H3、H4をカスタマイズする方法が！！

https://open-cage.com/albatros-title-css/

ひゃ〜、コピペすればよかった〜！！

でも、まあね、勉強になったと言うことで・・・・。

さて、そのOPEN CAGEのサイトからパクってきたのが、こちらのCSSコードでございます。

.entry-content h3{
background: #E9E3DB;
}

このコードを加えて、H3のコードをミックスしたCSSコードはこちら・・・・

これを同じように、サイトカスタマイザーの『追加CSS』に貼り付けます。

backgroundによって、背景色がつきました。

これをH4の見出しに利用させてもらいたいと思います・・・。

まとめ

見出しは、記事の文章の構成上でも、レイアウトデザインでも大事な部分だと思います。見出しをたくさん使えばいいというのでもなし、かといって、いろんな見出しをつけて記事全体がごちゃごちゃになってしまって本末転倒になりますよね。

見出しのデザインは、ネットで検索すると色々な種類が出てきます。そのCSSコードを貼り付けたり、カラーコードを加えたりして、デザイン変えてみるのも面白いと思います。