【Table of Contents Plus】で記事の目次を作りましょう

こんにちは。ゆかです。

WordPressのブログを作るときに、わたし自身が調べたことや人からオススメされたものを備忘録として残しています。

今からブログを作りたいあなたに参考してもらえればいいなと思っております。

それでは本日は、【Table of Contents Plus】というプラグインのご紹介です。

わたしのサイトの記事を見てもらったら分かりますが、記事の最初の方に【目次】を入れています。

この下にも入っていると思います。目次があるのとないのでは、見た目的にも違いますよね。

【Table of Contents Plus】とは？

記事の最初の方に、目次を自動的に表示させてくれるプラグインになります。

他にも目次を自動的に表示するプラグインはあるかと思いますが、わたしが使用しているのは【Table Contents Plus】になります。

記事の最初に目次があるのとないのでは、見た目的差も大きいのですが、読んでいる人に、すぐにこのページではどんなことが書かれているのかを知ってもらうことができます。

それに読みたいところにジャンプして飛べます。

さっそくインストールしていきます。

【Table of Contents Plus】をインストールする方法

WordPressのダッシュボードにログインします。

【プラグイン】にマウスを合わせて【新規追加】をクリックします。

画面が切り替わるので、右上の【プラグインの検索】にプラグイン名（Table of Contents Plus）を入力します。

検索結果に【Table of Contents Plus】が表示されます。

【今すぐインストール】をクリックします。

少しすると【有効化】というボタンに代わりますので、クリックします。

※有効化をクリックしないと、導入したプラグインは機能しません。

画面が切り替わり、【プラグインを有効化しました】と表示されれば完了です。

インストールと有効化ができましたので、設定していきましょう。

【Table of Contents Plus】の設定方法

【設定】にマウスを合わせて【TOC+】をクリックします。

設定画面に切り替わりますので、わたしが今表示している目次の設定をしていきます。

目次の位置をきめる

目次の表示位置を選択します。初期設定のままでいいと思います。

初期設定だとページの最初の方に表示されます。

いくつ以上で目次を表示せさせるのかきめる

見出しをいくつ入れたら目次が自動表示されるのかを決めます。

自分の使いたい希望数で良いと思います。わたしは、３にしています。

表示させたい記事の種類をきめる

目次を表示したい記事の種類を決めるのですが、種類を書きだしますので、自分の表示したい種類を選んでください。

わたしは、【Post】と【Page】にしています。

見出しテキストの設定をしよう

目次のタイトルをきめます。

普通に【目次】が一般的かと思いますが、わたしは【contents】になっています。初期のままです。

目次の表示・非表示の選択をします。

チェックを入れると目次の開閉ができるようになります。

テキストを表示・非表示のタイトルをきめます。

目次を開くときと閉じるときののリンクのタイトルを設定します。

わたしは表示が【show】で非表示が【hide】となっています。これまた初期のままです。

階層表示

目次の階層を表示するかをきめます。目次は階層表示させた方が見やすいと思いますので、チェックを入れるのをオススメします。

番号振り

目次の項目に番号を自動で振るかを設定します。ここもチェックを入れて、自動で番号を振るようにするのがオススメです。
ですが、見出しに番号が入っていると、目次と見出しで番号が並んでしまうことがありますので注意しましょう。

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

目次をクリックすると、クリックした箇所にジャンプできます。そのクリック後の動きが「ジャンプ形式」か「スクロール形式」かを選べます。

どちらがいいのかは、好みになりますので、試して決めても良いと思います。

わたしは、スクロールするようにしています。

外観をきめましょう

横幅をきめます。

初期設定は、デフォルトで設定されている「自動」なのですが、わたしの使っているテンプレートでは、デフォルト設定が合わなかったので、ユーザー指定にしています。

回り込みの設定をします

目次の設置位置を設定します。デフォルトのなしがオススメです。

文字サイズをきめましょう

目次の文字の大きさを設定します。デフォルトの95%が良いかと思います。初期のままです。

プレゼンテーション

目次のデザインを選びます。わたしは、お好きなデザインでいいと思います。

上級者設定をしてみよう

上級者向け設定でチェックしてほしい必要な項目は、見出しレベルの変更だけです。

上級者向け（開く）をクリックします。おすすめの設定は「h2とh3」です。

目次に表示する見出しタグを選びます。あまりたくさん選ぶと目次が大きくなりすぎるため、あまりおすすめできません。

あとは、テンプレートによって選択項目が変わってくるかと思いますので、試してみてください。

わたしは「h2とh3」だけではなく、「ｈ４」もチェックしています。

ここまで設定がおわりましたら、【設定更新】をクリックしてください。

【Table of Contents Plus】の設定終了

うまく設定できましたか？

この設定で、記事に見出しを３つ以上入れることで、自動的に目次表示されるようになりました。

見出しをうまく使って、見やすいページを作っていくようにしましょうね。

カスタマイズ方法

目次位置の設定のとき、回り込み設定のデフォルトなしを設定してもらうようにおすすめしました。

わたしのサイトのように目次の幅を広げたりしていればセンター寄りになっていいかと思います。

ですが、サイズを小さいままにしていると回り込みで設定した位置に目次が表示されます。

もし、中央寄せしたいということであれば、下のコードを追加CSSへコピペしてください。

#toc_container {
margin-left: auto;
margin-right: auto;
}

追加CSSは、外観カスタマイズをクリックします。

左サイドバーにカスタマイズ画面が表示されます。

それの一番下の追加CSSになります。

追加CSSに先ほどのコードを入力してください。追加したら、公開します。

すると表示が中央寄りになっています。

さらに、目次を丸角に変更してみましょう。

下のコードを追加CSSに追加すると目次の角が丸角になります。

/*TOC+ 角丸*/
#toc_container {
border-radius: 20px;
}

さっそく追加してみました。

かわいい印象に変わりますね（＾＾）

追加CSSに追加するだけで、色々なカスタマイズができます。

コピペだけなので、簡単にできます。カスタマイズの参考にされてくださいね（＾＾）