さまざまなサイトで見かける『目次』というものがありますね。

目次をつけると見栄えもよくなりますし、読者に『このページにはどのような事が書かれていて、どれくらいの内容なのか』というのが直感で分かるようになります。

また、ひと目でページのおおまかな内容が分かるので、記事のリライトをする場合も役にたちます。

 

ですが、目次をコード打ち込みで作ろうとすると、結構面倒なのです。慣れてしまえば大した事ありませんが、記事のリライトをした場合、見出しの文章を変更したときに、目次の文章も変更させないと行けないのが非常に面倒です。

それと、目次の変更をするのを忘れてしまったり…正直なところ、忘れるのが一番面倒です。

 

今回は、そんな面倒な目次作成を自動でやってくれるWPプラグイン『Table of contents plus(TOC+)』を紹介したいと思います。

ちなみに↓の目次がプラグインでつけた目次です。

 

Table of contents plusとは

記事の見出し(h2・h3・h4ってやつ)から、目次を自動で作成してくれるプラグインです。

場所は変えられますが、デフォルトの設定は最初のh2タグの手前です。

 

インストール

ダッシュボードの『プラグイン』→『新規追加』をクリックしてください。

 

キーワードに『Table of contents plus』と入力し、『Table of contents plus』の『今すぐインストール』をクリックします。

インストールが終わったら『有効化』をクリックします。

これでインストールは完了です。

 

設定

ダッシュボードの『設定』→『TOC+』をクリックしてください。

 

 

基本設定

位置

目次の位置です。デフォルトは最初のh2タグの前です。デフォルトのままでいいでしょう。

 

表示条件

hタグの数で目次を出すか出さないか決められます。デフォルトは4つですが、私は3つで表示にしました。

 

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

固定ページ・投稿ページに目次を入れるかどうかの設定です。デフォルトでは『page(固定ページ)』のみにチェックされています。

私の場合は投稿ページにも目次が欲しかったので『post(投稿ページ)』『page(固定ページ)』両方にチェックしました。

下2つは…よくわかりません。試しにチェックを入れてみたのですが、どこが変わっているのか…?目次の見た目を変更する時に使うんですかね?

 

見出しテキスト

目次のテキスト装飾の設定です。目次のタイトルをつけたり、表示・非表示をつけたりできます。

私はデフォルトのテキストからちょっと変更してます。本当にちょっとですけど。

 

階層表示

hタグの数字が進むごとに、右にずれるように段落をつける設定です。

つけないと見にくくなるため、チェック推奨です。

 

番号振り

目次の項目に番号を割り振るかどうかの設定です。

これもつけないと見にくくなるため、チェック推奨…なのですが、自分でhタグの文章に番号を振っている場合は、それとかぶってしまうので注意です。

たぶん、このブログもどこかで数字がかぶっているはず…

 

スムーズ・スクロール効果

目次をクリックしたとき、その項目にジャンプするか、スクロールするかの設定です。まぁ好みでいいでしょ。

 

外観

見た目の設定です。横幅はともかく、回り込みは変更するとレイアウトが崩れるのでデフォルト推奨です。

文字サイズもデフォルトでいいと思いますが、もっと小さくしたい場合は変更してもいいでしょう。

プレゼンテーションはお好みでOK。私は目次がすぐわかるように水色にしました。

 

上級者向け

上級者向けの横『hide』をクリックすると、上級者向けの設定ができます。ですが全てデフォルトのままでOKです。正直、見出しレベルの設定くらいしかわかるところがありませんでした。使えりゃいいんだよ使えりゃ。

 

あとは『設定を更新』をクリックすれば設定は完了です。

 

記事ごとに目次を使い分けたい

基本的に目次を表示させたくないけど、この記事だけは目次を表示させたい、という場合の設定を紹介します。(私はそういう使い方しないですけど)

設定は簡単。基本設定の『以下のコンテンツタイプを自動挿入』のチェックを全て外し、該当記事の編集をビジュアルからテキストに変更し、目次を入れたい場所に[]を入力し、その中にtocと入力するだけです。
(ビジュアルモードでもタグに反応して目次が出てしまったので、このような表記にしました。)

 

今度は逆に、基本的に目次は表示させたいけど、この記事だけは目次を表示させたくない、という場合の設定も紹介。

こっちはもっと簡単。該当記事の編集をテキストに変更し、どこでもいいので[]を入力し、その中にno_tocと入力するだけです。
(このタグもビジュアルモードで打ち込んでも反応してしまったのでこのような表記にしました。)

 

インストールするだけで記事も見やすくなり、リライト時の変更も簡単なのでオススメですよ!