目次作成プラグイン「Table of Contents Plus」の設定方法

Table of Contents Plusアイキャッチ WordPress

WordPressサイトに目次を自動で作成してくれる便利な無料プラグイン「Table of Contents Plus」。導入方法や設定方法・カスタマイズ方法を説明します。

目次設置のススメ

訪問者がサイトを閲覧するときに、目次があると便利ですよね。
WordPressでは、プラグインの導入で簡単に目次が作成できます。

そんな目次機能をWordPressサイトに簡単に追加・カスタマイズできるプラグイン「Table of Contents Plus」の導入と設定方法を紹介します。
Table of Contents Plusは、ページ内の見出し(Hタグ)を取得して自動で目次にしてくれるほか、目次の表示・非表示の切り替えや各項目へのスクロールなど、目次に関するカスタマイズが一括して設定できる便利なプラグインです。

Table of Contents Plusの導入

まずは、プラグイン「Table of Contents Plus」をインストール&有効化させましょう。

  1. WordPressの管理画面から「プラグイン」>「新規追加」と進みます。
  2. 右上にあるプラグインの検索ウィンドウに「Table of Contents Plus」と入力すると、プラグインが表示されます。

    Table of Contents Plusインストール画面

    ※似たような名前のプラグインがたくさんあるので、間違えないように注意!

  3. 「Table of Contents Plus」の「今すぐインストール」ボタンを押すとインストールされます。
    インストールが完了すると、「有効化」の青いボタンが表示されるので、クリックして有効化してください。問題なくプラグインが有効化されると、画面上部に「プラグインを有効化しました。」と表示されます。
  4. 以上で、「Table of Contents Plus」プラグインの導入は完了しました。

Table of Contents Plusの設定方法

Table of Contents Plusで目次の設定をしていきます。

WordPressの管理画面の「設定」の中に「TOC+」という項目が追加されているので、そちらをクリックすると、Table of Contents Plusの設定画面が開きます。
※初期では「基本設定」のタブが選択された画面が開きます。

基本設定

基本設定では、目次の見た目のデザインや、表示させるテキスト、どのタイプのページに表示させるかといった設定が行えます。

Table of Contents Plus基本設定画面

  • 位置
  • 目次を表示させる位置を指定します。
    最初の見出しの前(デフォルト)、最初の見出しの後、上(記事タイトよりも上)、下(最下行)の4つから選びます。

  • 表示条件
  • ページ内に見出しがいくつあるときに目次を表示をさせるか、という条件を指定できます。選択範囲は2~10個まで。

  • 以下のコンテンツタイプを自動挿入
  • どの種類のコンテンツに目次を設置するかを選択指定することができます。

    □post(投稿ページ)
    □page(固定ページ)
    □custom_css(カスタムCSS)
    □customize_changeset(カスタマイズチェンジセット)
    □oembed_cache(oEmbed で埋め込まれた URL のキャッシュデータ)
    □user_request(ユーザーリクエスト)
    □wpcf7_contact_form(コンタクトフォーム7で作られたお問い合わせフォーム)

    ※実際、目次は投稿ページのみに設置するのが一般的だと思います。

  • 見出しテキスト
  • 目次自体にタイトルをつけるか、つける場合のタイトル名、ユーザーによって目次の表示・非表示切り替えを可能にするか、許可する場合の表示/非表示切り替え時に表示させるテキスト、ページを開いた初期時には目次項目が開いていない状態にするか、など目次に関するテキストを設定する項目です。

  • 階層表示
  • 目次を階層ありにするかどうかの設定を行います。

  • 番号振り
  • 目次に番号を自動付加するかどうかの設定を行います。

  • スムーズ・スクロール効果を有効化
  • スムーズ・スクロールとは、リンク先にいきなりジャンプするのではなく、ニュルッと滑らかにスクロールして、リンク先まで移動する効果のこと。
    目次に並ぶ各項目へジャンプして移動するか、スムーズ・スクロールで移動するかの設定を行います。

  • 外観
  • 外観では、目次フレームの横幅、回り込み、文字サイズ、プレゼンテーション(見た目のデザイン)を設定できます。

上級設定

上級設定は、特定のページでのみ表示させる、特定の見出しを除外するなどといった高度な設定のほか、SEO観点を考慮した上級者向けのカスタマイズが行えます。基本設定の一番下に上級設定を行うためのタブボタンがあります。

  • 見出しレベル
  • Table of Contents Plus上級設定・見出しレベルの設定

    上級設定は、特別な設定をしたい場合を除いてほとんどいじる必要はありませんが、でぜひとも設定しておきたいのは、「見出しレベル」の設定です。
    見出しレベルは、目次にどの見出しの階層まで表示させるかを指定するための項目で、初期値は「heading 6 – h6」(H6タグ)まで表示されるように☑が入っています。
    目次の項目を多く表示させてしまうと、目次自体のボリュームが大きくなり、見づらくなってしまいます。またSEOを考慮しても、見出しタグはH3タグまでの表示で十分です。

    チェックボックスに☑を入れると表示、チェックを外すと非表示に設定されるので、H4~H6タグの☑は外しましょう。

以上、基本設定と上級設定の全ての設定が完了したら、最後に下にある「設定を更新」という青いボタンを押して、「Table of Contents Plus」の設定は完了です。

Table of Contents PlusのCSSカスタマイズ

Table of Contents Plusは、設定画面で使用に問題ないほどの設定が行える優秀なプラグインですが

  • 目次フレームの色を変更したい
  • 目次を左右中央に配置したい
  • 目次番号の色を変更したい

など、デザイン的なカスタマイズは、各自CSSに記述を追加してカスタマイズしなければなりません。
例えば、Table of Contents Plusで作る目次は、初期設定では左寄せで配置されます。この配置を左右の中央に配置したい場合は、CSS記述によるカスタマイズが必要ということです。

思いつく代表的なカスタマイズ箇所についていくつか、方法を紹介します。

WordPressの管理画面から「外観」>「テーマの編集」へと進み、お使いのテーマの「style.css」を開いて、最下行に追加記述を行ってください。
※このカスタマイズは、CSSが全くわからないという方には難しいです。自己責任で行っていただきますようお願いします。

    #toc_container(目次フレーム)に記述

  • 目次を左右中央に配置する
  • margin: 0 auto 1em;

    余白の左右をautoにして、左右中央に寄せます。

  • 目次のフレーム色を変更する
  • border: 1px solid #aaaaaa;

    カラーコードの部分「#aaaaaa」を好きな色のコードに変更してください。※pxを変更で太さ、solidを変更で枠線の線種が変更できます。

  • 目次の背景色を変更する
  • background: #f9f9f9;

    カラーコードの部分「#f9f9f9」を好きな色のコードに変更してください。

  • 目次のフォントカラーを変更する
  • #toc_container li a(目次の見出し)に記述

    color: #666666;

    カラーコードの部分「#666666」を好きな色のコードに変更してください。

  • 目次の見出しナンバー色を変更する
  • #toc_container li a span(目次の見出しナンバー)に記述

    color: #4855a5;

    カラーコードの部分「#4855a5」を好きな色のコードに変更してください。

    Table of Contents Plusでサイトマップも作れる

    「Table of Contents Plus」には、デフォルトでサイトマップが作成される機能がついています。
    ただし、「Table of Contents Plus」のサイトマップ機能はカスタマイズ性が低く、融通が効きません。

    サイトマップはユーザーがサイト構造を理解したり、検索エンジンにサイト構造を認識させたりするために、設置したい大事なページですが、「Table of Contents Plus」のサイトマップでは、ユーザビリティ・クローラビリティともに目的を果たすための機能が不十分ですので、サイトマップは別のプラグインを利用することをおすすめします。

    ※「Table of Contents Plus」のサイトマップを利用する場合は、新規にサイトマップ用のページを作成し、新規ページの編集エディタにショートコード[sitemap]を貼りつけるだけで、設定完了です。

    Table of Contents Plusは設定が簡単。SEO対策にも♪

    目次は、訪問者がページ構造を理解するのに役立つとともに、読みたい項目があるかどうか確認したり、すぐに読みたい場所にワープしてもらう機能にもなります。つまり、ユーザビリティー向上に繋がります。

    ユーザビリティーが向上すると、訪問者がページを開いてもすぐに閉じてしまう、ページの途中で閉じてしまうといった離脱防止にも役立つので、SEO面でも有益ですね。さらにSEO効果の話を掘り下げると、内部リンク構造獲得の役割もしてくれます。

Comments