目次自動表示のプラグイン|Table of Contents Plusの設定方法

Tableof Contents Plus2

Table of Contents Plusは、ワードプレスでサイト作りをする上で任意の場所にすぐ移動出来る目次を作れるプラグインです。

ユーザビリティの向上に必須のプラグインとして私は全てのサイトに入れています。一目で記事の内容を把握出来るので訪れた人に分かりやすいサイトを作れるという事です。

つまりgoogleの推奨するコンテンツ作りにはおすすめのプラグインです。

Table of Contents Plusの設定方法をご紹介します。

Table of Contents Plusをインストールする

まずはダッシュボードのプラグイン、新規追加から「Table of Contents Plus」を検索。
インストールして有効化をします。

table-of-contents-plus1

ダウンロードしてインストールする場合は下記のURLからダウンロードできます。

https://wordpress.org/plugins/table-of-contents-plus/

 

Table of Contents Plusの基本設定

インンストールが完了したら設定をしていきます。

ダッシュボードの「設定」から「TOC+」を選びましょう。

table-of-contents-plus2

 

設定

Table of Contents Plusの設定画面に移ります。

「基本設定」「サイトマップ」「ヘルプ」と出てきますのでまずは基本設定を設定します。

基本設定

table-of-contents-plus3

表示する場所

目次を表示する場所を設定出来ます。デフォルトは「最初の見出しの前」になっています。

その他、「最初の見出しの後」や記事の最上部に表示する「トップ」、記事の最下部に表示する「ボトム」とあります。

お好みですが、「最初の見出しの前」が良いですね。当サイトで見てみるとこんな感じです。

table-of-contents-plus4

表示条件

見出しが何個以上あるときに目次を表示させるかを設定出来ます。

デフォルトでは「4」ですが、「2」にしましょう。

コンテンツブログを作る上で見出しは最低2つは作るようにしてください。そのため常に2つ以上の見出しを意識していけば常に記事には目次が表示されるようになります。

次の投稿タイプのときに表示

目次を表示させたい投稿タイプを設定出来ます。

」「page」「」とありますが記事に目次を導入したいため「」を選択します。

見出しテキスト

目次にタイトルを付ける場合はチェックを入れましょう。

デフォルトでは「Contents」になっていますが任意の名前に変更出来ます。当サイトでは「目次」としてますが、「概要」や「コンテンツ」など独自色を出す為に変えてもいいですね。

「表示非表示切り替えボタンのテキスト」は表示と非表示が設定出来ます。
「開く」「閉じる」「表示」「非表示」など名前だけ日本語に直しておきましょう。

階層表示

見出しを階層化するかを設定出来ます。h2見出しの下にh3が来ると言った感じです。

【階層化した状態】

table-of-contents-plus5

【階層化していない状態】

table-of-contents-plus6

基本的には階層化した方が見やすいのでデフォルトでOKです。

番号振り

赤枠部分の目次につく番号をつけるかつけないかを設定出来ます。見やすさを考えてチェックしておきましょう。

table-of-contents-plus7

スムーススクロール

目次はクリック出来て任意の場所に移動出来ますが、その際のアニメーションするかしないかを設定出来ます。

チェックを入れるとアニメーションしますが重くなるのでいらないでしょう。

 

デザイン

目次のデザインを色々設定出来ます。

table-of-contents-plus8

横幅

目次の幅を設定出来ます。

横幅を画面一杯にしたいという方がいますがやめましょう。

これはpc上だと見た目がいいのですが、スマホ対応してないプラグインなのでスマホで見ると幅を振り切ってしまいます。

自動にする事でスマホでも目次がきちんと表示されます。

回り込み

目次の左右を設定出来ます。

文字サイズ

目次の文字サイズを設定出来ます。

デザイン

文字通りデザインを決められますので、好みのものでOKです。

 

上級者向け

table-of-contents-plus9

基本的にはデフォルトで問題ありません。

いじるなら「見出しレベル」です。

これは任意の見出しを目次に表示させる事ができますので、たとえばh3から下の階層を見出しとして使いたいとか、そういった使い方が出来ます。

 

サイトマップ

ここはテキストウィジェットに見出しを作れる設定画面です。
ウィジェットなのでサイドバーやフッターに見出しをつくれます。

下図のようにカテゴリー等も設定出来るのでうまく利用してください。

table-of-contents-plus11

まとめ

【ポイント】

  1. 目次を作る事でユーザビリティに良いサイトがつくれる。
  2. Table of Contents Plusの各種設定を理解する

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です