目次の自動表示プラグインTable of Contents Plusの使い方と設定

今回は、記事の見出しごとに目次を自動で設置してくれるWordPressプラグイン「Table of Contents Plus」を紹介します。

記事の冒頭にその記事の見出しを設置することで、読者がその記事にどんな内容が書かれているかを把握することができます。

つまりユーザビリティの向上に役立つのです。また、この目次を使用することでSEO的にも良い効果を得られます。

今回はTable of Contents Plusの使い方を解説していきます。

ちなみに↓がTable of Contents Plusを使用した目次です。

Table of Contents Plusの導入

まずは、WordPressプラグイン「Table of Contents Plus」のインストール、有効化をして、導入しましょう。

WordPressプラグインのインストール、有効化の具体的な方法がわからない方は、以下の記事を参考にしながら進めてみてください。

Table of Contents Plusの設定

次はTable of Contents Plusの設定に移ります。

WordPress管理画面のサイドメニューの「設定」→「TOC+」と進みます。

2014-11-09_17h23_24

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

設定には「Main Options」、「Sitemap」、「Help」とありますが、基本的には「Main Options」だけで大丈夫です。

2014-11-09_17h38_35

上から順番に見て行きましょう。

2014-11-09_17h40_49

Position:

ここでは、目次を表示する位置を選択できます。

「Before first heading (default)」は、最初の見出しの上部に目次を表示させます。

「After first heading」は、最初の見出しの下部に目次を表示させます。

「Top」は、記事の最上部に目次を表示させます。

「Bottom」は、記事の最下部に目次を表示させます。

私のおすすめはデフォルトの「Before first heading (default)」です。

Show when:

ここでは、見出しがいくつ以上あるときに目次を表示させるかを選択できます。

デフォルトでは「4」になっていますが、おすすめは「2」です。

つまり、見出しが2つ以上ある際に目次を表示させます。

Auto insert for the following content types:

ここでは、目次を表示させたい記事の種類を選択できます。

普通の記事に目次を表示させるためには「post」を選択しましょう。

Heading text:

最初の「Show title on top of the table of contents」にチェックを入れると、目次のタイトルを表示することができます。

目次だと読者が認識しやすいようにチェックを入れることをおすすめします。

そして、チェックを入れた際は、下の空欄に「目次」など、任意の言葉を記入しましょう。

その下には「Allow the user to toggle the visibility of the table of contents」と書いてありますが、こちらにチェックを入れることで目次を開いたり閉じたりすることができます。

チェックを入れた際は、開いたり閉じたりするためにクリックする文字を空欄に記入します。基本的には「開く」「閉じる」などで大丈夫でしょう。

そして、その下に「Hide the table of contents initially」とありますが、こちらにチェックを入れると最初から目次が閉じた状態になってしまい、あまり役に立ちませんのでチェックを外しておくことをおすすめします。

Show hierarchy:

ここにでは、目次を階層的に表示するかどうかを選択できます。

目次を見やすくするためにも、チェックを入れておくことをおすすめします。

Number list items:

ここでは、目次のリストに番号を振るかどうかを選択できます。

こちらも見やすさを考えてチェックしておきましょう。

Enable smooth scroll effect:

ここでは、目次のリストをクリックした際になめらかなスクロールをするかどうかを選択できます。

どのようなものかを見たい場合は、この記事の上部に設置してある目次のリストをクリックしてみてください。

Appearanceの設定

次はその下のAppearanceの設定に移ります。

2014-11-09_17h42_56こちらも上から順番に見て行きましょう。

Width:

目次の幅を選択することができます。

Wrapping:

目次の左右の位置を選択できます。

Font size:

本文の文字サイズに対する目次の文字サイズを選択できます。

Presentation:

お好きな目次のデザインを選択できます。

Advancedの設定

次は「Advanced」の設定に移ります。こちらは少し上級者向けの設定になります。

2014-11-09_21h18_34

赤枠で囲った「Heading levels」以外の項目は基本的には設定する必要はありませんので、「Heading levels」を見て行きましょう。

こちらでは、選択した見出しタグを目次に表示するように設定することができます。

これは使用しているWordPressテーマにもよりますので一概にこれとは言えないのですが、基本的にはh3以降にチェックを入れることが多いです。

上の画像のような設定ですね。

hタグ(見出しタグ)に関してよくわからない方は、チェックを入れて、確認して、という動作を1つずつ行いながら設定してみてください。

 

設定が完了しましたら最後に「Update Options」をクリックして設定を反映させましょう。

Table of Contents Plusで作成した目次の表示例

実際にどんな感じで目次が表示されるのかというのをお見せします。(この記事の上部でもお見せしていますが…笑)

2014-11-09_17h47_25

見出しタグを綺麗に付けることができていれば、このように目次も綺麗に表示されます。

自分のブログを訪れてくれた読者のためにも、ぜひこのTable of Contents Plusは使用しましょう。

まとめ

目次を自動表示してくれるWordPressプラグインTable of Contents Plusの使い方はわかりましたか?

ユーザビリティの向上、そしてSEO対策のためにもぜひ使用してみてください。

メールマガジン登録





2 Responses to “目次の自動表示プラグインTable of Contents Plusの使い方と設定”

  1. […] 設定方法は、http://netbusinessland.com/table-of-contents-plus-1529 を参考にさせていただきました。 […]

コメントを残す

サブコンテンツ

このページの先頭へ