シンプルで高機能な目次プラグイン「Easy Table of Contents」の設定と使い方

記事の「目次」って思った以上に重要です。

ネットに慣れた現代人はリード文(導入)をすっ飛ばして、目次で全容を把握してから読む人だって少なくありません。

そこで今回は、ブログに目次を設置できるプラグイン「Easy Table of Contents」を紹介します。「今読んでいる場所が分かる」という機能もあるオススメのプラグインですよ！

Easy Table of Contentsの特徴

Easy Table of Contentsには以下のような機能があります。

1. 見出しタグを読み取り自動で目次を設置
2. 表示する見出し(h1~h6)は自由に変更可能
3. クリックすれば該当する見出しまでスクロール移動
4. 開閉ボタンを設置可能
5. 目次のデザイン(色など)を変更可能
6. 日本語対応済みなので設定しやすい
7. 追従サイドバーに設置すると現在の閲覧箇所が分かる

注目ポイントは6の「サイドバーで追従させると現在の場所が分かる」という機能です。

本プラグインの目次は、メインカラムだけでなくサイドバーにも設置することができます。さらに、目次を設置したサイドバーを追従させると、現在読んでいる場所が色付けされて分かるのです。

テーマに目次機能がない、サイドバーに目次を設置したい、という方はぜひEasy Table of Contentsを使ってみてください！

Easy Table of Contentsの設定・使い方

それではプラグインの解説に移ります。
ダウンロード数も20万越えの実績あるプラグインなので、安心して導入してください。

インストールと有効化

プラグインの「新規追加」から「Easy Table of Contents」で検索。
見つかったらインストールと有効化をします。

初期設定

プラグインを有効化したら、目次を使えるように設定していきましょう。
設定ページにはサイドバーの「設定」>「目次」から入ることができます。

一般

「一般」では、目次を表示する条件や適用ページを設定します。

順に開設していきます。

・サポートを有効化

目次を使用したいページを設定します。
ここにチェックが入っていないページでは目次が使用できません。

・自動挿入

目次を自動で挿入してほしいページを設定します。
投稿ページは必須として、固定ページなどは好みで設定しましょう。

・位置

目次を表示する位置を設定します。
最初の見出しの前後・ページ上部・下部の４か所から設定できますが、オススメはデフォルトの「最初の見出しの前」です。

・表示条件

目次を表示する条件を設定します。
表示する見出しタグが設定した数値を上回れば、目次が表示されるようになります。

・見出しラベルを表示

目次の名前を表示するという設定です。
チェックを入れることをおすすめします。

・見出しラベル

前項の「見出しラベルを表示」にチェックしていると設定できます。
分かりやすく「見出し」とするかオシャレに「Contents」とするか、もしくは「この記事の内容」などとするかはお好みで。

・折りたたみ表示

目次を折りたたむボタンが表示されます。
あまり使われる機能ではありませんが、あって損するものではないためチェックを入れましょう。

・初期状態

初期状態で目次が折りたたまれて表示されます。
目次を見る際のひと手間が増えるため、チェックはしない方が良いでしょう。

・ツリー表示

目次の項目を階層分けして表示する設定です。
複数の種類の見出しタグを使うならチェック推奨です。

・カウンター

項目前に数値を表示できます。
「数字」、「小数点表示」、「ローマ数字」、「なし」の4つから選択できます。

どれを選んでも構いませんが、「ローマ数字」は日本人に優しくないのでやめたほうが無難だと思います。

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

クリックした項目へのスクロール移動を滑らかにします。
違いはあまり感じませんが、特にデメリットもないのでチェックしておきましょう。

外観

続いて「外観」で目次の見た目を設定します。
基本的にはデフォルト設定のままでも大丈夫です。

・幅

目次の横幅を設定します。
デフォルトではautoになっていますが、100%がオススメです。

・カスタム幅

ピクセル単位で横幅を設定します。
前項の「幅」の設定で「ユーザー定義」を選択している場合のみ適用されます。

見出しの長さがページによって異なるため、ピクセル単位で固定してしまうのはあまりオススメしません。

・回り込み

回り込みできるように設定します。
目次のすぐ横から文字を入れたい場合に使用します。

よほど特殊な例を除き、まず使うことがないため「なし(デフォルト)」にしておきましょう。

・タイトル文字サイズ

タイトル(一般設定の「見出しラベル」)の文字サイズを設定します。
普通より少しだけ大きめの110%ぐらいがオススメです。

・タイトル文字の太さ

タイトルの文字の太さを設定します。
お好みで設定可能ですが、極端に太くするのはやめておきましょう。オススメはMiddleです。

・文字サイズ

本文(目次内の項目)の文字サイズを設定します。
メインコンテンツの文字より若干小さいぐらいが良いかと思います。オススメは90~95%です。

・テーマ

テーマの設定では目次ブロックの色合いを調整することができます。
自分で細かくカスタマイズしたい場合には「カスタム」を選択し、下のカスタムテーマで各項目ごとの色を設定しましょう。

背景色などはブログのテーマ色などに合わせて設定すればいいのですが、リンク色に関しては必ず青系統の色を使用するようにしましょう。

高度

「高度」は設定できる項目が多くありますが、弄る部分は少しだけです。ここでは設定するべき項目だけを解説していきます。

・見出し

目次に表示する見出し(hタグ)を設定します。
h2のみ、もしくはh2とh3が一般的です。

・スムーズスクロールのオフセット

目次内の項目をクリックした際の移動先を下にずらす設定です。
ヘッダーバーなどを固定していると見出しなどが隠れてしまうため、それを防ぐ機能になります。

固定ヘッダーの高さ(ピクセル値)を入力すればOK。ヘッダーを固定していないなら入力しなくて大丈夫です。

・モバイルのスムーズスクロールのオフセット

前項のモバイル版です。
ヘッダーを固定している場合は、モバイル版の固定ヘッダーの高さを入力しましょう。

・パス制限

目次を表示しないページをパス(URL)で指定できます。
ページは相対パスで設定する必要があるため、「https://example.com/test/」なら「/test/」といった感じで、ドメインより後ろを入力します。

・ウィジェットの固定セレクタ

サイドバーに目次を固定表示する場合に使用。
ウェジェットのIDを調べて入力します。

しかし、現状は設定しなくても大丈夫(?)です。

目次をサイドバーに設置する

初期設定を終えればコンテンツ内の目次は自動で設置されますが、サイドバーに設置する場合はもうひと手間必要です。

まずはウィジェットのページへ移動します。

「目次」というウィジェットが追加されているので、これを「追従サイドバー」(テーマによって表記が異なります)にドラッグ＆ドロップ。

「タイトル」と「閲覧中セクションのハイライト色」を設定したら、保存をクリックしましょう。(一般設定で入力した目次タイトルは適用されません)

実際の目次は以下のようになります。

トップページでも表示されてしまう場合は？

投稿ページやカテゴリーページでも目次が表示されるのは、サイドバーのウィジェットが全ページに適用されているからです。

その場合は、「Widget Logic」というプラグインを使って、ウィジェットごとに表示するページを制限しましょう。

まとめ

以上、目次プラグイン「Easy Table of Contents」の解説でした。

テーマに目次機能があるならそれを使用するのが一番ですが、どうにもデザインが気に入らない、サイドバーに便利な目次を設置したいという方はぜひ導入してみてください。

この他にも、ブログ運営において必須の機能に絞ったおすすめプラグインを紹介しているので、よければそちらもご覧ください。