相互リンク詳細へ

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

2019-04-10プラグイン

 

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

他に目次生成プラグインでは、「Table of Contents Plus」が有名ですが、こちらは更新が止まっているようなので、最近も更新されている「Easy Table of Contents」も紹介しておきます。

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

「Easy Table of Contents」の特徴

 

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

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

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

 

「Table of Contents Plus」と「Easy Table of Contents」。設定方法や設定出来る内容はほとんど同じですが、「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_06

ライトブルー

5802_11

5802_12

 

カスタムカラーの設定

 

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

 

5802_09

高度な設定

対象とする見出しを選択

5802_10

 

除外する文字列の設定

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

例:

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

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

 

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

 

以上で完了!簡単です。

 

記事記述時の注意点

自動で拾うのは、<h1>~<h6>の見出しタグですが、

見出しタグの階層がバラバラになっていると、目次もグチャグチャになってしまいます。

H1タグ タイトル

H2タグ 大見出し

H3タグ 小見出し1

H4タグ 小見出し2

H5タグ 小見出し3

H6タグ 小見出し4

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

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

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

 

階層に注意し、2~3階層までに抑えると見た目にきれいな目次が出来ます。
4階層以降は、フォントサイズや装飾など他のタグを使いましょう★