WordPressをインストールした初期状態では見出しの強弱がいまいち分かりづらい感じです。そこで今回は、WordPressの見出しをCSSでstyleを付け加えてハッキリとした強弱を付ける方法を紹介します。
見出しの付け方
WordPressの投稿で見出しを付ける方法は、ブロック選択で見出しを選択します。
見出しブロックの上にあるH2とあるボタンを押すと見出し3、見出し4とあります。そこで見出しの強弱を変更できます。
h○とは見出しを表すタグであり数値が大きくなるほど弱い見出しとなってきます。
見出し1=<h1> （タイトル）
見出し2=<h2> （大）
見出し3=<h3> （中）
見出し4=<h4> （小）
これが基本的な強弱の付け方です。
しかしWordPressをインストールしたての初期状態では、見出しの強弱が非常に分かり辛いです。見出しの表示を変えるにはCSSで見出しにstyleを指定しなくてはいけません。
その方法を次で紹介します。
見出しのstyleを指定
まず大前提にstyleを指定するにはCSSの知識がある程度必要になります。初心者の人にもなるべく分かりやすく説明はしますが、本当にCSSについて何もわからないって方は以下の記事を一度目を通していただきたいです。
見出しのstyleを記述する場所はテーマによって異なります。CSSセレクタのstyleの記述を丁寧に案内しているテーマでしたらそれに従って記述していってください。
特にその様なものがない場合は自分で探す必要がありますので次の様に探して下さい。
まずは下記の様にh2タグ（見出し2）となる部分を選択して右クリックの「検証（デベロッパーツール）」でCSSのクラス名を調べます。
この場合「.post-content h2」というクラス名でh2のstyleを記述しています。次に、この「.post-content h2」が記述されている場所を探します。
通常、テーマエディタから行けるスタイルシートにあるかと思います。
スタイルシートには、サイト全体のstyleを指定する大量の記述が書かれていると思います。これを目視で探すのは大変なので「Command + F」で「.post-content h2」と検索をかけましょう。すると「.post-content h2」のところに一気にジャンプします。ここの{この中}の記述を変更すればstyleが変わります。
テーマエディタからスタイルシートを編集する場合は完全書き換えとなるので、失敗した場合も自分で戻さなくてはいけません。そのため軽いバックアップの様に弄る部分は必ずコピペでどこかに（PCのテキストファイルなどに）保存しときましょう。
もう一つの方法は、WordPress右側管理画面の外観→カスタマイズにある追加CSSに記述する方法です。
先ほどの例で言うと「.post-content h2 {スタイル色々} 」と自分で全て記述していきます。下記の写真では実際に記述して反映されている状態です。
この場合は元のスタイルシートを弄らなくて済むので、失敗した場合はその記述を消せば元のstyleに戻ります。
テーマに子テーマがある場合、子テーマのスタイルシートに追加で記述していけばOKです。その場合も上記の追加CSSと同様に元のスタイルシートを弄らなくて済むので、失敗した場合はその記述を消せば元のstyleに戻ります。
以上が「ワードプレスで強弱のある見出しの付け方」でした。
見出しのstyleは考え方しだいでは無限大です。色々な見本があるので良かったら以下を参照してみて下さい。
下記の記事では基本的なGutenbergの使い方をまとめています。合わせてどうぞ。
