【WordPress】目次プラグイン「Table of Contents Plus」の設定方法

 

今回はWordPressの代表的な目次プラグインである「Table of Contents Plus（TOC+）」の使い方と具体的な設定方法について解説していきます。

 

導入自体は簡単ですが、ブログを始めたばかりの方にとっては「見出し」の概念やWordPressテーマ側でのデザインの設定等で少し分かりづらい部分があるかと思いますので、その点も含め説明していけたらと思います。

 

 

Table of Contents Plusのインストールと有効化

 

まずはプラグインのインストールと有効化の作業を行っていきます。

 

上画像のようにプラグインが出てきたら、

 

 

これにてプラグインのインストールと有効化は終了です！

 

 

上記の通り、不安な方は上画像の「Table of Contents Plus」の左隣にある「Easy Table of Contents」を使用した方が無難かもしれませんね。以下記事を参考にどうぞ！

関連記事

【WordPress】目次プラグイン「Easy Table of Contents」の設定方法

続きを見る

 

ただ、僕自身はTable of Contents Plusの方がデザイン的に好きなので問題が出るまでは使用し続けます。笑

 

Table of Contents Plusの設定

 

ではここからプラグインの設定方法をみていきましょう。

 

 

以上の順にプラグインの設定画面まで進んでいきます。

 

基本設定

 

順番にみていきましょう。

 

 

①：位置

 

記事内のどの位置に目次を設置するかここで決定します。

 

基本的にはデフォルトの通り、一番先頭の見出しの前で問題ないと思います。

 

②：表示条件

 

目次を自動生成するための見出し数を設定します。

 

設定した見出し数に、記事内の「見出し数」が達していないと目次は表示されません！

 

通常は２〜３つ程度でいいかと思います。

 

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

 

目次を自動挿入するためのコンテンツを選択します。

 

色々と項目がありますが、上２つの「post」（記事）「page」（固定ページ）にチェックで問題ありません。

 

④：見出しテキスト

 

 

 

⑤：階層表示

 

記事の見出しを段階的に表示させるか決めます。

 

チェックを外すと目次の見出し全てが左端揃えになり、記事全体の構成が視覚的にユーザーにとって分かりにくくなります。

 

ここはチェックを入れてユーザーにとって分かりやすい表示にしておきましょう。

 

⑥：番号振り

 

目次中の各見出しの先頭に番号を自動で振るかを指定します。

 

ここもユーザーにとって分かりやすくするためにチェックを入れておきましょう。

 

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

 

ユーザーが目次の項目をクリックしたときに、その見出しの先頭に移るための動作を決定します。

 

 

どちらでも構いませんが、ジャンプした方がユーザーにとってストレスがないかと思います。

 

ジャンプさせたいならチェックを外し、スクロールさせたいならチェックを入れましょう。

 

⑧：横幅

 

目次の横幅を指定できます。

 

通常は自動（デフォルト）で問題ないでしょう。

 

横幅を変えたい場合は見やすさを考慮して変更して下さい。

 

⑨：回り込み

 

なし（デフォルト）で問題ありません。

 

ここを変更するとデザインがおかしくなることがあるのでなしで大丈夫です。

 

⑩：文字サイズ

 

目次全体の文字の大きさを変更できます。

 

僕は９５（%）に設定していますが、だいたい９０〜９５（%）が適正のサイズだと思います。

 

プレゼンテーション

 

目次のデザインを変更できます。

 

色々と種類がありますが、自分好みのデザインに変更していきましょう。

 

当サイトはグレー（デフォルト）です。

 

自分なりに細かくデザインを設定したい方は「カスタム」を選択してカラーリングしていきましょう。

 

上級者設定

 

最後の設定として必ず抑えておきたいポイントがあります。

 

プレゼンテーション項目下に「上級者向け（hide）」という項目があるのでここを開き下記項目のみ編集していきます。

 

①：CSSファイルを除外

 

「CSSファイルを除外」にチェックを入れるとTable of Contents PlusのCSSを読み込まなくなり、自分で設定したCSSデザインが適用されることになります。

 

 

の順で子テーマのstyle.cssに好きなデザインコードを書いていけばそのデザインがプラグイン内に反映されます。

 

もっとも、Table of Contents Plusはこのままのデザインが見やすいのでデザインを変えているブロガーさんは少ない印象です。

 

もし、デザイン変更したい場合はチェックを入れCSSコードを記入しデザインを変更しましょう。

 

変更する前にちゃんとバックアップを取っておきましょうね！バックアップ設定がまだの方は下記事を参考にどうぞ。

関連記事

【専門知識不要】WordPressでのバックアップの取り方とUpdraftPlusの使い方

続きを見る

 

②：見出しレベル

 

この項目では、目次に表示する見出しの階層を指定できます。

 

僕は普段「h１」は使用しておらず、「h２」「h３」「h４」を使用しています。

 

 

という具合に使い分けています。

 

見出しレベルは、目次にどの階層までの見出しを表示させるかを決めるので、目次に表示させる階層が多すぎてもユーザーにとって視覚的に乱雑になり分かりにくいかと思います。

 

なので、ユーザーにとって分かりやすいように任意の見出しを２つ選択しておくのが無難でしょう。

 

人によって異なりますが、だいたいは「h１」と「h２」あるいは「h２」と「h３」が無難ですね。

 

上級者設定で設定するのは以上です。

 

他はデフォルトのままでOKです。お疲れ様でした！

 

目次の外観を細かくカスタマイズする

 

目次の外観デザインは、先ほどのプラグインの設定でも変更できますがテーマのカスタマイズ画面でも変更できますのでご紹介します。

 

 

上記手順で目次プラグインのデザイン設定画面に移行します。

 

 

僕がここで設定しているのは上記のみの項目です。

 

 

細かい設定は他にもありますが僕はシンプルに上記項目のみ設定しています。

 

目次アイコンはFontAwesomeを使用します。

 

FontAwesomeからアイコンコードをコピーして自分好みのアイコンを設定しましょう。

 

FontAwesomeへ

 

 

目次が上手く表示されないときは

 

最後に、自分の思うような目次が生成されていないときは下記項目をチェックしていきましょう！

 

 

以上の点を確認していけば問題はクリアされると思います。

 

Table of Contents Plus設定のまとめ

 

いかがでしたでしょうか。

 

WordPressで使用する目次プラグインは大きく分けて２種類ありますが、今回ご紹介したTable of Contents Plusはデザインがシンプルで分かりやすいことが大きな特徴です。

 

システム面でこれから先、不安は残りますが問題が無ければ使用継続でOKだと思います。