目次プラグインのインストール・設定・機能比較
& CSSデザインを見やすくカスタマイズ

WordPressに目次を設置したいと思い下記のプラグインをインストール比較してみました。

・「Table of Contents Plus」プラグイン
・「Easy Table of Contents」プラグイン

この2種類がよく紹介されていて有名ですが、
「Easy Table of Contents」プラグインは「Table of Contents Plus」プラグインの機能をベースにして作られているみたいで、設定内容も似ていて大きな差は無いように思いました。特徴としては、ページ単位のカスタマイズ設定が可能なことです。見出しのレベルにより、表示・非表示の選択ができます。

しかし、「Easy Table of Contents」は、ショートコードがないので、挿入する場所を設定で決めてしまうと簡単に変更できないところがあります。「記事単位の目次設定」の「除外する見出し」などで設定すればある程度は自由に挿入できそうですがその都度設定するのは面倒だと感じたので、今回は使い慣れている「Table of Contents Plus」プラグインを紹介して行きたいと思います。

「Table of Contents Plus」の使い方(目次の設置方法)

使い方(目次の設置方法)は簡単で、記事の編集画面で目次を設置したいところにと書くだけです。

「Table of Contents Plus」と
「Easy Table of Contents」の簡単な比較

簡単な機能の比較
機能 Table of Contents
Plus
Easy Table of
Contents
見出しで目次を作成
サイトマップ作成
ショートコード
目次のウイジェット
記事単位での設定変更
見出しの個別除外
目次の番号の種類 1種類 3種類

Table of Contents Plus のインストール

ワードプレスにログインして、左メニューの「プラグイン」→「新規追加」と進むと「プラグインを追加」ページに移動します。

画面が変わったら、右上の「キーワード欄」に「Table of Contents Plus」と入力すると下の画像のように表示されるので、「インストール」して「有効化」してください。

一般設定

「有効化」できたら次は設定です。左メニューの「設定」→「TOC + 」と進むと設定画面になります。

下図が設定画面です。青い枠の部分がデフォルトのままです。
赤い枠の部分を変更しています。詳しくは図の下から説明していきます。

一般設定の説明

【1】基本設定タブ
デフォルトでこのタブのページになっていると思いますが、このページで設定していきます。
【2】位置
目次を表示させる位置をプルダウンメニューから選択できます。
ちなみに当サイトでは、コード「」で表示位置を指定していますので、デフォルトのままです。
【3】表示条件
見出しの数によって目次の表示・非表示を選択できます。デフォルトでは「4」になっていますが、「2、3」にしているサイトが多いようです。当サイトでは「2」にしています。
【4】以下のコンテンツタイプを自動挿入
「post」は投稿記事、「page」は固定ページということです。ブログとして活用する場合は「post」にチェックでいいかと思います。当サイトのように全て固定ページで作成(ホームページとして活用)する場合は「page」にチェックでいいと思います。両方にチェックしてもOKですし、全てチェックを外してもコード「」を挿入すれば表示されるようです。
【5】見出しテキスト
あったほうが見やすいので、デフォルトのままでも問題ないと思いますが、日本語の方が読みやすいのでは・・・と思いまして「Contents」を「目次です」に変更。「show」を「表示」「hide」を「非表示」に変更しました。
【6】階層表示
あったほうが見やすいので、デフォルトのままにしています。
【7】番号振り
大見出しに番号はあったほうが見やすいと思いますが、中見出し以下は少し見づらくなると思いまして、ここではチェックを外しています。
 ※しかし、大見出しのみに番号をつけるという設定はここではできません。  「CSS」カスタマイズは以下の「上級者向け設定」で説明しています。
【8】スムーズスクロール効果を有効化
目次をクリックしたとき、各見出しに一気にジャンプするか、スクロールするかの違いです。お好みでどうぞ!
【9】外観
「横幅」:文字通り目次の横幅の設定になります。「回り込み」:必要ないと思います。当サイトでは「CSS」でカスタマイズしていますのでデフォルトのままです。
【10】文字サイズ
デフォルトの「95%」でも問題ないと思いますが、「1em」に変更しました。
【11】プレゼンテーション
外観のデザイン(カラー)です。お好きなものにチェックを入れてください。カスタムを選択してもあまり大きくは変更できないので、当サイトでは「CSS」でカスタマイズしています。後で紹介しています。
【12】設定を更新
全の設定が終わったら「設定を更新」ボタンをクリックすれば、設定が変更保存されます。
【13】上級者向け
上級者向け(表示)をクリックで、上級者向けの設定画面になります。
「CSS」カスタマイズをしなくても、見出しレベル(h1、h2、h3、h4、h5、h6)によって表示・非表示を設定したい場合はこちらで設定可能です。

Table of Contents Plus の CSS カスタマイズ

CSS カスタマイズを行うには、以下の「上級者向け 設定」の『【1】CSS ファイルを除外』は必須ですので必ず行ってください。『【2】見出しレベル』は必要に応じて設定してください。『【3】設定を更新』は当たり前です。

上級者向け 設定

「CSS」でカスタマイズされたい場合はここの設定を少し変える必要があります。
上級者向け(表示)をクリックで、下図の設定画面になります。

【1】CSS ファイルを除外
「CSS」でカスタマイズされたい場合は、ここにチェックを入れてください。そうすることで、「Table of Contents Plus」自体にある「CSS」が適用されなくなり、一般設定で設定した外観、番号振り、プレゼンテーション(カラー)などが適用されなくなります。
【2】見出しレベル
見出しレベル(h1、h2、h3、h4、h5、h6)によって表示・非表示を設定します。チェックした見出しのみ表示されます。
【3】設定を更新
設定が終わったら「設定を更新」ボタンをクリックすれば、設定が保存されます。

カスタマイズ前のデザイン

初期設定(デフォルト)のままのデザインはこんな感じです。
【注意】※ここでは中央表示にしていますが、デフォルトでは、左側表示になります。

上記の「上級者向け 設定」で、「プラグインの CSS ファイルを除外」した状態が下図のような感じになります。(※現在適用しているテーマの「CSS」に依存するので、テーマにより違いはあります。)

テーマのCSSのみ適用された状態です。
※こちらもデフォルトでは左側表示になります。

Toc+ プラグインが出力しているコード

まず、Table of Contents Plus の 構造がどのようになっているのか調べてみました。
各ブラウザごとにデベロッパーツールが用意されていますが、今回は、FireFox の開発ツールを使って調べてみました。

  • 【1】FireFox で調べたいページにアクセス
  • 【2】何もないところで、右クリック「要素を調査」で下図のような画面になります
  • 【3】HTMLコードをマウスオーバーで、上の表示画面の色が変わります。
  • 【4】横向きの▲(三角形)をクリックして、下向きの▲(三角形)を表示してい行きます。
  • 【5】すると目次のHTMLコード「<div id=”toc_container” class=”no_bullets”>」が見つかりました。

図にするとこんなイメージでしょうか。

TOC+ のHTMLコード

下記が、目次のHTMLコードです。ここまで分かればあとは、「CSS」を書いて行くだけになりますね。

Toc+ のカスタマイズ完成 CSSコード

それで出来上がった目次のデザインがこんな感じです。↓ デフォルトのデザインに比べてかなり見やすくなっていると自分では思っています。

CSSコード

完成したコードはこんな感じです。もしよかったら使ってみてください。
その際は、あなたのサイトに合わせて枠線や背景色を変更してくださいね。😄
右側にコメントを書いているので初心者の方にも分かりやすいかと思います。
下記のCSSコードを子テーマの「style.css」にコピペすればOKです。

Webフォント『Font Awesome』について
当サイトのテーマ(lightning)では、予め Webフォント『Font Awesome』が使えるよう設定されていたため、目次のCSSを変更する際、CSSの疑似要素「:before」にユニコードを指定しただけで、Webアイコン フォントが表示されたのですが、通常ワードプレスやHTMLのサイトで、この『Font Awesome』を使うためには事前に設定が必要になります。

もし下記のコードで、Webアイコンが表示されない場合、疑似要素「:before」の部分のコードは除外してください。
24~32行の(/* タイトル前のアイコン FontAwesomeの設定 */)と、86~93行(/* 見出し(h3・h4)前のアイコン FontAwesomeの設定 */)のコードです。

以上で、ワードプレスの目次プラグイン「Table of Contents Plus」についての説明(インストール~CSSデザインカスタマイズ)は終了します。
ありがとうございました。

なお、Font Awesomeの設定方法・使い方は、またの機会に記載する予定です。

下記のサイトで使い方など解説されています。● 【Web Fonts with CSS編】
サルワカ:【保存版】Font Awesomeの使い方