WordPressの目次：自動作成プラグイン『Easy Table of Contents』の使い方

2020年2月29日

見出し毎の「目次」作成を手作業で作るのって面倒！目次を自動表示できるおすすめのプラグインが知りたい！

その気持はわかる！実は私も以前は、手作業で目次を入れていた。
でも今はめちゃくちゃ便利なプラグインがあるので紹介しよう！

今回は、インストールするだけで簡単に目次が導入できて、かゆいところに手が届くカスタマイズも簡単な、目次用プラグインの決定版『Easy Table of Contents』を紹介しよう！

目次のおすすめのプラグイン「Easy Table of Contents」とは？

この「Easy Table of Contents」は目次プラグインの「２大巨頭」のひとつと言っていい。

２大巨頭の、もうひとつの有名プラグインは「Table of Contents Plus」というもので、こちらもかなり有名なのだが「最近更新されていない」というデメリットがあり、今回紹介する「Easy Table of Contents」の方がカスタマイズ性が優れている。

Easy Table of Contentsは、「ページ毎に見出しの表示条件を変更できる」という機能がついている点で、個人的にはこちらの方がおすすめなのだ！

「Easy Table of Contents」のインストール

まずは、プラグイン検索画面で「Easy Table of Contents」と検索して「有効化」をクリックするだけでインストール完了！

有効化できたら、早速カスタマイズ設定していこう。

「Easy Table of Contents」の初期設定

左メニューの「設定」＞「目次」をクリックして、目次の設定画面を開く。

初期設定の項目説明

各種設定項目がいくつかあるので、順番に説明しておこう。

サポートの有効化

まずは「サポートの有効化」の欄で、目次を表示させる投稿タイプを選んでチェック。

ここで「有効化」したページだけ、目次を表示させる事ができるので、一般的には「投稿」「固定ページ」などを選ぶことになるだろう。

「Easy Table of Contents」の残念なポイント

Easy Table of Contentsの残念な点は、執筆現在カテゴリページやタグページでこの目次機能が使えない点だ。ここはできれば改善して頂きたい！
※もしカテゴリページなどで使える方法があれば是非教えてください！

自動挿入

次に「自動挿入」をさせるページタイプを選ぶ。自動表示にチェックを入れるとデフォルトで目次が表示されることになる。もちろん、自動挿入を選んだとしても、個別のページで、非表示を設定できるので安心だ。

つまりこの「自動挿入」を選ぶか選ばないかは、目次を表示させる事が多いか少ないか？で選べば良い。

位置

目次を表示させる位置を選ぶ設定。特にこだわりがなければ、個人的には最初の見出しの前（デフォルト）で良いと思う。

表示条件

表示条件は、見出しの数が何件以上あれば見出しを表示させるかを選ぶ項目。

つまり、見出しの数があまりに少ない場合は「目次は不要」という考え方もあるからだ。個人的には３〜４件以上あれば、目次があっても良いのではないかと思っている。

見出しラベル

目次の上に見出しを入れたい場合は、チェックを入れて、ラベル名を入力しておこう。「目次」や「コンテンツ」「index」などでいいだろう。

折りたたみ表示

「折りたたみ表示」とは、目次が長くなった時にボタンをクリックする事で目次をコンパクトに小さくする機能であり「目次表示の折りたたみを許可します。」にチェックを入れておくと、右上にボタンが表示されるようになり、図のように目次を閉じれるようになる。

しかし個人的には、目次を閉じるよりは、スクロールして読み飛ばした方が早いので、「わざわざクリックして閉じる人も少ない」と考えており、余計なボタンを表示させずにシンプルな目次の方が良いと思う。

ツリー表示

「ツリー表示」とは、見出しの階層をデザイン的にインデントさせるかさせないかの違い。個人的には「ツリー表示」した方が、ユーザーにとって記事の構成がわかりやすいのではないかと思っている。

カウンター

カウンターとは、目次の各項目の先頭に入れる数字の事で「小数点表示」「数字」「ローマ字」「なし」から選ぶ事ができる。

スクロールを滑らかにする

「スクロールを滑らかにする」とは、目次をクリックした時に下に滑るように移動するか、一瞬で移動するかの違いだ。

「スクロールを滑らかにする」にしておいた方が、ユーザーがページの下部に移動したことがわかりやすいのでおすすめだ。

「外観」の設定

外観は見た目の設定なので、自分のブログのデザインに合うように、好きな設定にするだけ。

「幅」の設定は、Autoの場合は文字サイズに応じて自動で広がっていく設定で、得にこだわらないければAutoでいいだろう。サイズを指定したい場合は、プルダウンから選んでも良いが、「ユーザー定義」を選んだ上で、その下にある「カスタム幅」で自由に設定する事も可能だ。

「回り込み」は崩れるので「なし」でいいだろう。

その他「文字サイズ」や「文字の太さ」「文字サイズ」はデザインに合わせて設定しよう。

外観のテーマ

外観内にあるテーマは、目次のデザイン的な色の組み合わせを選ぶ欄。図にあるようにテーマの中から選ぶか、カスタマイズするかを自由に選ぼう。

「高度」の見出し設定

「高度」の設定は「見出し」の欄以外は基本的にさわらなくてもOKなので、見出しの部分だけ説明しよう。

「見出し」の設定は、コンテンツ内のどの見出しまで「目次」として表示するかを選ぶ欄。

個別の記事内でも設定できるのだが、既定値として設定しておいた方がいいだろう。目次が長すぎるのも、あまり良くないと思うので適度に「h2」「h3」あたりまで表示する設定にしておいて、あとは個別のページ内で、h2だけに変更したり、h4まで入れたりと調整すれば良いだろう。つまり自分のブログ内で一番多いであろう設定にしておくと、個別ページで設定する必要が無くなるので無難だろう。

「CSS」のチェックは、独自にCSSスタイリングしたい場合にチェックを入れ、プラグイン内に用意されているテーマのCSSを読み込まない設定にする事ができる。

全ての設定ができたら「変更を保存」をクリックして初期設定は終了。