漫画・小説・ビジネス書なんでも最大100冊分が半額

WordPressの目次プラグイン・Easy Table of Contentsの設定と使い方

目次プラグインの設定方法

この記事では、”記事“と”サイドバー“に目次を自動挿入できるプラグインを解説します。

少し前まで、目次プラグインの代表格といえば「Table of Contents Plus 」でした。

ただ、3年以上更新されておらず、セキュリティ上あまりよろしくないと。

そこで、登場したのがEasy Table of Contents 」です。

中身はかなりアップデートされており、初心者の方でも使いやすくなっているので、乗り換えを推奨します。

特に高度な設定では、他の記事では書いていない視点や使い方も解説しているので、中級者以上の方もバッチリ使いこなしましょう。

Easy Table of Contentsをインストール

Easy Table of Contentsインストール
手順
  1. プラグインの中にある「新規追加」をクリック
  2. Easy Table of Contents」で検索
  3. 今すぐインストール」をクリック
  4. 有効化」をクリック

Easy Table of Contentsの一般設定

WordPress管理画面から目次設定

設定

目次」をクリック

一般設定では、主に「目次」の機能面を設定します。

目次を表示させる場所を決めよう

Easy Table of Contentsサポートを有効化

特にこだわりがなければ”投稿”と”固定ページ”にチェックします。

ここで”チェック”を入れたページのみ、目次を使えます。

自動挿入をONにする場所を決める

Easy Table of Contents自動挿入

自動挿入は、”投稿”のみでOK。

1つ前の設定で固定ページも有効化しているので、必要に応じて”手動”で入れれば良い。

記事中で目次をどこに表示させるか決める

Easy Table of Contents位置設定

特にこだわりがなければ「最初の見出しの前(デフォルト)」でOK。

一応それぞれの位置はこんな感じです。

easy-table-of-contents見出しの上に目次

最初の見出しの前

easy-table-of-contents見出し後に目次

最初の見出しの後


easy-table-of-contents上部に目次

上部

easy-table-of-contents下部に目次

下部

目次を表示させる条件の設定

easy-table-of-contents表示条件

指定した数以上の”見出し”がある場合、目次が自動挿入されます。

そもそも見出しが少ない記事なら、目次は必要ないので、4〜5件くらいがオススメ。

目次の見出しラベルの設定

easy-table-of-contentsラベル設定

あった方がわかりやすく、見栄えもいいので”チェック”しましょう。

見出しラベルとは、以下の赤枠部分です。

easy-table-of-contents見出しラベル

目次の折りたたみボタンを設置

easy-table-of-contents折りたたみ設定

チェックを入れると以下の「折りたたみボタン」が表示されます。ここはお好みで〜。

easy-table-of-contents折りたたみボタン
補足

当サイトの位置やデザインはCSSで調整しています。この辺りは以下で解説済み。

Easy Table of Contents・オシャレな目次のCSSカスタマイズ

目次の表示状態を設定

easy-table-of-contents目次の表示設定

先ほど、折りたたみ表示にチェックした場合のみ、ここにチェックを入れるとページを開いた時、折りたたんだ状態で”目次”が表示されます。

目次を表示させるためのプラグインなので、チェック不要。

目次を折りたたんだ状態

目次を折りたたんだ状態


目次を開いた状態

目次を開いた状態

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

検索結果の見出し
カゲサイーカゲオカゲオ

閉じた状態で表示するなら設置しなくていいと思うよ。

目次に段落を付けるか選択

目次に段落をつけるか設定

チェックを入れると、見出しタグの値が小さくなるにつれ「h2→h3→h4」、段落で表示されます。

段落ありの目次

段落ありの目次

段落なしの目次

段落なしの目次

ここは好みですが、h3タグ以下も使っている人は、段落はあった方が見やすいですね。

目次のカウンター設定

目次カウンター設定

見出しの前に”英数字”を入れるか選択できます。

目次カウンター小数点表示

小数点表示(連番アリ)

目次カウンター数字

数字(連番ナシ)

目次カウンターローマ字

ローマ字

目次カウンターなし

なし

ここも好みです。ただ、<h3>まで表示させるなら、”小数点表示”が一番キレイかと思います。

目次のスクロール設定

目次のスクロール設定

目次をクリックした場合に、スクロールの滑らかさを指定できます。

目次スムーススクロールあり

スムーススクロールあり

スムーススクロールなし

スムーススクロールなし

後ほど、高度な設定項目で解説しますが、とりあえず「チェック」しておきましょう。

目次デザインを決めよう

この項目で”目次”の外観を作成していきます。

幅の設定

目次の幅を設定

基本的に100%を推奨します。

「px」や「ユーザー指定」で、幅をカスタムできますが、レスポンシブ(異なる画面サイズに合わせる)を考慮すると100%にしておくと楽です。

回り込み設定

なし(デフォルト)のままでOK

例えば、上記で幅を50%にした場合、以下のように表示されます。

左を選択した場合
目次サンプル

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


右を選択した場合

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

目次サンプル

タイトル文字サイズの設定

目次タイトル調整

タイトルとは以下の部分

目次タイトル
カゲサイーカゲオカゲオ

文字サイズはお好きなサイズでOK。

CSSをイジれる人はスマホだけ少し小さくするのがポイント

当サイトは”PC20px”・”スマホ18px”です。

目次のフォントサイズ

文字の太さは以下の通り。

  • ”Medium”より上は細字
  • ”Semi Bold”より下が太字
細字バージョン 目次タイトル細字
太字バージョン 目次タイトル太字

各見出しの文字サイズを設定

目次文字サイズ設定 本文の文字サイズに対して指定できます。少し小さめにするとオシャレ。

目次の見出しサイズ

目次カラーを設定

目次デザインをカスタム指定

目次はサイトカラーに合わせたいので、”カスタム”を選択しましょう。

目次カスタムカラー

それぞれ以下の項目を指します。

目次カラー設定のサンプル
補足

※上記デザインは、その他に独自CSSを適用しています。

Easy Table of Contents・オシャレな目次のCSSカスタマイズ

目次プラグインの高度な設定

重要な項目は2〜3個だけなので、初心者の方は流し読みでOK。

アンカーに小文字を使用

目次のアンカーに小文字設定

目次内の見出しには、以下のように”id”が自動で割り振られます。

目次のアンカーサンプル

この”id”を必ず小文字にしたい場合はチェックします。

当サイトは、数字が混じっても構わないのでチェックしていません。

ハイフネーションの設定

目次のハイフネーション設定

見出しに英単語が入る場合、適用される項目です。

目次のアンカーハイフネーション

分かりにくいですが、単語の連結に_(アンダースコア)が使用されています。

チェックを入れると、(ハイフン)に変更できます。

一応意味としては

  • (ハイフン)区切り
  • _(アンダースコア)連結

になります。

基本は”連結”のが多いと思うので、チェック不要。

ホームページで目次設定

トップページの目次設定

固定ページでオリジナルのトップページを作成する場合、チェックすると”目次”を表示できます。

よく分からない方は、チェック不要。

目次プラグインのCSS読み込み設定

目次のCSS設定

お使いのテーマで「Easy Table of Contentsプラグイン用」のCSSが適用されている場合のみ、チェックします。

そうでない場合は、チェック不要です。

目次の見出しタグ設定

目次の自動見出し設定

チェックをした見出しタグが目次に自動挿入されます。

基本は<h2>または<h3>までチェックしておけばOK。

記事毎にも設定できます。

HTML見出しタグ【見出しタグの使い方】記事はh2〜h4だけで構成しよう

目次から除外したい見出しを設定

目次から除外したい見出し

特定の見出しを”キーワード”で除外できます。

カゲサイーカゲオカゲオ

ここで指定すると、サイト全体に反映されるので、空欄のままでOK。

投稿画面でも設定できるから、使う場合はそちらで。(後ほど解説)

目次のスムーズスクロールを設定

目次のスムーズスクロール設定

当サイトのように”ヘッダーを固定追従”させている場合のみ、指定します。

ヘッダーを固定させると、その縦幅の分”目次”のスクロール位置がズレます。固定ヘッダーにしている方は各自調整してみてください。

目次スクロール調整前
目次スクロール調整後
補足

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

カゲサイーカゲオカゲオ

当サイトの場合、調整してもページを読み込んだ直後の見出し移動だけズレます。二つめからは上手くいくのですが、理由は謎ですね。

目次のパス制限

目次のパス制限

パス(記事のURLの一部)を指定することで、特定の記事だけに目次を表示させることができます。

ただ、私はこの項目の使い道を見出せませんでした。いい方法があれば教えてください。

目次アンカーの接頭辞(せっとうじ)設定

目次のアンカー接頭辞

通常アンカー用のidは、英数字しか指定できません。しかし、我々は日本語で見出しを作るので、見出し内に英数字がない場合、ここで指定した文字が適用されます。

目次アンカーidサンプル

デフォルトで「i」が指定されているので、上記のようになります。

2つめの見出しから「i-2、i-3」と数字が振られていきます。

空欄にすると数字のみ「-2」が適用されます。

目次アンカーid数字のみ

数字のみは非常にわかりづらいので、何かしら文字列を入れたほうがいいですね。

当サイトは「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

投稿の編集の右側にある表示オプションの中に「Table of Contents」が追加されているので、チェックが入っているか確認しましょう。

確認したら、一番下までスクロールしてください。

各投稿の目次設定

各投稿の目次設定

①目次の自動挿入を無効

チェックすると、その投稿だけ”目次”を非表示にできます。

かなり使えるので、必ず覚えておきましょう。

②見出しの選択

例えば、普段は<h3>まで表示させているけど、見出しが多くなりすぎたなぁなんて記事は<h2>”にチェックすれば、その投稿では”h2見出し”だけ目次に表示されます。

カゲサイーカゲオカゲオ

まさに、この記事は<h2>だけにしてるよ。

あえて長く見せる目次短くした方がいい目次、この辺りは感覚と検証が必須になるけど、重要だから覚えておこう。

③見出しの差し替え

超上級者向けの設定です。”目次内に表示する見出し”と”実際の見出し”を変更できます。

目次プラグイン見出し差し替え

うまく使うことで、狙いたいキーワードを確保しつつ、”目次”のクリック率を上げるエモいキャッチコピーを書くこともできます。

あと検索結果に出てくる見出しリンクは”目次”から引っ張ってきているので、ここでもクリックしたくなるようなキャッチコピーをアピールできますね。

検索結果の見出し

実際はこんな感じで使います。

目次見出し差し替えサンプル 左側に実際の見出し | 右側に目次内に載せたい見出しを書く

例だと、「完全ワイヤレスイヤホン」キーワードで攻めつつ、SNSから流れてくるガジェット音痴層(完全ワイヤレスイヤホンという言葉を知らない層)にもアピールできますね。

AVのくだりは、男性ならわかってくれるかな?笑

注意
実際の見出しは、一字でもズレたり、抜けてると反映されないので注意。

見出し同士の間に「|(半角の縦棒記号)」を挟むのを忘れないように。

カゲサイーカゲオカゲオ

普段の記事では必要ないですが、渾身の記事や稼いでる記事だとかなり使えるテクニックですよ。

記事中で除外したい見出しを指定

こちらも上級者用の設定。

3パターンある特定の見出しだけ除外する方法。いずれも赤枠の見出しが非表示なっているのをご確認ください。

指定した文字と「一致する見出し」を除外

除外したい見出し」を貼り付けると、その見出しだけを非表示にできます。

目次サンプル
目次の見出し除外サンプル

指定した文字から「始まる見出し」を除外

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

目次サンプル2
目次の見出し除外サンプル2

指定した文字列を「含む見出し」を除外

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

目次サンプル3
目次の見出し除外サンプル3

投稿に合わせて見出し単位で除外できるのは、意外と便利。前の目次プラグインにはなかった機能です。

注意

ただし除外により、見出しの全体数が表示条件で指定した数より、少なくなると目次は非表示になります。

easy-table-of-contents表示条件

Easy Table of Contentsの設定【まとめ】

以上、目次プラグインの完全マニュアルでした。

上級者用の活用方法は、あまり知られていないと思うので、あなたのインスピレーションになれば幸いです。

初心者さんは難しい項目もあったと思いますが、コレってどうだったかな?と気になったら、当サイトへお越しください。

WordPressプラグインWordPressのおすすめプラグインをまとめたページ【随時更新】Easy Table of Contents・オシャレな目次のCSSカスタマイズサイドバーEasy Table of Contents・サイドバーに固定する目次用CSS

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です