目次を自動生成するプラグインの使い方-Table of Contents Plus

2018-12-07プラグイン

 

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

他に目次生成プラグインでは、最近も更新されている「Easy Table of Contents」もあります。

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

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

 

インストール

 

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

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

 

設定

位置

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

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

表示条件

見出し(<h1>~<h6>タグ)がいくつあれば目次を出すかを設定

以下のコンテンツタイプを自動挿入

post にチェックをすると記事投稿時に自動生成

見出しテキスト

表示させる目次のタイトルと、表示・非表示切り替えのタイトルを設定

 

階層表示・番号振り

どちらもチェックを外した表示例

どちらもチェックを入れた表示例

番号振りのチェックを外した表示例

 

外観

 

文字のサイズや色のカスタマイズが出来ます。

以上で完了!簡単です。

 

記事記述時の注意点

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

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

H1タグ タイトル

H2タグ 大見出し

H3タグ 小見出し1

H4タグ 小見出し2

H5タグ 小見出し3

H6タグ 小見出し4

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

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

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

 

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