多くの記事に目を通していると当たり前のようにある目次ですが、目次はとても重要な存在です。
特に長文の記事の場合にはユーザーが知りたい情報まで簡単にスキップできることでユーザビリティの向上が期待できます。
『AFFINGER5に目次を設置したい！』そう思った方は少なくないと思いますが、デフォルトの状態では目次を作成する機能は備わっていません。
AFFINGER5では有料プラグイン（5,980円）の『SUGOI MOKUJI（すごいもくじ）』というAFFINGER5独自のプラグインがあります。
有料だけあって、目次のクリック数を計測できたり様々な機能を利用することができる優れたプラグインですが、有料のプラグインを購入することに抵抗がある方もいると思います。
そこで今回は無料の目次作成プラグインの「Table of Contents Plus」を使ってAFFINGER5のテーマに目次を実装する方法を解説したいと思います。
目次
Table of Contents Plusとは
Table of Contents Plusは、記事に目次を簡単に追加することができるWordPressのプラグインです。
このプラグインを使うことで上の画像のような目次を簡単に作成することができます。
デザインを変えたり、表示させたい見出しのレベルなど細かい設定も可能で、とても便利な無料で使えるプラグインです。
また、過去記事にも自動で目次が実装できるのでオススメです。
Table of Contents Plusで目次を作成
それでは早速Table of Contents Plusを使って目次を作成する方法を解説していきます。
Table of Contents Plusのインストール
まずはWordPressのメニュー上にあるプラグインから新規追加を選択します。
右上の検索窓にTable of Contents Plusと入力します。
Table of Contents Plusのプラグインが表示されたら今すぐインストールをクリックします。
インストールが完了したら有効化をクリックします。
Table of Contents Plusの設定
Table of Contents Plusの設定方法ですが、WordPressのメニュー上にある設定からTOC＋を選択します。
ここではTable of Contents Plusの各設定が可能です。
デフォルトのままでも利用可能ですが、下で各項目の解説をしておりますので参考にしながら設定を行ってください。
設定が全て終わったら最後に「設定を更新」を忘れずクリックしましょう。
位置
ここでは目次を表示させる位置の設定が可能です。
デフォルトでは「最初の見出の前」に設定されています。特にこだわりがなければデフォルトの位置が自然ですのでオススメです。
表示条件
見出しの数によって目次を表示させるかどうか指定することができます。
見出しの数を2〜10の間で設定しますが、2つか3つの設定がオススメです。
以下のコンテンツを自動挿入
目次を設定するコンテンツを指定することができます。
投稿に自動挿入する場合は「post」にチェック、固定ページに自動挿入する場合は「page」にチェックを入れます。
見出しテキスト
目次のタイトルを設定することができます。
デフォルトでは「Contens」となっていますが、目次やコンテンツなどお好みのタイトルでOKです。
階層表示
階層表示では、目次で階層を表示するか指定することができます。
h2やh3など複数の見出しがある場合は階層が表示されている方が見やすいのでデフォルトのままでチェックを入れておきましょう。
番号振り
h2、h3が複数ある場合に順番に番号をつけてくれます。
ここもデフォルトのままチェックを入れておくことをオススメします。
スムーズ・スクロール効果を有効化
目次の各項目をクリックすると該当の箇所に移動するのですが、指定の見出しまで一気にジャンプするのか、スクロールして移動するのかを指定することができます。
ここはお好みの設定でOKです。
外観ープレゼンテーション
ここでは目次のデザインを変更することができます。
お好みのデザインに変更しましょう。
上級者向けの設定
上級者向けの設定をする場合は黄枠で囲った表示をクリックすると設定画面が表示されます。
上級者向けの設定は、基本的にはデフォルトの状態で大丈夫なのですが、見出しレベルだけ設定しておきましょう。
ここでは目次に表示させたい見出しレベルが設定できますが、h4まで表示させると目次の量が多くなりすぎてしまうこともあるのでh3までの表示がオススメです。
Table of Contents Plusのカスタマイズ
Table of Contents Plusをカスタマイズする方法ですが、まずはWordPressのメニュー上にある外観からカスタマイズを選択します。
次に左のメニューからオプションカラーをクリックします。
次に目次プラグイン（すごいもくじ）をクリックします。
ここでは目次のデザインや色のカスタマイズを行うことができます。
既に反映されている記事の目次を並べてカスタマイズすると変化がとても分かりやすいのでオススメです。
まとめ
今回は無料プラグインの「Table of Contents Plus」を使って目次を作成する方法を解説しました。
目次があるだけで記事の見栄えがよくなりますのでぜひこの機会にTable of Contents Plusを使って目次を作成してみましょう。