【WordPress】目次に階層を作る方法

応援クリックしていただけると励みになります！

ブログ環境について

あろうのブログ環境は、以下の通りです。

• WordPress（ワードプレス）を使用
• cocoon（コクーン）テーマを使用

目次の階層とは？

今回は、目次に階層を作るやり方をご紹介します。
そもそも、目次の階層ってなに？という方もいると思いますので、階層についてざっくり説明します。
目次の階層というのは簡単にいうと、目次の中でグループを作るということです。
百聞は一見にしかず。
グループ化した（階層を作った）目次を見てみましょう。

このように、「2．おすすめカード（ピックアップコンテンツ）の作り方」から枝分かれして、
「1.記事の選び方」
「2.記事の表示設定について」
という2つのサブ目次が表示され、さらにそこから枝分かれして4つのサブ目次が表示されています。
これが、目次の階層（グループ化）です。
（ちなみにこの目次をクリックすると、この記事に飛ぶこともできます）

目次の作り方

まずは階層の一番上、通常の目次の作り方を紹介します。
方法はとっても簡単です。

まずは記事編集画面で、目次にしたい文字を入力します。
次に、その文字にカーソルを合わせて、「ブロックタイプまたはスタイルを変更」をクリックし、表示されるリストの中から「見出し」をクリックします。

すると入力した文字の表示が変わります。
これで、目次ができました。
編集画面上では、「見出し」に変更する前と後で以下のように表示が変わっていると思います。

目次の階層の作り方

続いて、目次の階層を作っていきます。
目次の階層の作り方は、先ほど行った目次の作り方とほとんど同じです。
まずは、階層を作りたい目次名を入力して、
先ほどと同じように書式を「見出し」に変更します。

続いて、見出しに変更した目次名にカーソルを合わせて、
H2「見出しレベルを変更」をクリックします。
すると、H1~H6まで表示されたウインドウが出てきます。

ちなみに、H1はブログ名。
H2は現在の目次の見出しレベルです。
今は、目次に階層を作りたいので現在の目次の見出しより一つ下の「H3」をクリックします。

そうすると、見出しレベルが一つ下がった見出しが作成できます。
見出しレベルH3に変更する前と後で以下のように表示が変わっていると思います。

この状態でプレビューを確認してみましょう。
「新しいタブでプレビュー」を選択すると、実際の公開画面で確認ができます。

以下のような目次が表示されていると思います。
これで、目次と目次の階層が作成できました。
さらに階層を掘り下げたいときは、H4やH5と選択していけば階層を掘り下げることができます。
けれど、あまり掘り下げすぎると読みにくくなる場合もありますので、ほどほどがよいでしょう。