超簡単に目次を生成できるプラグイン「Table of Contents Plus」

ワードプレスを使って記事を作成した時に、文章が長文だと訪問者が目的の見たい箇所に移動する為にページを下にめくったり探したりするのが大変だと思います。

これが幅の狭いスーマートフォンからとなるとさらに長くなるので閲覧される前に訪問者が離脱してしまう可能性が高まります。

そこで今回は見出しごとに簡単にページ内に目次を生成できるプラグイン「Table of Contents Plus」をご紹介させていただきます。

「Table of Contents Plus」をインストールすれば、画面上部などに目次を表示できるようになるので目的の見出しやタイトルに瞬時に移動することができるようになります。

ユーザビリティを考慮すると必須のプラグインなので是非、以下の手順に沿って試してみてください。

※本ブログの目次の機能は「Table of Contents Plus」を使用していません。

Table of Contents Plusのインストール方法

まずはワードプレスの管理画面から「プラグイン」→「新規追加」を選択します。

続いて検索キーワードにTable of Contents Plusと入力し、Enterキーを押して検索を実行してください。

Table of Contents Plusが表示されたら右側の「今すぐインストール」を押し、インストールが終了したら「有効化にする」をクリックすれば完了です。

Table of Contents Plusの基本設定

次にワードプレスの管理画面から「設定」→「TOC+」を選択します。

以降は主に設定する場所のみ説明させていただきます。

「基本設定」タブ内の設定です。

位置

目次をどの位置に表示するかを選択します。
意図しない位置に表示される場合はHタグの配置場所そのものを変えることも検討しましょう。

表示条件

目次を表示させるための見出しの条件の数を指定します。
「3」と入力すればページ内に見出しが3つ以上存在する場合に目次を表示します。

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

チェックすることにより表示条件を満たした対応するページ全てに適用できます。

「post」→全記事ページ
「page」→全固定ページ

見出しテキスト

チェックすることにより、目次にタイトルをつけることができます。

ただ、このタイトルは適用した全てのページに反映されるので「目次」など、どの内容に対しても共通して使えるワードの方が無難に思われます。
入れたくない場合は入れる必要もありません。

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

目次の内容をクリックした時にどのようなアクションで移動するかを指定できます。

・チェックなし→瞬時に指定場所にジャンプする
・チェックあり→そのまま高速で下にスクロールして移動する

とりあえず上記内容を設定し、タブ内左下の「設定を更新」すれば目次は配置されています。

Table of Contents Plusの上級設定

基本設定タブの下の「上級向け」を表示すると、より細かい設定ができるようになります。

こちらの設定はそこまで重視はしませんが、以下の2カ所は個人の作り方によっては重度は高いと思うので説明させていただきます。

ホームページを含める

ホームページ（サイトのTOPページ）に目次を表示させるか否かを選択します。

・チェックなし→ホームページには表示しない
・チェックあり→ホームページにも表示させる

見出しレベル

目次に表示をさせる対象となる見出し（Hタグ）を選択します。

見出しがh4、h5など数段階あるページならば必要分、チェックすることになりますが目次の項目が増えすぎるとゴチャゴチャして逆に利便性を損なう可能性もあります。

設定完了後、目次が自動生成

設定が全て完了すれば、条件を満たしたページに目次が自動生成されます。

※上記は画像です。

↑公開してるさイトの記事上部に目次が生成されました。
（本サイト「もしもアフィリエイト経由でamazonと楽天の商品を売ればよりお得！」のページより）

各項目はページ内のH2やH3などの見出しがそのまま表示され、クリックすることで移動する形になります。

目次の設定方法はいかがでしたでしょうか。

「Table of Contents Plus」をインストールすればこのように30分とかからず簡単に目次が生成できます。
おすすめですので是非、インストールしてみてください。

考察TOPへ
HOMEへ