Easy Table of Contentsの使い方・設定・カスタマイズを徹底解説

WordPressで記事が長くなると、読みづらくなったり、ユーザーが途中で離脱してしまうこともあります。そんなときに便利なのが「Easy Table of Contents」プラグインです。

このプラグインを使えば、記事内の見出しから自動で目次を生成し、読者にとって見やすく、検索エンジンにとっても構造化された情報が伝わりやすくなります。

本稿では、Easy Table of Contentsのインストールから設定、カスタマイズ方法、表示されない場合の対処法まで徹底解説します。

Easy Table of Contentsとは？

「Easy Table of Contents」は、WordPress記事内に自動で目次を生成してくれる無料プラグインです。

h2、h3などの見出しタグをもとに、HTMLやCSSの知識がなくても、シンプルかつ見栄えの良い目次を作ることができます。

Easy Table of Contents

メリット

• 目次の自動挿入が可能：投稿・固定ページ・カスタム投稿タイプに対応
• カスタマイズ性が高い：デザイン・階層表示・折りたたみなど
• 間接的なSEO効果：ユーザーの利便性を向上させ、滞在時間の増加や直帰率の低下が期待できる

競合が多い目次系プラグインの中でも、「Easy Table of Contents」はデザインがシンプルかつ多機能で、幅広いテーマに対応している点が支持されています。

デメリット

• デザインの自由度がやや限定的：選べるテーマが少なく、細かい見た目の調整にはCSSの知識が必要です。
• 特定のテーマやページビルダーとの相性問題がある：テーマや他のプラグインによっては、目次がうまく表示されないことがあります。
• 機能が豊富な分、設定画面がやや複雑：初心者には設定項目が多く、意味がわかりづらい箇所もあるため、使いこなすのに少し時間がかかります。

※「高度設定」や「互換性設定」といった詳細メニューは、初心者には不要な項目が多く、混乱することがあります。

Easy Table of Contentsの無料版とPro版の比較

Easy Table of Contentsは、無料でも十分使えますが、有料のPro版も提供されています。

Easy Table of ContentsのPro版では、無料版にはない便利な機能が多数追加されています。

たとえば、ページ作成プラグインのElementorやGutenbergブロックへの対応、固定（スティッキー）目次の表示、サブ見出しの折りたたみ、読了時間の表示などが可能になります。

また、AMPやACF（Advanced Custom Fields）プラグインとの連携、スクロールに応じた見出しのハイライト機能など、ユーザー体験を向上させる機能も充実しています。

Pro版の必要性と代替案

結論から言うと、多くのサイトでは無料版で十分です。基本的な目次機能（見出しの自動抽出やアンカーリンクの生成など）は無料版でも利用でき、シンプルな記事構成であれば問題ありません。

Pro版には、前述した高度な機能が搭載されていますが、これらの機能が必須でない場合は、無理に有料版にアップグレードする必要はないでしょう。

もし、Easy Table of Contentsに満足できない場合は、代替案としてTable of Contents Plusなどの目次プラグインも利用できます。

また、目次機能付きのTCDテーマや、TCDクラシックエディタに標準搭載されている目次機能（非TCDテーマ環境では利用できません）を利用する方法もあります。

これらのテーマでは、デザインと連動した見栄えのよい目次が生成されるため、別途プラグインを追加する手間が省けます。

▶ TCDテーマ一覧

Easy Table of Contentsのインストール方法

1. WordPress管理画面から「プラグイン」→「プラグインを追加」を選択
2. 検索バーに「Easy Table of Contents」と入力
3. 「今すぐインストール」→「有効化」

インストール後にそのまま投稿ページを開くと、以下のような目次の外観が表示されます。右上のボタンで目次を折りたためます。

Easy Table of Contentsの設定と使い方

「設定」→「目次」を選択すると、Easy Table of Contentsの設定画面が表示されます。

一般設定

このプラグインがどの投稿タイプに目次を表示するか、どの位置に挿入するか、どんな条件で表示するかなど、目次の基本動作を決める設定項目です。

対象コンテンツ・表示条件

• サポートを有効化： 目次を有効にする投稿タイプ（例：投稿、固定ページ）
• 自動挿入： 自動的に目次を挿入する投稿タイプを選択
• 表示条件： 指定数以上の見出しがある場合にのみ目次を表示
• TOC AMP Page Support： AMPページにも目次を表示

表示位置とラベル

• 位置： 目次を本文のどこに挿入するかを指定
• 見出しラベルを表示： 目次の上部に「目次」などのタイトルを表示
• 見出しラベル： タイトルの文言を自由に変更可能
• Header Label Tag： ラベル部分に使うHTMLタグ（例：h2, h3など）を指定
• Toggle on Header Text： ラベルをクリックして目次を開閉可能にする

折りたたみ・階層構造

• 折りたたみ表示： 目次を開閉できる形式にする
• 初期状態： 目次を初期状態で折りたたみにする
• Initial View on Device： 折りたたみの初期状態をモバイル・PC別に設定
• ツリー表示： 見出しを階層的に字下げ表示

番号表示（カウンター）

• カウンター： 見出しに番号を付ける（例：1.1, 2.2など）
• Counter Position： 番号の表示位置（Inside：見出し内、Outside：見出しの前）

読み込み・スクロール挙動

• TOC Loading Method： 目次の読み込み方法（JavaScript or CSS）
• スクロールを滑らかにする： 目次リンククリック時にスムーズスクロールを適用
• Exclude href from URL： スクロール時にURLに「#見出しID」を追加しない

外観設定（デザインのカスタマイズ）

目次の表示幅・色・文字サイズ・デザインテーマなどをカスタマイズする項目。記事のデザインやサイト全体の雰囲気に合わせて、視認性とデザイン性を両立させるための設定です。

• 幅： 目次ボックスの横幅を指定
• Alignment： 目次の配置位置を指定（左・右・中央）
• Heading Text Direction： 文字の方向を指定（左から右、右から左）
• Enable Wrapping： 長い見出しテキストを折り返して表示
• Headings Padding： 目次内の見出しと枠との余白を調整
• Font Option：タイトルの文字サイズと太さ、見出しの文字サイズと太さ、小見出しの文字サイズの設定
• Theme Options： 目次の配色を選択
• カスタムテーマ：目次の配色を手動でカスタマイズ

高度設定（上級者向けオプション）

目次の動作や表示範囲、見た目などを細かく調整できるオプションです。必要に応じて活用してください。

表示対象・表示制御

• ホームページ： トップページでも目次を表示
• Category / Tag / Product Category / Custom Taxonomy： アーカイブ説明文の上に目次を表示
• Device Target： モバイルまたはPCに限定して表示
• パス制限： 指定したURLパスのみで目次を表示（例：/wiki/）
• Exclude By Matching Url/String： 特定の文字列を含むURLでは目次を非表示

見出し・リンクのカスタマイズ

• 小文字： アンカーリンクをすべて小文字で生成
• ハイフネーション： アンカーリンクの区切りを「_」から「-」に変更
• 見出し： 表示する見出しレベル（h1〜h6）を選択
• 除外する見出し： 指定した語句を含む見出しを除外（複数指定可）
• デフォルトのアンカー接頭辞： IDの先頭に任意の文字列を追加（例：toc_index）
• Default Anchor Prefix For All： すべてのアンカーに接頭辞を適用
• Remove ‘:’ from TOC Title： 目次タイトルのコロンを削除
• Show Page title in TOC： ページタイトルを目次の一項目として追加
• Display no heading text： 見出しがない場合に代わりに表示するテキスト
• Shorten Heading： 長い見出しテキストを短縮表示
• Remove TOC links： 目次内のリンク機能を無効化（テキスト表示のみ）

表示スタイルと動作

• スムーズスクロールのオフセット： 見出し位置を調整（固定ヘッダーとの重なりを防ぐ）
• ウィジェットの固定セレクタ： 固定表示したいウィジェットのクラスまたはIDを指定
• Preserve Line Breaks： 見出し内の改行をそのまま反映

パフォーマンス・コード設定

• Load JS In： JavaScriptを読み込む場所を指定（ヘッダー／フッター）
• CSS： プラグインのCSSの読み込みを無効にする
• Inline CSS： CSSをインライン化し表示速度を改善

構造化データと外部出力

• SiteNavigation Schema： 目次を構造化データ（ナビゲーション）として出力
• Disable TOC in RestAPI： REST APIに目次情報を含めない

その他・特殊用途

• Add Request URI： 現在のページURLをアンカーリンクに含める
• Add Self Reference Link： フルURL形式でアンカーリンクを生成
• Generate TOC link ids： カスタムテンプレートやウィジェットで使う場合に必要
• Fix Out of Memory / 500 Error： ページビルダー利用時のエラー回避用
• Ajax Load More： Ajax無限スクロールでも目次を表示
• Shortcode Button in TinyMCE： クラシックエディタにショートコードボタンを追加

ショートコード

Easy Table of Contentsでは、投稿や固定ページに以下のショートコードを使って、任意の場所に目次を表示できます。

• [ez-toc]：目次を表示（最も基本のコード）
• [ez-toc-widget-sticky]：サイドバーなどに固定目次を表示
• [ez-toc-sitemap]：全ページとカテゴリのサイトマップを表示
• [ez-toc-sitemap-pages]：固定ページのみを一覧表示
• [ez-toc-sitemap-categories]：カテゴリ一覧を表示
• [ez-toc-sitemap-posts]：投稿記事一覧を表示

属性を使ったカスタマイズ

ショートコードに属性を追加すると、目次の表示方法を細かく調整できます。たとえば、以下のように記述します。

主な属性例：

• header_label：目次のタイトルを指定
• toggle_view：目次の開閉を有効／無効に
• heading_levels：目次に表示する見出しレベルを指定（例：2,3）
• exclude：特定の見出しを除外

詳細な属性一覧は、設定画面および以下のヘルプページ（英語）からご確認ください。

参考：How to use shortcode in Easy Table of contents｜Easy Table of Contents

Sticky TOC（目次の固定表示）

記事のサイドバーなどに、スクロールしても追従する目次（Sticky TOC）を設置できます。 ただし、使用しているテーマやプラグインの構造・CSS設定によっては、正常に動作しないことがあります。

表示されない場合は、対象の投稿タイプの設定、ショートコードの記述、除外URL、テーマやプラグインの構造を見直してみてください。

Sticky TOCを有効化するには、設定画面右側のチェックボックスをONにします。

表示対象の指定

• サポートを有効化： 固定目次を表示させたい投稿タイプ（投稿・固定ページなど）を選択
• ホームページ / Category / Tag / Product Category / Custom Taxonomy： 特定のアーカイブやトップページで表示するか選択
• Device Target： 表示対象デバイス（PC / モバイル / 両方）を選択

表示位置と外観

• Position（位置）： 左側または右側に表示
• Alignment（配置）： 上・中央・下から選択
• 幅 / 高さ： ボックスのサイズを指定（Auto設定も可）
• Open Button Text： 開閉ボタンに表示するテキストを指定（例：Index）

動作・開閉・非表示ページの設定

• TOC open on load： ページ読み込み時に目次を開いた状態にする
• Click TOC Close on Mobile / Desktop： クリックで目次を閉じる機能を有効化（デバイス別に設定可
• Exclude By Matching URL/String：特定の文字列やURLを含むページでは目次を表示しない

ウィジェットでの設定

Sticky TOCを有効化したら、ウィジェットで設定します。外観設定と同様に、文字サイズや色などの設定も可能です。

1. 外観 → ウィジェット
2. 「Sticky Sidebar Table of Contents」を任意のウィジェットへドラッグ＆ドロップ、またはクリックしてメニューから選択

Compatibility（互換性）

「Easy Table of Contents」のCompatibility（互換性）とは、特定の外部プラグインやページビルダーとの連携を有効にするための設定です。

• Create by Mediavine： 海外の広告収益化サービス「Mediavine（メディアバイン）」のレシピカード（カスタム投稿タイプ）で作成された見出しを目次に含める
• Goodlayers Core Builder： 海外製WordPressテーマ「Goodlayers」のページビルダーで作成されたコンテンツの見出しも目次に含める
• Molongui Authorship： 著者表示プラグイン「Molongui Authorship（モロンギ オーサーシップ）」との互換性に関する設定（説明は記載なし）

Import / Export Settings（インポート・エクスポート設定）

目次設定を他のサイトへ移行したり、バックアップとして保存するための機能です。

• Export Settings： 全ての設定をJSONファイルとしてエクスポート（保存）
• Import Settings： JSON形式の設定ファイルをアップロードして、設定をインポート（復元）
• Delete Data on Uninstall： プラグインを削除した際に、データベースから設定データなども削除するか指定
• Migrate Table of Contents Plus： 他社の目次プラグイン「Table of Contents Plus」から設定の移行

全ての設定が終わったら、画面下にある「変更を保存」を押して完了です。

ページごとの目次設定

プラグインの設定画面だけでなく、ページごとの目次設定もできます。特定の記事やページだけ目次を無効にしたり、表示方法を変えたい場合に使用します。

1. 投稿 → 投稿を追加（固定ページやカスタム投稿タイプでも同様の操作で追加します）
2. 投稿画面を下にスクロールして目次の項目から各種設定

表示されないときの原因と対処法

インストールしても目次が表示されない場合、以下の原因が考えられます。

それでも表示されない場合は、ショートコードを使ってみるのもおすすめです。

まとめ

「Easy Table of Contents」は、無料で使えるにもかかわらず、機能性・安定性・カスタマイズ性すべてをバランスよく備えた目次プラグインです。

見出しが多い記事や、長文コンテンツを作成している方は、ぜひ一度導入を検討してみてください。