WordPressの記事内に目次を自動挿入するプラグイン「Easy Table of Contents」を使ってみた

プラグイン情報

プラグイン名	Easy Table of Contents
動作環境	ワードプレスバージョン：5.3以降 PHPバージョン：5.6.20以降
詳細・ダウンロード	https://ja.wordpress.org/plugins/easy-table-of-contents/

1. Easy Table of Contentsで出来ること（ざっくり）

• 投稿や固定ページなどのコンテンツに見出しタグを設置することで、目次を自動的作成してくれる。
• 目次から各見出しへアンカーリンクを設置してくれる。
• sticky（cssプロパティ）で目次をブラウザの左上に固定表示できる。
• 投稿毎に目次に表示させる見出しレベルを設定することができる。

2. Easy Table of Contentsの設定と表示

2-1. 設定画面

私の設定はこんな感じ。

2-2. 表示デザイン

カスタマイズ無しのデザインはこちら。

う〜ん……行間が詰まって見辛い印象なので、近いうちにカスタマイズすることにしましょう。

3. Easy Table of Contentsの設定項目と出来ること

各設定項目のまとめ。すべての項目の設定を行う必要はないので、用途に応じて必要な部分だけ設定を。
「一般」の設定で出来ること

① サポートを有効化; ／② 自動挿入	① サポートを有効化：チェックを入れた投稿タイプに個別の設定画面が表示される。 ※「②自動挿入」でチェックした投稿タイプのみ有効 ★この機能があるから「Easy Table of Contents」を選んだので、チェック。 こんな画面が表示されるよ！ ② 自動挿入：目次を自動挿入させる投稿タイプを選択できる。 ★「投稿」のみチェック。
③ 位置	目次の表示位置を選択できる。 →「最初の見出しの前（デフォルト ）」「最初の見出しの後」「After first paragraph」（最初の段落の後）「上部」「下部」の中から選択。 ★「最初の見出しの前（デフォルト ）」を選択。
④ 表示条件	見出し何件以上で目次を表示させるかを設定できる。 ★見出しが2個以下なら目次を出す必用なくない！？と思っているので、3個以上に設定。
⑤ 見出しラベルを表示／⑥ 見出しラベル	⑤ 見出しラベルを表示：見出しラベルを表示するか否かを選択できる。 ★一目でこの子が何ものか分かるようにしておきたいのでON。 ⑥ 見出しラベル：⑤の見出しラベルのテキストを自由に設定できる。 ★分かりやすく「目次」に。
⑦ 折りたたみ表示／⑧ 初期状態	⑦ 折りたたみ表示：目次をアコーディオン開閉させることができる。 ★OFF。 ⑧ 初期状態：⑦のアコーディンオンのデフォルトを閉じた状態にすることができる。 ※「⑦折りたたみ表示」をチェックした場合のみ有効 ★OFF。 →目次設置の目的は「ぱっと見で記事の内容が分かるように」なので、わざわざ隠す必要はあるまい……という持論。アコーディオンで目次を閉じなければならないほどの高さにならないように記事の構成を考える。
⑨ ツリー表示	見出しの階層が分かるようにインデントしてくれる。 ★インデントした方が見やすい印象なのでON。
⑩ カウンター	目次のliタグの装飾（list-style-type）を選択できる。 →「disc」（黒丸）、「circle」（白丸）、「square」（黒四角）のなどの装飾や数字（15言語分？）の中から選択。 ★実際の見出しの方に数字を振りたいのでOFF。
⑪ スクロールを滑らかにする／⑫ TOC Loading Method	⑪ スクロールを滑らかにする：目次タイトルからタイトルまでのページ内スクロールをスムーススクロールにできる。（ポンっと移動するかシュルシュルーっと移動するか） ★断然シュルシュル派なのでON。 ⑫ TOC Loading Method：う〜ん( ˘•ω•˘ ) これだけは検証してもなんのための機能かわからなかった。（ご存じの方がいらっしゃったら教えてください♪） 直訳すれば「TOC 読み込み方法」なんだけど……。目次の表示やスムーススクロールにかかわるものでもなさそう。 →「JavaScript（default）」or「Pure CSS」のどちらかを選択。 「Pure CSS」を選択すると目次を構成するソースに変化があるのだけど、これがいったい何に影響するのか…謎。
⑬ Sticky Toggle Options（⑭ 幅／⑮ Height／⑯ Open Button Text）	⑬ Sticky Toggle Options：目次をsticky（cssプロパティ）でブラウザの左上（変更不可）に固定表示できる。 ★OFF。（ONにした場合は、⑭〜⑯を設定） →目次設置の目的は「ぱっと見で記事の内容が分かるように」なので、わざわざ隠す必要はあるまい……という持論。アコーディオンで目次を閉じなければならないほどの高さにならないように記事の構成を考える。 ⑭ 幅：タブを開いた時の目次の幅を指定できる。 →「Auto」or「ユーザー定義」のどちらかを選択。（ユーザー定義を選択した場合は、「カスタム幅」に任意の数値を入力。） ※ユーザー定義でpx指定していても、スマホ閲覧時は「幅：100％」にしてくれるよ。 ⑮ Height：タブを開いた時の目次の高さを指定できる。 →「Auto」or「ユーザー定義」のどちらかを選択。 ※「Auto」推奨。 →目次の高さが一定でない以上「ユーザー定義」で高さを固定するのはお勧めできない。（目次を見るのに、step1：タブを開く、step2：スクロールする、の２ステップをユーザーに強いるのは忍びない……という持論。） ⑯ Open Button Text：タブに表示するテキストを自由に設定できる。

「外観」の設定で出来ること

⑰ 幅／⑱ Alignment	⑰ 幅：目次の幅を指定することができる。 →「固定（200〜400px）」「相対（Auto〜100％）」「ユーザー定義」の中から選択。（ユーザー定義を選択した場合は、「カスタム幅」に任意の数値を入力。） ※WordPressのテーマがソリッドレイアウト※1なら「固定」or「ユーザー定義」、リキッドレイアウト※2なら「相対」を選択。 ⑱ Alignment：目次ボックスを「左」「中央」「右」の何れに寄せるか選択できる。 ※目次の幅が100%未満（コンテンツ幅よりも小さい）場合のみ有効。
Font Option（⑲ タイトル文字サイズ／⑳ タイトル文字の太さ／㉑ 文字サイズ／㉒ child Font Size）	⑲ タイトル文字サイズ：「⑤見出しラベル」で設定したテキストのフォントサイズを指定できる。 ⑳ タイトル文字の太さ：「⑤見出しラベル」で設定したテキストの太さを指定できる。 ㉑ 文字サイズ：目次の中の見出しのフォントサイズを指定できる。 ㉒ child Font Size：小見出しのサイズを指定できる。
Theme Options（㉓ テーマ）	あらかじめ用意されているテーマ（目次デザイン）の中から好きなものを選択できる。 →「グレイ」「ライトブルー」「白」「黒」「透過」「カスタム」の中から選択。（「カスタム」を選択した場合は、㉔〜㉚を設定）
カスタムテーマ（㉔ 背景色／㉕ 枠線色／㉖ タイトル色／㉗ リンク色／㉘ ホバー時のリンク色／㉙ 訪問済みリンク色／㉚ Heading Text Direction）	※「㉓テーマ」で「カスタム」を選択した場合のみ有効の設定項目。 ㉔ 背景色：目次の背景色をカラーピッカーで指定できる。 ㉕ 枠線色：目次の枠線色をカラーピッカーで指定できる。 ㉖ タイトル色：目次の「⑤見出しラベル」の色をカラーピッカーで指定できる。 ㉗ リンク色：「目次の中の見出し」の色をカラーピッカーで指定できる。 ㉘ ホバー時のリンク色：「目次の中の見出し」の上にカーソルを持っていった際の色をカラーピッカーで指定できる。 ㉙ 訪問済みリンク色：「目次の中の見出し」をクリックした後の色をカラーピッカーで指定できる。 ㉚ Heading Text Direction：「目次」のテキストの方向を選択できる。 →「Left to Right (LTR)」（左から右へ）or「Right to Left (RTL)」（右から左へ）の何れかを選択可能。 ※日本語の横書きは「左から右」の文化なので、「Left to Right (LTR)」でOK。

※1 ソリッドレイアウト（固定幅レイアウト）とは、コンテンツの幅が固定のレイアウト。
※2 リキッドレイアウトとは、ブラウザの表示幅に合わせてコンテンツの幅やフォントサイズが可変になるレイアウト。

「高度」の設定で出来ること

㉛ 小文字	目次内の見出しに振られるアンカーリンクURLを小文字のみにするかどうか選択できる。 ★ON。 →HTML・cssは小文字で記述する派なので、なんとな〜く雰囲気で♪
㉜ ハイフネーション	目次内の見出しに振られるアンカーリンクURLが英語の場合「_（アンダースコア）」でなく「-（ハイフン）」を使用するかどうかを選択できる。 ★OFF。 →因みに「_（アンダースコア）」は「連結」、「-（ハイフン）」は「区切り」という意味。Google上級スタッフのジョン・ミューラー氏によれば、SEO的には「_」「-」どちらでも良いらしい♪
㉝ ホームページ	固定ページでオリジナルのトップページを作成する場合に目次を挿入できる。 ※WordPressの表示設定「ホームページの表示」で固定ページを選択した時のみ有効。 ★メモ：TCDテーマ「ZERO」ではトップページに目次が表示されなかったので検証が必要
㉞ CSS	プラグインのCSSの読み込みを無効にできる。 ★ON 　→　OFF →確認したところ、デフォルトでは、外部CSS（screen.min.css）もInline CSSも読み込まれている状態だったよ(╬⊙д⊙)マジかっ！これは宜しくない！！ SEO的にも無駄な記述は削るに限る！とうことで、同じCSSを二重に読み込まないために「㉞CSS」と「㉟Inline CSS」はチェックを入れておこう♪（これで外部cssをは消え、Inline CSSだけが採用される。 ※プラグインのCSSの読み込みを無効にしても、カスタムテーマ（㉖ タイトル色／㉗ リンク色／㉘ ホバー時のリンク色／㉙ 訪問済みリンク色／㉚ Heading Text Direction）の設定は有効。 　↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ と思っていたら、新たな課題発見！！ この外部cssの読み込みを無効にすると、スムーススクロールが機能しなくなってしまう……。┐(´д｀)┌ しかたないので、㉞ CSS：OFF、㉟ Inline CSS：OFFとしておく。
㉟ Inline CSS	プラグインのCSSをインライン化することができる。 ★ON 　→　OFF ※バグ！？→ONにしてもOFFにしても、inline cssは挿入された状態だった……。（改修されることを期待してOFF）
㊱ 見出し	目次に表示させる見出しレベルを設定できる。 ★SEO対策としてh1は、ページタイトルに当てているので、h2から指定。h3以降は記事の内容によって個別に設定したいので、h2のみを指定。
㊲ 除外する見出し	指定した文字から「始まる見出し」を除外することができる。 ※複数指定の場合：「|（バーティカルバー）」の前後に半角スペースが入っていても機能する（ | ）が、｜（たてぼう）だと機能しない。
㊳ スムーズスクロールのオフセット／㊴ モバイルのスムーズスクロールのオフセット	㊳ スムーズスクロールのオフセット：PCレイアウトで固定ヘッダーを採用する場合、ヘッダーの高さを考慮したアンカーリンクを設置することができる。 →WordPressのテーマには、テーマオプションとして「ヘッダーを固定表示させる機能」があり、このオプションをONにしていると、目次の見出しをクリックした場合に、ヘッダー分の高さがマイナスされてしまうので、ページ内遷移した際に固定ヘッダーと見出しが被ってしまう……。ｻﾞﾝﾈﾝ(๑•́ ₃ •̀๑) そうならない為に、固定ヘッダーを使用する場合には、PCの固定ヘッダーの高さを指定しておく♪ ㊴ モバイルのスムーズスクロールのオフセット：モバイルレイアウトで固定ヘッダーを採用する場合、ヘッダーの高さを考慮したアンカーリンクを設置することができる。 →固定ヘッダーを使用する場合には、モバイルの固定ヘッダーの高さを指定しておく♪
㊵ パス制限	記事のURL（ルートパス）を指定することで、特定の記事だけ目次を非表示にすることができる。 ★この機能必要かしら？？ 「①サポートを有効化」で各投稿タイプでの個別設定が可能になるので、これで良い気がする。 ※念のためディレクトリ（カテゴリなどの）単位での指定が可能か確認したけどNGだったので、尚更この機能を使うメリットがないような気がする……。
㊶ デフォルトのアンカー接頭辞	目次内の見出しに振られるアンカーリンクURLの接頭辞（英単語の頭の部分）を設定できる。 →ページ内アンカーのid属性は、ページ内でユニーク（同じ名前は使用不可）な名前をアルファベットで付ける必要がある。 記事を日本語で書いていれば、日本語の文字列がアンカーリンクURLに入ってしまうため、これを回避するため目次の頭に「あらかじめ決めておいたアルファベット」を挿入することが出来る。 ★デフォルト で「i」が指定されているけど、何だか味気ないので、分かりやすく｢mokuji｣と設定。
㊷ ウィジェットの固定セレクタ	サイドナビゲーションに目次を固定表示できる。 【設定方法】 step1：外観 > ウィジェット > 目次を表示させたいところに「目次」ウィジェットをドラックアンドドロッップ。 step2：使用しているテーマのサイドナビゲーションパーツのid（またはclass）を確認。 ★今回使用しているTCDテーマのサイドナビゲーションパーツのid「#side_col」を入力。 step3：確認したidをコピペする。 step4：外観 > ウィジェット > 「目次」ウィジェットに『ウィジェットを上部固定する』が表示されるようになっているので、チェックを入れる。 ※目次ウィジェットの注意書きにウィジェットを固定する場合、サイドバーに他のウィジェットを追加しないでください。1つのページ内で利用できる目次ウィジェットは1つのみです。とあるけど、他のウィジェットを入れても問題なく稼働したよ♪ 因みに、目次ウィジェットを２つ入れた場合でも稼働する。
㊸ Remove ‘:’ from TOC Title	見出しの中に「:」（半角）が含まれる場合：目次の見出しでは「:」（半角）を削除することが出来る。

「Shortcode」で設定可能な項目

㊹ Manual Adding the shortcode	ショートコードを貼り付けることで、任意の箇所に目次を表示させることが出来る。 →「②自動挿入」にチェックを入れると目次が自動挿入されるので基本的は必要ない。 設定画面では目次の挿入箇所は１箇所しか選択できないので、ページ上部＋ページ下部など２箇所以上に目次を挿入したい場合は、ショートコードを活用するといいのかも。

4. Easy Table of ContentsとWordPressテーマの相性の話

テーマによってはデザインが崩れる可能性があるという記事を目にしたので、記憶に留めておこう。
このブログで使用してる有料テーマTCDの「ZERO」との相性は問題ないようだ。

5. 「Table of Contents Plus」と「Easy Table of Contents」どっちが良き？

どちらも記事内に目次を自動挿入してくれるプラグインで出来ることに大きな差違はない。
私の場合は、プラグインが定期的に更新されていることと、投稿毎に設定を変えることができることの２点で「Easy Table of Contents」をチョイス♪

5-1. 投稿毎に設定を変えれるのは便利♪

私の場合は、プラグインの基本の設定で、目次に表示する見出しタグをh2のみに設定。
記事によっては、目次の見出しにh3やh4を入れたい場合や目次が必要ない場合があるので、投稿毎に目次を非表示に出来るのも良き♪