【WP】記事の目次を作成するプラグイン「Table of Contents Plus」

ブログ運営

今回は、記事の最初にメニューを追加するにはどうしたら良いか検索していたら「Table of Contents Plus」と言う便利なプラグインを発見しました。

 

スポンサーリンク

1.記事の目次を自動生成してくれるプラグイン「Table of Contents Plus」

かなり有名なプラグインみたいです。

「Table of Contents Plus」は記事の見出しタグから目次を自動的に作成してくれるWordpressのプラグインです。

 

2.「Table of Contents Plus」のインストール

WordPressの管理画面 > プラグイン > 新規追加 > 「Table of Contents Plus」で検索 > 今すぐインストール > 有効化

 

3.使用上の注意点

利用するにあたって、見出し用のHTMLタグ(H1~H6)を階層的に記述する必要があります。

タグが無ければ、記事の目次は生成されません。

 

4.設定方法

管理画面 > 設定 > TOC+ >

 

基本設定

位置

◎ 最初の見出しの前(デフォルト)

○ 最初の見出しの後

○ 上(記事タイトルの下)

○ 下(記事の一番下)

 

表示条件

この場合は4つ以上だと目次が表示されます。

 

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

post 投稿記事
page 固定ページ
custom_css カスタムCSS
customize_changeset カスタマイズチェンジセット
wpcf7_contact_form 問い合わせフォーム

デフォルトではpage(固定ページ)にしかチェックが付いていませんでした。

投稿記事にもチェックしましょう。

 

スムーズ・スクロール効果を有効化

有効化すると、目次をクリックした時にジャンプではなく、滑らかにスクロールされます。

 

見出しの表示数を減らす

H4タグまで増えると目次が見にくいと感じたので、目次は「H1、H2、H3」の三つまで表示する事にしました。

 

下のほうにスクロールすると上級者向け(hide)とあるので、クリックして表示しましょう。

上級者向け > 見出しレベル

 

これですっきりしました!

 

5.その他のカスタマイズ

「Table of Contents Plus」のデフォルトでは変更できないカスタマイズ方法をご紹介します。

目次の位置を中央揃えにする

スタイルシート(CSS)に追記します。

管理画面 > 外観 > テーマの編集

 

一番下に以下のコードを追加して「ファイルを更新」

 

こんな感じです。

因みに私は「Simplicity2」と言うテーマの子テーマを使用しています。

中央揃えになりました!

 

文字の上下の間隔とサイズ

現在デフォルトではこんな目次になっていますが、少しだけカスタムしたいと思います。

  • 文字と文字の間隔を少しあける
  • リンク部分にオンマウスした時のアンダーラインを消す
  • 文字の大きさを少し大きくする

【適用前】

 

【適用後】

 

見やすくなった・・・?かな?多少は・・・(笑)

あまり変わっていないですが、一応コードを載せます。

 

場所は先程と同じです。

管理画面 > 外観 > テーマの編集 > 一番下に以下のコードを追加して「ファイルを更新」

 

 

タイトルに自動でつけられる番号を手動に切り替える【2017/10/18追記】

見出しの番号を自動で生成してくれる機能は便利ですが、記事を複数作成していくにつれて見難くなってしまうパターンがあったので、これからは全て手動に切り替える事にしました。

 

例:こんな風に自分で番号を振ってしまうとダブってしまう。

 

結果:手動の方が見やすい場合もある

 

やり方

やり方は簡単です。

管理画面 > 設定 > TOC+ > 基本設定タブ > 番号振りのチェックを外す > 設定を更新

 

番号が削除されたことで、小見出しに番号を振らない場合は、もう少し右にずらしたいので、一つ前に記述した「文字の上下の間隔とサイズ」と同じ手順でCSSを編集します。

 

管理画面 > 外観 > テーマの編集 > 以下のコードを追加して「ファイルを更新」

 


参考記事

WordPressプラグインで記事の目次を自動生成する-Table of Contents Plus
WordPressのプラグイン「Table of Contents Plus」を使うと、見出しタグ(hタグ)から目次を自動生成できます。ユーザビリティの向上やSEO対策としても意味があるため、hタグの適切な使用方法の勉強とTable of Contents Plusを用いて目次を自動生成させることはおすすめです。

コメント