この記事では、”記事“と”サイドバー“に目次を自動挿入できるプラグインの解説します。
少し前まで、目次プラグインの代表格といえば「Table of Contents Plus 」でした。
ただ、3年以上更新されておらず、セキュリティ上あまりよろしくないと。
そこで、登場したのが「Easy Table of Contents 」です。
中身はかなりアップデートされており、初心者の方でも使いやすくなっているので、乗り換えを推奨します。
特に高度な設定では、他の記事では書いていない視点や使い方も解説しているので、中級者以上の方もバッチリ使いこなしましょう。
目次・読みたい所へタップできます
Easy Table of Contentsをインストール
- プラグインの中にある「新規追加」をクリック
- 「Easy Table of Contents」で検索
- 「今すぐインストール」をクリック
- 「有効化」をクリック
Easy Table of Contentsの一般設定

「設定」
↓
「目次」をクリック
一般設定では、主に「目次」の機能面を設定します。
目次を表示させる場所を決めよう
特にこだわりがなければ”投稿”と”固定ページ”にチェックします。
ここで”チェック”を入れたページのみ、目次を使えます。
自動挿入をONにする場所を決める
自動挿入は、”投稿”のみでOK。
1つ前の設定で固定ページも有効化しているので、必要に応じて”手動”で入れれば良い。
記事中で目次をどこに表示させるか決める
特にこだわりがなければ「最初の見出しの前(デフォルト)」でOK。
一応それぞれの位置はこんな感じです。

最初の見出しの前

最初の見出しの後

上部

下部
目次を表示させる条件の設定
指定した数以上の”見出し”がある場合、目次が自動挿入されます。
そもそも見出しが少ない記事なら、目次は必要ないので、4〜5件くらいがオススメ。
目次の見出しラベルの設定
あった方がわかりやすく、見栄えもいいので”チェック”しましょう。
見出しラベルとは、以下の赤枠部分です。
目次の折りたたみボタンを設置
チェックを入れると以下の「折りたたみボタン」が表示されます。ここはお好みで〜。
目次の表示状態を設定
先ほど、折りたたみ表示にチェックした場合のみ、ここにチェックを入れるとページを開いた時、折りたたんだ状態で”目次”が表示されます。
目次を表示させるためのプラグインなので、チェック不要。

目次を折りたたんだ状態

目次を開いた状態
ちなみに、検索上位に表示されると”目次”の見出しも引っ張られますが、閉じた状態だと載りません。

閉じた状態で表示するなら設置しなくていいと思うよ。
目次に段落を付けるか選択
チェックを入れると、見出しタグの値が小さくなるにつれ「h2→h3→h4」、段落で表示されます。

段落ありの目次

段落なしの目次
ここは好みですが、h3タグ以下も使っている人は、段落はあった方が見やすいですね。
目次のカウンター設定
見出しの前に”英数字”を入れるか選択できます。

小数点表示(連番アリ)

数字(連番ナシ)

ローマ字

なし
ここも好みです。ただ、<h3>まで表示させるなら、”小数点表示”が一番キレイかと思います。
目次のスクロール設定
目次をクリックした場合に、スクロールの滑らかさを指定できます。

スムーススクロールあり

スムーススクロールなし
後ほど、高度な設定項目で解説しますが、とりあえず「チェック」しておきましょう。
Easy Table of Contentsのデザインの設定
この項目で”目次”の外観を作成していきます。
幅の設定
基本的に100%を推奨します。
「px」や「ユーザー指定」で、幅をカスタムできますが、レスポンシブ(異なる画面サイズに合わせる)を考慮すると100%にしておくと楽です。
回り込み設定
なし(デフォルト)のままでOK
例えば、上記で幅を50%にした場合、以下のように表示されます。

目次が左側に表示され、右側に導入文のコンテンツが回り込む
目次が右側に表示され、左側に導入文のコンテンツが回り込む

タイトル文字サイズの設定
タイトルとは以下の部分

文字サイズはお好きなサイズでOK。
CSSをイジれる人はスマホだけ少し小さくするのがポイント
当サイトは”PC20px”・”スマホ18px”です。

文字の太さは以下の通り。
- ”Medium”より上は細字
- ”Semi Bold”より下が太字


各見出しの文字サイズを設定
目次カラーを設定
目次はサイトカラーに合わせたいので、”カスタム”を選択しましょう。
それぞれ以下の項目を指します。
Easy Table of Contentsの高度な設定
重要な項目は2〜3個だけなので、初心者の方は流し読みでOK。
アンカーに小文字を使用
目次内の見出しには、以下のように”id”が自動で割り振られます。
この”id”を必ず小文字にしたい場合はチェックします。
当サイトは、数字が混じっても構わないのでチェックしていません。
ハイフネーションの設定
見出しに英単語が入る場合、適用される項目です。
分かりにくいですが、単語の連結に「_」が使用されています。
チェックを入れると、「–」に変更できます。
一応意味としては
- 「–」=区切り
- 「_」=連結
になります。
基本は”連結”のが多いと思うので、チェック不要。
ホームページで目次設定
固定ページでオリジナルのトップページを作成する場合、チェックすると”目次”を表示できます。
よく分からない方は、チェック不要。
目次プラグインのCSS読み込み設定
お使いのテーマで「Easy Table of Contentsプラグイン用」のCSSが適用されている場合のみ、チェックします。
そうでない場合は、チェック不要です。
目次の見出しタグ設定
チェックをした見出しタグが目次に自動挿入されます。
基本は<h2>または<h3>までチェックしておけばOK。
※記事毎にも設定できます。
目次から除外したい見出しを設定
特定の見出しを”キーワード”で除外できます。

ここで指定すると、サイト全体に反映されるので、空欄のままでOK。
投稿画面でも設定できるから、使う場合はそちらで。(後ほど解説)
目次のスムーズスクロールを設定
当サイトのように”ヘッダーを固定追従”させている場合のみ、指定します。
ヘッダーを固定させると、その縦幅の分”目次”のスクロール位置がズレます。固定ヘッダーにしている方は各自調整してみてください。


”PC”と”スマホ”でヘッダーの縦幅が違うので、微調整する必要があります。

当サイトの場合、調整してもページを読み込んだ直後の見出し移動だけズレます。二つめからは上手くいくのですが、理由は謎ですね。
目次のパス制限
パス(記事のURLの一部)を指定することで、特定の記事だけに目次を表示させることができます。
ただ、私はこの項目の使い道を見出せませんでした。いい方法があれば教えてください。
目次アンカーの接頭辞設定
通常アンカー用のidは、英数字しか指定できません。しかし、我々は日本語で見出しを作るので、見出し内に英数字がない場合、ここで指定した文字が適用されます。
デフォルトで「i」が指定されているので、上記のようになります。
2つめの見出しから「i-2、i-3」と数字が振られていきます。
空欄にすると数字のみ「-2」が適用されます。
数字のみは非常にわかりづらいので、何かしら文字列を入れたほうがいいですね。
当サイトは「kagesai」とサイト名を入れています。特にこだわりがなければ、「i」のままでOK。

変更すると最後の#kagesai
の部分が変わってしまう為、せっかくもらった被リンクなのに、発信者の意図したリンク先に飛べなくなるんだ。
なので、一度決めたら変えないこと。
ウィジェット用・固定目次の設定
使い勝手がめちゃくちゃ悪いので基本使いません。最近のテーマは、サイドバーを固定させるウィジェットが用意されている(場合が多い)ので、そちらに目次ウィジェットをぶっこめば済みます。
Easy Table of Contentsのウィジェットの設定
テーマに固定ウィジェットが用意されている方用の解説です。

- 「外観」
- ↓
- 「ウィジェット」をクリック
タイトルと閲覧中カラーを設定
目次ウィジェットを固定サイドバーの中に移動。
↓
タイトルを入力

タイトルとは赤枠部分です。
画像右側(黒い背景)のように今見ている見出しの背景カラーを指定できます。
フォントカラーが潰れない程度のカラーにしましょう。
※当サイトテーマ「SANGO」は、もともとグレーの背景色が指定されていたので、ここも指定すると色被りが起きる為「#fff」=真っ白を指定しています。

Easy Table of Contentsの投稿画面を設定
最後になりますが、この目次プラグイン最大の強みは、投稿ごとに細かな設定ができることです。
投稿の編集の右側にある表示オプションの中に「Table of Contents」が追加されているので、チェックが入っているか確認しましょう。
確認したら、一番下までスクロールしてください。
各投稿の目次設定
①目次の自動挿入を無効
チェックすると、その投稿だけ”目次”を非表示にできます。
かなり使えるので、必ず覚えておきましょう。
②見出しの選択
例えば、普段は<h3>まで表示させているけど、見出しが多くなりすぎたなぁなんて記事は<h2>”にチェックすれば、その投稿では”h2見出し”だけ目次に表示されます。

まさに、この記事は<h2>だけにしてるよ。
あえて長く見せる目次・短くした方がいい目次、この辺りは感覚と検証が必須になるけど、重要だから覚えておこう。
③見出しの差し替え
超上級者向けの設定です。”目次内に表示する見出し”と”実際の見出し”を変更できます。
うまく使うことで、狙いたいキーワードを確保しつつ、”目次”のクリック率を上げるエモいキャッチコピーを書くこともできます。
あと検索結果に出てくる見出しリンクは”目次”から引っ張ってきているので、ここでもクリックしたくなるようなキャッチコピーをアピールできますね。
実際はこんな感じで使います。
例だと、「完全ワイヤレスイヤホン」キーワードで攻めつつ、SNSから流れてくるガジェット音痴層(完全ワイヤレスイヤホンという言葉を知らない層)にもアピールできますね。
AVのくだりは、男性ならわかってくれるかな?笑
見出し同士の間に「|」を挟むのを忘れないように。

普段の記事では必要ないですが、渾身の記事や稼いでる記事だとかなり使えるテクニックですよ。
記事中で除外したい見出しを指定
こちらも上級者用の設定。
3パターンある特定の見出しだけ除外する方法。いずれも赤枠の見出しが非表示なっているのをご確認ください。
「除外したい見出し」を貼り付けると、その見出しだけを非表示にできます。


キーワードの後ろに「*」を付けることで、指定した文字から「始まる見出し」を除外する。


キーワードを「*」で囲むと、指定した文字を「含む見出し」を除外する


投稿に合わせて見出し単位で除外できるのは、意外と便利。前の目次プラグインにはなかった機能です。
ただし除外により、見出しの全体数が表示条件で指定した数より、少なくなると目次は非表示になります。
Easy Table of Contentsの設定【まとめ】
以上、目次プラグインの完全マニュアルでした。
上級者用の活用方法は、あまり知られていないと思うので、あなたのインスピレーションになれば幸いです。
初心者さんは難しい項目もあったと思いますが、コレってどうだったかな?と気になったら、当サイトへお越しください。



※日本語が含まれていないコメントは投稿できません。(スパム対策)