この記事では、”記事“と”サイドバー“に目次を自動挿入できるプラグインを解説します。
少し前まで、目次プラグインの代表格といえば｢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>まで表示させるなら、”小数点表示”が一番キレイかと思います。
目次のスクロール設定
目次をクリックした場合に、スクロールの滑らかさを指定できます。
スムーススクロールあり
スムーススクロールなし
後ほど、高度な設定項目で解説しますが、とりあえず｢チェック｣しておきましょう。
目次デザインを決めよう
この項目で”目次”の外観を作成していきます。
幅の設定
基本的に100%を推奨します。
｢px｣や｢ユーザー指定｣で、幅をカスタムできますが、レスポンシブ（異なる画面サイズに合わせる）を考慮すると100%にしておくと楽です。
回り込み設定
なし（デフォルト）のままでOK
例えば、上記で幅を50%にした場合、以下のように表示されます。
目次が左側に表示され、右側に導入文のコンテンツが回り込む
目次が右側に表示され、左側に導入文のコンテンツが回り込む
タイトル文字サイズの設定
タイトルとは以下の部分
カゲオ文字サイズはお好きなサイズでOK。
CSSをイジれる人はスマホだけ少し小さくするのがポイント
当サイトは”PC20px”・”スマホ18px”です。
文字の太さは以下の通り。
- ”Medium”より上は細字
- ”Semi Bold”より下が太字
各見出しの文字サイズを設定
本文の文字サイズに対して指定できます。少し小さめにするとオシャレ。
目次カラーを設定
目次はサイトカラーに合わせたいので、”カスタム”を選択しましょう。
それぞれ以下の項目を指します。
目次プラグインの高度な設定
重要な項目は2〜3個だけなので、初心者の方は流し読みでOK。
アンカーに小文字を使用
目次内の見出しには、以下のように”id”が自動で割り振られます。
この”id”を必ず小文字にしたい場合はチェックします。
当サイトは、数字が混じっても構わないのでチェックしていません。
ハイフネーションの設定
見出しに英単語が入る場合、適用される項目です。
分かりにくいですが、単語の連結に｢_｣が使用されています。
チェックを入れると、｢–｣に変更できます。
一応意味としては
- ｢–｣＝区切り
- ｢_｣＝連結
になります。
基本は”連結”のが多いと思うので、チェック不要。
ホームページで目次設定
固定ページでオリジナルのトップページを作成する場合、チェックすると”目次”を表示できます。
よく分からない方は、チェック不要。
目次プラグインのCSS読み込み設定
お使いのテーマで｢Easy Table of Contentsプラグイン用｣のCSSが適用されている場合のみ、チェックします。
そうでない場合は、チェック不要です。
目次の見出しタグ設定
チェックをした見出しタグが目次に自動挿入されます。
基本は<h2>または<h3>までチェックしておけばOK。
※記事毎にも設定できます。
【見出しタグの使い方】記事はh2〜h4だけで構成しよう目次から除外したい見出しを設定
特定の見出しを”キーワード”で除外できます。
カゲオここで指定すると、サイト全体に反映されるので、空欄のままでOK。
投稿画面でも設定できるから、使う場合はそちらで。（後ほど解説）
目次のスムーズスクロールを設定
当サイトのように”ヘッダーを固定追従”させている場合のみ、指定します。
ヘッダーを固定させると、その縦幅の分”目次”のスクロール位置がズレます。固定ヘッダーにしている方は各自調整してみてください。
”PC”と”スマホ”でヘッダーの縦幅が違うので、微調整する必要があります。
カゲオ当サイトの場合、調整してもページを読み込んだ直後の見出し移動だけズレます。二つめからは上手くいくのですが、理由は謎ですね。
目次のパス制限
パス（記事のURLの一部）を指定することで、特定の記事だけに目次を表示させることができます。
ただ、私はこの項目の使い道を見出せませんでした。いい方法があれば教えてください。
目次アンカーの接頭辞設定
通常アンカー用のidは、英数字しか指定できません。しかし、我々は日本語で見出しを作るので、見出し内に英数字がない場合、ここで指定した文字が適用されます。
デフォルトで｢i｣が指定されているので、上記のようになります。
2つめの見出しから｢i-2、i-3｣と数字が振られていきます。
空欄にすると数字のみ｢-2｣が適用されます。
数字のみは非常にわかりづらいので、何かしら文字列を入れたほうがいいですね。
当サイトは｢kagesai｣とサイト名を入れています。特にこだわりがなければ、｢i｣のままでOK。
HTMLがわかる方はこのidを元にリンクを貼ることがあります。
洗練された見出しタグの作り方!!コピペでは上手くいかない理由上記のように、内部リンクカードや普通に記事の被リンクはその記事に飛ばしますよね。
そうではなく、記事内の見出し1に飛ばしたい場合は、以下のような使い方をします。
リンクの中身https://kagesai.net/headingtag-design/#kagesai
これで指定した記事の最初の見出しに飛びます。
カゲオ変更すると最後の#kagesaiの部分が変わってしまう為、せっかくもらった被リンクなのに、発信者の意図したリンク先に飛べなくなるんだ。
なので、一度決めたら変えないこと。
ウィジェット用・固定目次の設定
使い勝手がめちゃくちゃ悪いので基本使いません。最近のテーマは、サイドバーを固定させるウィジェットが用意されている（場合が多い）ので、そちらに目次ウィジェットをぶっこめば済みます。
固定ウィジェットがない方は以下のサイトが参考になります。（プラグインを使う方法・CSSで指定する方法の2つが記載されています）
WordPressのサイドバーを固定しよう！スクロールに追従させる – Q2W3 Fixed Widget
目次ウィジェットの設定
テーマに固定ウィジェットが用意されている方用の解説です。
- ｢外観｣
- ↓
- ｢ウィジェット｣をクリック
タイトルと閲覧中カラーを設定
目次ウィジェットを固定サイドバーの中に移動。
↓
タイトルを入力
タイトルとは赤枠部分です。
画像右側（黒い背景）のように今見ている見出しの背景カラーを指定できます。
フォントカラーが潰れない程度のカラーにしましょう。
※当サイトテーマ「SANGO」は、もともとグレーの背景色が指定されていたので、ここも指定すると色被りが起きる為｢#fff｣＝真っ白を指定しています。
Easy Table of Contents・サイドバーに固定する目次用CSS目次プラグイン投稿画面の設定
最後になりますが、この目次プラグイン最大の強みは、投稿ごとに細かな設定ができることです。
投稿の編集の右側にある表示オプションの中に｢Table of Contents｣が追加されているので、チェックが入っているか確認しましょう。
確認したら、一番下までスクロールしてください。
各投稿の目次設定
①目次の自動挿入を無効
チェックすると、その投稿だけ”目次”を非表示にできます。
かなり使えるので、必ず覚えておきましょう。
②見出しの選択
例えば、普段は<h3>まで表示させているけど、見出しが多くなりすぎたなぁなんて記事は<h2>”にチェックすれば、その投稿では”h2見出し”だけ目次に表示されます。
カゲオまさに、この記事は<h2>だけにしてるよ。
あえて長く見せる目次・短くした方がいい目次、この辺りは感覚と検証が必須になるけど、重要だから覚えておこう。
③見出しの差し替え
超上級者向けの設定です。”目次内に表示する見出し”と”実際の見出し”を変更できます。
うまく使うことで、狙いたいキーワードを確保しつつ、”目次”のクリック率を上げるエモいキャッチコピーを書くこともできます。
あと検索結果に出てくる見出しリンクは”目次”から引っ張ってきているので、ここでもクリックしたくなるようなキャッチコピーをアピールできますね。
実際はこんな感じで使います。
左側に実際の見出し | 右側に目次内に載せたい見出しを書く例だと、｢完全ワイヤレスイヤホン｣キーワードで攻めつつ、SNSから流れてくるガジェット音痴層（完全ワイヤレスイヤホンという言葉を知らない層）にもアピールできますね。
AVのくだりは、男性ならわかってくれるかな？笑
見出し同士の間に「|」を挟むのを忘れないように。
カゲオ普段の記事では必要ないですが、渾身の記事や稼いでる記事だとかなり使えるテクニックですよ。
記事中で除外したい見出しを指定
こちらも上級者用の設定。
3パターンある特定の見出しだけ除外する方法。いずれも赤枠の見出しが非表示なっているのをご確認ください。
「除外したい見出し」を貼り付けると、その見出しだけを非表示にできます。
キーワードの後ろに｢*｣を付けることで、指定した文字から「始まる見出し」を除外する。
キーワードを｢*｣で囲むと、指定した文字を「含む見出し」を除外する
投稿に合わせて見出し単位で除外できるのは、意外と便利。前の目次プラグインにはなかった機能です。
ただし除外により、見出しの全体数が表示条件で指定した数より、少なくなると目次は非表示になります。
Easy Table of Contentsの設定【まとめ】
以上、目次プラグインの完全マニュアルでした。
上級者用の活用方法は、あまり知られていないと思うので、あなたのインスピレーションになれば幸いです。
初心者さんは難しい項目もあったと思いますが、コレってどうだったかな？と気になったら、当サイトへお越しください。
WordPressのおすすめプラグインをまとめたページ【随時更新】
Easy Table of Contents・オシャレな目次のCSSカスタマイズEasy Table of Contents・サイドバーに固定する目次用CSS
コメントを残す