【WordPress】記事に目次を作成する方法をご紹介！

今回は目次の作成方法について説明していきたいと思います。
この記事を読んでいただければ、以下の内容をご理解いただけます。

この記事を読んでわかること

目次の必要性

WordPressでの目次の設定方法

では、説明に入っていきたいと思います。

目次とは？

目次は、Webサイトの記事や書籍などの見出しを順序立てて書き出したリストです。
この記事はどういった内容が記載されているかを要約されたリストになります。

目次の必要性について

記事を書く際に目次を作成することを推奨します！

目次の必要性

・目次があることで読者は、知りたい情報が記事内にあるかを一目でわかる
・目次にリンクを設定することで読者の利便性を高めることができる
・読者に良い記事＝良質なコンテンツ＝SEOでも良い効果が期待できる

私個人も知りたい内容を検索して記事を見る際は、必ず目次を活用します。
まず自分の知りたい情報が書かれているかを目次で確認します。
その後、知りたい情報があれば目次からリンク先の見出しへ移動していきます。
目次がない記事は正直、あまり見ないです。（記事全部を読む必要があり、めんどくさいからです。）

上記のことより、記事を作成する場合の目次作成は必須と個人的に思っています！

目次の設定方法

目次の設定方法についてご紹介していきます。
目次を作成する場合、私はプラグイン「Table of Contents Plus」を活用しましたので、こちらの導入方法についてご紹介していきます。

①WordPressのプラグイン > 新規追加から、「Table of Contents Plus」を検索して
「今すぐインストール」を押下して下さい。

②インストール後、「有効化」ボタンを押下して下さい。

③有効化までできたら、WordPressの設定 > 「TOC+」を選択して下さい。
選択すると以下の画面に遷移しますので、各種設定を実施していきます。

設定内容

・位置：見出しを表示する位置
・表示条件：目次を表示する場合の条件（見出しの数）を設定
・コンテンツタイプ：post/pageの2種類を選択
・見出しテキスト：目次を表示する際のタイトル名
・ユーザによる目次の切り替え：ユーザが目次の表示ON/OFFできるかの設定
・階層表示：目次を見出しに合わせて階層表示場合、選択
・番号振り：目次に番号を振る場合、選択

設定内容

・スムーズ・スクロール効果を有効化：目次からリンク先に移動する場合にスクロール形式にするかどうか
・横幅：目次の横幅（デフォルトで良いです）
・回り込み：なし（デフォルト）
・文字サイズ：文字の大きさ（デフォルトで良いです）
・プレゼンテーション：目次の外観（お好みのものを選択して下さい）

④設定が完了したら「設定を更新」ボタンを押下して設定内容を保存して下さい。

以上で目次の設定内容については、完了です！

補足としてですが、私の場合は上記の設定だけでなく以下の設定も併せて実施しましたので
こちらもご紹介しておきます。
・目次を真ん中に表示させる方法
・目次が2つ表示されてしまう

補足

補足①：目次を真ん中に表示させる方法

Table of Contents Plusだけの設定だと、目次自体は左寄せになってしまいます。
そのため、どうしても真ん中に表示させたい！という方は、CSSの編集を実施する必要があります。
真ん中に表示させるCSSは以下のコードになります。

#toc_container{
 margin-left: auto;
 margin-right: auto;
}

上記のコードをコピーして、wordpressの外観 > テーマエディタを選択後、style.cssに張り付けてください。そうすれば、目次を真ん中に表示できます！
※テーマがアップデータされるとコードも消えますので、その都度設定する必要があることが注意点です。

補足②：目次が２つ表示されてしまう

私の場合、目次を作成して確認したところ以下のように2つの目次が作成されました。
↓そのときの画像です。

こちらの原因を調査した結果、「Cocoonの設定に問題あり」ということが判明しました！
具体的にどういった問題なのかと言いますと、
テーマCocoonを使用されている場合、Cocoonでも目次の表示設定が可能です。こちらの設定がONになっていると、私みたいに目次が2つ作成されてしまいます。
そのため、Cocoonの目次設定に関してはOFFにしておく必要があります。