【プラグイン】Easy Table of Contentsの使い方・カスタマイズ方法

ブログ制作

こんにちは、タマです。

今回は目次作成プラグインのEasy Table of Contentsについて解説いたします。

このサイトで使っているテーマの「Cocoon」のように、テーマによっては目次作成機能がついているものもあるので、わざわざプラグインを使う必要性はない場合もあるのですが、ちょっと別のブログで目次を作らないとダメになったので、記録として残しておきます。

スポンサーリンク

この記事が役に立つ人

  • ワードプレスの記事に目次を追加する方法を探している人
  • ToC+以外の目次作成プラグインを探している人
  • 目次のカスタマイズ例を探している人

目次作成プラグインとは

目次作成プラグインは、下記のように表示される目次を自動で生成してくれるものになります。

今回紹介するEasy Table of ContentsとToC+との違い

目次作成プラグインとしては、今回紹介する「Easy Table of Contents」の他に、利用者が圧倒的に多い「Table of Contens Plus」(ToC+) があります。

実は両者に機能的な違いは殆どありません(汗

ただ、何故前者のEasy Table of Contentsを推しているかと言えば、ずばりプラグインの最終更新日の違いです。

 

Table of Contens Plusの最終更新は3年前となっています。

この度ワードプレスもメジャーアップデートで5.0になりました。

それに伴い、古いプラグインの挙動が保証できなくなるリスクがある以上、なるべく新しいものを使っていきたいというのが、Easy Table of Contentsを推す理由となります。

Easy Table of Contentsのインストール

インストール方法については、省略します。プラグインの新規追加で「Easy Table of Contents」を検索すれば下記のように表示されるので、「今すぐインストール」をクリックし、「有効化」すればOKです。

無事にインストールが成功したら、管理画面の左の「設定」メニューの中に「目次」メニューが表示されます。

Easy Table of Contentsの利用方法

目次を自動生成する手掛かりになるのが、見出しとなる「hタグ」です。

プラグインがh1からh6までのタグを読み込み、目次を自動生成しますので、適切な章立てをして見出しを設定しましょう。

ただし、目次があまりにも細分化されるとごちゃごちゃして分かり難くなるので、実際はh2~h3タグ辺りを目次に採用するパターンが多いです。

独自CSSでのカスタマイズ

初期状態だと、下記のように行の高さなどが詰まっていたりなど、少し見づらいです。

そこで、CSSをカスタマイズして下記のように表示するサンプル及び設定方法を解説します。

少し見やすくなりましたよね。

具体的には、下記のコードをCSSカスタマイズ欄に追加します。
/*********************************
ETOC 目次
*********************************/
#ez-toc-container{
padding:30px;
width:70%;
}
#ez-toc-container nav{
font-size: 16px;
}
#ez-toc-container ul li {
margin-top:12px;
}
#ez-toc-container ul li ul li {
margin-top:3px;
font-weight:normal;
}

 

追加する場所は、管理画面左メニューの「外観」から「カスタマイズ」を選択し…、

「追加CSS」をクリックし…、

そこにCSSコードをコピペしてください。

行間の高さや、フォントなどは上記CSSを微調整して対応をしてください。

まとめ

このブログでは、テーマは「Cocoon」を使っているので、プラグインでなくても目次作成機能が備わっています。

ただ、サンプルで出した別ブログでは「Lightning」というテーマを使っており、そちらは目次をプラグインで対応しなければなりませんでした。

Easy Table of Contentsプラグインは設定も分かりやすく、使い勝手の良いプラグインなので、テーマが目次生成に対応していない場合は、プラグインの利用をお勧めします。

 

コメント