みなさんは本を読む時にどういった内容が書かれているのかを気にしたことはないでしょうか?

本のタイトルに興味を持って最初に見るのは目次を見る人が多いと思います。
サイトも同様に目次があると記事の中身をイメージしやすくなり、知りたい情報がひと目であるかどうかを知ることが出来ます。

今回は誰でも簡単に目次を作成できるプラグインを紹介します。

 

 

 

 

 

ケロ蔵
目次がないと読みたいところを探すのが大変なんだ。 1ページあたりの文字数が多ければ多くなるほど、縦に長くなってしまうし訪問している人すべてが最初から最後まで読んでくれるわけではないから、基本的には目次を設定しておいたほうがいいと思うよ。

Table of Contents Plus公式

Table of Contents Plus公式ホームページ

Table of Contents Plusの使い方

それでは実際にTable of Contents Plusの設定方法について説明していきます。

今回は既にインストールして有効化にしたのを前提に進めていきます。
Table of Contents Plusプラグインの設定をクリックすると次のような画面が表示されます。
Table of Contents Plus2 Table of Contents Plus
設定するのは基本設定と一部の上級設定だけでOKです。
それ以外の部分は基本的にイジる必要はありません。

位置

最初の見出しの前/最初の見出しの後/上/下の4つから選べます。
下を選ぶと記事の最後に表示されてしまい、目次の意味をなさなくなるので、それ以外の3つから選んでおくといいです。

上を選ぶとアイキャッチ画像の次に表示されるので、アイキャッチ画像と見出しの間に導入文がある場合は上を選んでいいかもしれません。

表示条件

◯つ以上の見出しがあるときとなっており、◯の部分に2~10までの数値を選択します。

選択した数値以上の見出しがないと目次が自動生成されませんので、できるだけ小さい数値を選んだほうがいいです。

大きい数値を選択すると、見出しを10以上記事に盛り込まないと目次が表示されなくなるので、3~4程度が無難でしょう。

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

コンテンツのタイプによって目次を表示させるかどうかを選択します。
選択しなかったものは見出しがいくらあろうと目次は表示されません。

post:投稿
page:固定ページ

あとはテンプレートや導入しているプラグインによって項目が増えていたりするので、必要であればチェックを入れておきましょう。
基本的にはpostだけでも問題ありません。

見出しテキスト

見出しテキストにどのようなテキストを表示させるかを入力します。
必須項目ではありませんが、見出しテキストがないと目次と認識されにくく見た目が悪いので、チェックを入れておきましょう。(最初からチェックが入っているかもしれません)

目次の上にタイトルを表示

目次の共通タイトルを入力しますが、「目次」と入力されていれば特に変更する必要はないです。
他の表現を使いたい場合はここに入力します。

ユーザーによる目次の表示・非表示を切り替えを許可

目次の上にタイトルを表示にチェックを入れた場合に表示される設定です。目次には表示・非表示を切り替えるボタンがありますが、このボタンを読者が操作できるか設定できます。

読者はそこまで気にしていないので、好みでいいと思います。

テキストの表示・非表示

ユーザーによる目次の表示・非表示を切り替えを許可にチェックを入れた場合に表示されます。
表示・非表示の文章を変更します。
そのままでもいいですが、海外向けのサイトならその国にあった言語に変更したり、openやcloseといった表現に変えてもいいでしょう。

最初は目次を非表示

ユーザーによる目次の表示・非表示を切り替えを許可にチェックを入れた場合に表示されます。
ページに最初に辿り着いた時に目次を閉じた状態にしておくか選択できます。
基本的には表示でいですが、目次によるネタバレ防止を考えると最初から非表示にしておいてもいいかもしれません。

階層表示

h2やh3の見出しごとに階層を分けて表示されます。
たとえばh2の次にh3を設定した場合には少しだけ右にずらして表示されます。H4やH5を表示する場合も同様です。

見出し

 

番号振り

目次に番号を表示させたい場合にチェックします。

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

チェックを外したままだと目的地に瞬間移動するような感じで即座に移動が出来ます。
逆にチェックを入れた場合、目次をクリックすると目的の場所まで高速でスクロールします。

横幅

目次の横幅を決めます。
デフォルトは自動ですが、これはメインコンテンツの幅を最大限利用する横幅になるので見出し分が短いと右側が余白が多すぎてしまい、見た目が悪くなってしまいます。

横幅が短いと見出し分が複数の行に分割されるので細長くなってしまいます。

ベストの横幅は33%、50%、66%のいずれかを選択しておくのが無難でしょう。

回り込み

目次の位置を左右どちらにするかを選びます。
ほぼすべてのサイトが左側に目次を置いているのでなし、もしくは左を選んでおけば問題ないです。

文字サイズ

目次の文字の大きさを選択します。
数値は直接入力で、単位はpt、%、emの中から選択できます。

プレゼンテーション

目次の背景を選ぶことが出来ます。
はじめから用意されているのは5種類で自分好みのカスタムをすることも出来ます。

スポンサーリンク

Diverテンプレートで細かいカスタマイズができる

DiverではTable of Contents Plus用の簡単なカスタマイズをすることができます。
設定内容は基本カラーとテキストの色を変更するだけなので細かな部分までカスタマイズすることは出来ませんが、色を変えるだけでもサイトの見栄えが良くなったりもします。

Diverオプションの投稿設定で以下の画像に表示されている項目を変えるだけの簡単仕様です。

目次2

Table of Contents Plusの注意点

ここまでTable of Contents Plus推しをしてきましたが、1つだけ重要なことがあります。

それはある程度文字数がある記事でないと効果がほとんどありません。
1000文字以上ある記事であれば問題ありませんが、文字数が極端に少ないと目次を作成する必要性がありません。

なので、目次を表示するのであれば文字数を意識して記事を作成しましょう。

スポンサーリンク
おすすめの記事