簡単便利!目次を自動生成するプラグインの使い方-Easy Table of Contents

2019-04-10WordPress・プラグイン

記事内から見出し(<h1>~<h6>)タグを拾い出して自動で目次の生成をしてくれる便利なプラグインです。

他に目次生成プラグインでは、「Table of Contents Plus」が有名ですが、機能的にはほとんど変わりません。(多少のデザインの違いあり)

それぞれのサンプルは以下です。どちらも文字色やホバー色などカスタマイズ出来ます。

「Table of Contents Plus」については以下をご覧ください。

 

「Easy Table of Contents」の特徴

目次の開閉は文字ではなくボタンになっていて「Table of Contents Plus」よりシンプルです。

色のカスタマイズも可能ですが、あらかじめ用意されているテーマから選択する事も可能です。(「Table of Contents Plus」にもデザイン選択機能あり)

目次から除外したい「文字列」も指定可能です。

 

インストール

 

 プラグイン名は、以下にカーソルを載せ右に出る「Copy」を押すことでコピー出来ます。
Easy Table of Contents

 

管理画面のプラグインから検索し、インストール

5802_01

 

設定

 「外観」→「プラグイン」から「Easy Table of Contents」の設定を開きます。

5802_02

 

 自動で目次を挿入したいページを指定します。

5802_03

 

位置

目次を挿入する位置を指定

  • 最初の見出しの前
  • 最初の見出しの後

5802_04

 

表示条件

 見出しがいくつあれば目次を出すかを設定
 見出しのラベルを指定します

 

5802_05

 

カウンタの表示例

 

外観

幅や文字サイズ

5802_07

 

カラーテーマの表示例

5802_08

表示例

 

カスタムカラーの設定

 上記テーマで「カスタム」を選択し、好きな色に設定する事もできます。

 

5802_09

高度な設定

対象とする見出しを選択

5802_10

 

除外する文字列の設定

 目次から除外したいものを指定できます。

例:

  • 果物* と入力すると、「果物」で始まる見出しを除外します。
  • *果物ダイエット* と入力すると、見出し中に「果物ダイエット」が含まれるものを除外します。
  • りんごの木|オレンジ|黄色いバナナ と入力すると「りんごの木」「オレンジ」「黄色いバナナ」のいずれかに一致する見出しを除外します。

注: 大文字・小文字は区別しません。

 

その他の項目は、必要があれば設定します。

 

以上で完了!簡単です。

 

デザインのカスタマイズには以下もご覧ください。

 

記事記述時の注意点

目次が表示されない場合

プラグイン導入と同時に、これまでの記事に自動で目次が挿入されますが、もし表示されない場合は、以下の項目を確認。

  • プラグインの有効化
  • 自動挿入条件の設定は的確か
  • 記事内の見出し挿入は的確か

プラグインの設定

Easy Table Of Contents

Easy Table Of Contents

 

それでも表示されない場合

  • プラグインを一度「無効化」し、再度「有効化」してみる。
  • プラグインを削除し、入れなおしてみる。

 

新しい記事に目次が表示されない?

記事編集の最下部にある「Table of Contents」の設定を確認。

Easy Table Of Contents

 

その他の注意点

自動で拾うのは、<h1>~<h6>の見出しタグですが、WordPressでは記事のタイトルが<H1>タグになっています。

記事内では、<H2>~<H6>を使います。
見出しタグの階層がバラバラになっていると、目次もグチャグチャになってしまいます。

H1タグ 記事のタイトル(記事内では使用しない)

H2タグ 大見出し

H3タグ 小見出し1

H4タグ 小見出し2

H5タグ 小見出し3

H6タグ 小見出し4

階層には気を付けて記述しましょう★

通常ならば考えなくてもよい事ですが、このプラグインで投稿時自動生成にしている場合は、見出しタグを使いすぎるのも良くないです。

たとえ階層が問題なく記述されていても、6階層すべてを何度も使ってしまうと、せっかく便利な目次の、それ自体が見づらいものになってしまうからです。

 

階層に注意し、2~3階層までに抑えると見た目にきれいな目次が出来ます。

 

関連記事