WordPressブログ構築

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

当サイトにはプロモーションが含まれています。

Nao
複業アドバイザーのNaoです♪

あなたのブログには目次は導入されていますか?

WordPressのブログの目次の作り方はプラグインを使えば簡単です。

目次を自動作成してくれるWordPressプラグイン「Table of Contents Plus」の設定から、カスタマイズする方法を解説します。

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

WordPress 目次の作り方!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機能の使い方がわからないという方は以下の記事も参考にしてください。

ワードプレス投稿画面の使い方 見出し小見出し・強調・箇条書きの使い方!

続きを見る

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

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

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

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

この文字列を目次の表示位置に入力すると、見出し(見出し2)までの表示となります。

文字列はビジュアルモードで入れればOKです。

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

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

まとめ

プラグインを使えば目次も自分で作る必要なく自動で生成されて手間いらずです。

自動で生成されるためには、見出し・小見出しを正しく使うことが必要です。

目次には、ユーザビリティ向上とSEO効果があります。

目次の中に目を引くキーワードがあれば読者は本文を読み進めてくれ、記事の滞在時間も延びます。

つまり、見出し・小見出しも読者にわかりやすく興味をひくものにしていくことが重要です。

目次の自動作成プラグイン「Table of Contents Plus」はぜひ設定しておきましょう!

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

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

Naoのお墨付き

おすすめ商品一覧

おすすめ商品一覧はこちら

 

ネットで稼ぐ無料メールマガジン

初心者最短ノーリスク月収10万円に導く!

今すぐ無料で登録する!

「ネットで稼ぐ無料メールマガジン」今すぐ無料で登録する!

お問合せ・無料相談

Naoに悩みを相談してみたいあなたへ

お問合せはこちらから

-WordPressブログ構築