WordPress 目次の作り方!Table of Contents Plus の設定とカスタマイズ!

あなたのブログには目次は導入されていますか?WordPressのブログの目次の作り方はプラグインを使えば簡単です。目次を自動作成してくれるWordPressプラグイン「Table of Contents Plus」の設定から、カスタマイズする方法を解説します。

もしまだ目次を導入していないということなら、この記事を見ながらサクッと設定していってくださいね。

Table of Contents Plusのインストール

プラグイン「Table of Contents Plus」のインストールです。

  • ダッシュボードの「プラグイン」>「新規追加」をクリック!

  • キーワード欄に「table of contents plus」と入力!
  • 以下のように表示されたら「今すぐインストール」をクリック!

  • 有効化をクリック!

Table of Contents Plus(TOC+)の設定

  • 設定の中に「TOC+」と表示されていますので、コチラをクリック!

では基本設定の上から設定していきましょう。

  • ①位置:最初の見出しの前(デフォルト)のままでいいでしょう
  • ②表示条件:3
    好きな数字を設定してください。私は見出しが3つ以上あるとき目次を表示させるという意味で、3に設定しています
  • ③投稿タイプ:post と page にチェックを入れる
    post は記事のこと。pageは固定ページなどです。固定ページに表示させるかどうかは好みですが、postは、忘れずにチェックを入れておいてください。
  • ④見出しテキスト:Contents。見出しの上に表示される文字列。「目次」等、お好きな言葉を入れてください。Contents のままでも、問題ありません。
    「表示非表示切り替えボタンのテキスト」という設定があります。これは目次を表示非表示にするボタンを付けるかどうかです。私はボタンをつけるにしていますがお好みで。

  • ①② 階層表示、番号振り:チェックを入れる
    階層表示は、見出しの階層(見出し、小見出しといった場合に階層にするかどうか)と、順番に番号をふるかどうかの設定。普通にチェックを入れておけばOK.
  • ③スムーススクロール:チェックを入れる
    目次をクリックした時に、いきなりその場所にスクロールして飛ぶか、高速スクロールして移動するかの設定。高速スクロールしたほうが分かりやすいのでチェックを入れておきます。
  • ④横幅:デフォルトで
  • ⑤回り込み:なし(デフォルト)で
  • ⑥文字サイズ:本文より少し小さいほうが感じがいいので95%くらいで
  • ⑦プレゼンテーション:どんな表示がいいか好みで選びます。ここでは白を選択。

上級者向け設定に進む

  • 小文字~テーマのCSS:特に設定不要
  • ①見出しレベル:h2, h3にチェック
    どの見出しを目次として表示するかの設定です。細かい見出しまで目次に表示すると、目次自体が見づらくなるため、私の場合は h2, h3 のみにチェックを入れてます。
  • ②除外する見出し:使うパターンとしては、例えば記事最後に”関連記事”を表示している場合、その見出し(関連記事)が毎回目次に表示されるのは避けたい、と言った場合、ここにその見出しとなる文字列(この例では”関連記事”)を入れます。

  • 最後に「設定を更新」を忘れずクリック!

実際にどのように表示されるかみてみましょう。

最初の見出しの前に、目次がきれいに表示されました。簡単でしたね!

注意ポイント

見出し・小見出しを正しく使うと、目次が表示されますが、見出し小見出しの使い方が間違っていると、おかしな目次になってしまいます。

見出し・小見出しの使い方を含め、強調、箇条書きなどWordPress機能の使い方がわからないという方は以下の記事も参考にしてください。

WordPressの使い方!初心者向け投稿画面 見出し小見出し、強調、箇条書きの使い方!

WordPressの投稿画面には記事作成に便利な、様々なツールが用意されています。 ここではその中でもSEO的に重要とな ...

続きを見る

Table of Contents Plusを個別にカスタマイズ

個別に表示項目を変える方法

この記事の目次をちょっと見てみてください。小見出しも沢山あり、結構コマゴマとしてますね。

沢山の見出しが並んだ目次の場合、「小見出し(見出し3)は表示せずに、見出し(見出し2)だけ表示してスッキリしたい!」という場合があります。

全体の設定を変えると全ての記事で表示が変わってしまいますが、実は記事個別に対応できる小技があります。

この文字列を目次の表示位置に入力すると、見出し(見出し2)までの表示となります。
文字列はビジュアルモードで入れればOKです。

投稿の編集のビジュアルモードで1つ目の見出しの前(目次を入れる予定の位置)にこの文字列を入れると、見出し2だけの表示に変わります。

全体の設定は変えたくないけど1記事だけは見出し2を非表示にしたいという場合には、使える小技です。

個別に目次を非表示にする方法

記事のボリュームが少なかったり、そもそも見出しが少なく目次を表示したくない!という場合は以下の記述で個別の記事の目次を非表示にすることができます。

この文字列を目次の表示位置に入力すると、目次そのものが表示されません。

IME に「もくじ」や「もくじなし」として単語登録しておけば必要なときにすぐ使えそうです。

まとめ

プラグインを使えば目次も自分で作る必要なく自動で生成されて手間いらずです。自動で生成されるためには、見出し・小見出しを正しく使うことが必要です。

目次には、ユーザビリティ向上とSEO効果があります。目次の中に目を引くキーワードがあれば読者は本文を読み進めてくれ、記事の滞在時間も延びます。

つまり、見出し・小見出しも読者にわかりやすく興味をひくものにしていくことが重要です。目次の自動作成プラグイン「Table of Contents Plus」はぜひ設定しておきましょう!

目次を表示したりちょっとしたカスタマイズができるようになると、更に幅が広がります。

また、更にネットで収益化していきたい、他の人とは一味違うブログ運営がしてみたい、という場合には以下のメルマガにも登録してみてください。

-WordPress構築

Copyright© Netbusiness Labo , 2020 All Rights Reserved Powered by AFFINGER5.