ブログページ内の目次を自動作成してくれるWordPressプラグイン「Table of Contents Plus」をご紹介します。
右画像のようなページ内の目次を自動で作成してくれます。目次を挿入する位置も自動で判別してくれますので、手間いらずで、過去のブログにも適用されますので、とても良いですね。
目次
Table of Contents Plus プラグインのインストール
プラグインをダウンロードしてインストールする方法
- WordPressの「Table of Contents Plus」プラグインページからZIPファイルをダウンロードします。
- ダウンロードしたZIPファイルを解凍します。
- 「table-of-contents-plus」フォルダーをプラグインディレクトリ “/wp-content/plugins/” にアップロードします。
- WordPress管理メニュー「プラグイン」で「Table of Contents Plus」を有効化します。
プラグイン画面からインストールする方法
- WordPressの管理メニュー「プラグイン > 新規追加」から「Table of Contents Plus」で検索します。
- 「Table of Contents Plus」を今すぐインストールして有効化します。
Table of Contents Plus プラグインの設定方法
プラグインの日本語化
英語が苦手な方は、「Table of Contents Plus」の日本語化をしましょう。
- 「Table of Contents Plus」の日本語化ファイルのダウンロードをします。
- すると、「toc+-ja.mo」ファイルがダウンロードされます
- サーバーの「~/wp-content/plugins/table-of-contents-plus/languages/」ディレクトリにファイルをアップロードしましょう。
- WordPress管理メニューの「設定 > TOC+」を表示すると日本語化されています。

プラグインの一般設定方法

日本語化したので説明なしで良さそうですが、補足程度に説明しておきます。
上記画像は、このブログの設定値です。
- 表示位置
「最初の見出し要素の前」は、記事中に最初に出てきた「Hx」タグの直前に目次を表示。これがデフォルトだし自然な位置ではないでしょうか。 - 表示の振り分け
ページ中に「Hx」タグが何個以上あったときに目次を表示するかを設定。 - コンテンツの種類での自動挿入
post 投稿のページで目次を表示する。
page 固定ページのページで目次を表示する。 - 目次の見出し文
そのままの意味です。 - 階層を表示する
ここは必須でチェックを入れた方が良さそうです。 - リスト項目に番号を振る
番号を自動で振ってくれます。「1」「2」「2.1」「2.2」「3」・・・こんな感じです。 - スムーズスクロール効果の有効化
そのままの意味です。
プラグインの外観設定方法
- 横幅
「自動幅」か「相対100%」が良いようです。このブログは「自動幅」設定にしています。 - ラッピング
目次を左寄せ、右寄せにするかの設定。 - フォントサイズ
フォントサイズを「pt」「%」「em」で設定。 - 背景色
背景色を複数から選べます。カスタム設定も有り。
プラグインのカスタマイズ
リスト項目に番号振りたいのですが、上画像のようになります。リスト番号にもリンクが張られて、ぶら下げインデントもされない。
これでは少し不格好なので、CSSを追加してみました。
テーマのCSSを追加しますので、修正は自己責任でお願いいたします。
screen.css を修正する手順
- CSSを修正する前に「~/wp-content/plugins/table-of-contents-plus/screen.css」のコピーと取っておきましょう。
- 「~/wp-content/plugins/table-of-contents-plus/screen.css」の最後に下記コードを追加します。
- Table of Contents Plusプラグインの設定で、「リスト項目に番号を張る」のチェックを外します。
- このCSSは3階層までしか対応していませんので、Table of Contents Plusプラグインの設定で、「詳細設定 > 適用する見出しレベル」で3階層までチェックを入れてください。
screen.css のCSS追加コード
#toc_container ul.toc_list { margin-left:5px; counter-reset:section; } #toc_container ul.toc_list li { text-indent: -1.2em; margin-left:1.2em; padding-top: 0.3em; } #toc_container ul.toc_list li ul { counter-reset:subsection; } #toc_container ul.toc_list li ul li { text-indent: -1.8em; margin-left:1em; } #toc_container ul.toc_list li ul li ul { counter-reset:sub2section; } #toc_container ul.toc_list li ul li ul li { text-indent: -2.5em; margin-left:1em; } #toc_container ul.toc_list li:before{ counter-increment:section; content:counter(section) ". "; } #toc_container ul.toc_list li ul li:before { counter-increment:subsection; content:counter(section) "." counter(subsection) " "; } #toc_container ul.toc_list li ul li ul li:before { counter-increment:sub2section; content:counter(section) "." counter(subsection) "." counter(sub2section) " "; }
これで、リスト番号にもリンクが張られなくなり、ぶら下げインデントされています。
「WordPressプラグインでページ内の目次を自動で作る「Table of Contents Plus」」への2件のフィードバック