自分のページに目次を設定したいけど、難しそう。。
目次設定は必須?
どんなメリットがあるの?
簡単な目次の導入方法が知りたい!
この記事ではこういった疑問にお答えしていきます。
目次
目次を設定するメリット
その1:利便性向上→SEO向上
目次があると記事全体の内容がひと目で分かる他、目次から読みたい部分(求めている情報)に飛ぶことができるので読み手の利便性が高まります。
ブログのように10,000字以上あるようなサイトだと目次は必須と言えます。
一般的にページの滞在時間が長いことがSEOの評価がいいとされますが、
ユーザーの求める情報を的確に素早く提供することもSEO向上の観点においてもプラスになると考えられます。
その2:検索結果に目次が表示される
以下のように、目次を設定しているページに限り、Google検索結果でページタイトルの下に設定した見出しが表示されます。
※「SEO」で検索した結果
ユーザーが求めている情報が目に入りやすくなるため、
クリック率が上がるなどの効果がありますね^^
その3:記事の編集に便利
これは編集者目線のメリットですが、目次を設定することにより、
きちんと内容整理された記事を作成できているか、
読者にとって読みやすい順番になっているかなどを確認するのにも役立ちます。
「Table of Contents Plus」を使った目次作成の仕組み
このプラグインを使うと以下のような目次が最初の見出しの上に自動作成されるようになります。
このように本文中の見出しが集約されたものが目次です。
・WordPressでは、HTMLのhタグが見出しにあたります。
hタグは、<h1>〜<h6>までの階層があり、
基本的に<h1>が1番大きな見出しで、<h6>が1番小さな見出しとなります。
・こちらのプラグインでは本文中の見出しを集めて目次が作成されるので、
ページ内に見出しが全ないと、目次は表示されませんので注意しましょう!
・プラグインを導入すると、過去記事にも見出しが表示されます。
(特定の記事に見出しを表示しない方法もあり(後ほど解説))
それでは実際に目次を設定していきましょう^^
初心者むけに解説していますので、安心してゆっくり進めていきましょう。
目次設定方法を解説!
今回はおそらく目次設定が一番簡単にできるプラグイン
「Table of Contents Plus」を使って
目次設定手順を解説していきたいと思います。
「Table of Contents Plus」のインストール方法
(1)wordpressのプラグインタブを開き、「新規追加」をクリック
(2)検索欄にて「Table of Contents Plus」を検索、「今すぐインストール」
(3)インストールが完了したら「有効化」
「Table of Contents Plus」の基本設定
プラグインの導入が完了したら、目次を表示できるように設定していきます^^
(1)「設定」-「TOC+」を開く
インストール、有効化が完了すると、wordpressの設定タブ内に「TOC+(Table of Contents Plus)」が表示されますので
そちらをクリック。
(2)「基本設定」タブで、順番に設定していきます。
①表示条件
表示する見出しの数が、本文中に合計いくつ以上あるときに目次を表示させるかの設定。
ここでは「3つ以上見出しがあるときに目次を表示」と設定。
②以下のコンテンツタイプを自動挿入
目次を自動挿入するページを設定。
今回は、投稿記事のページに目次を表示させたいので「post」にチェックを入れる。
③見出しテキスト
目次のタイトル部分の設定。英語でも日本語でもOK。
<例>
※英語 :Contents、Page Contents
※日本語:目次、コンテンツ、ページコンテンツ
④スムーズ・スクロール効果を有効化
目次をクリックした際にその項目へパッと切り替わるのではなく、
シューっとスクロールされるようになる。
⑤目次のデザイン
wordpressのスタイルや好みに合わせて変更可能。
⑥「設定の更新」(完了)
目次が表示されているか、ご自身のページを確認してみてください^^
詳細設定
ここでは、基本設定に加え、便利な機能を解説していきたいと思います。
操作は簡単ですので、ぜひ参考にしてみてください^^
任意の場所に目次を表示させる
デフォルトの設定では、一番最初の見出しの上に目次がくるようになっています。
これを本文中の任意の場所(どこにでも)に変更する方法です。

変更後プレビューで見ると、一番上の見出しの下に変更されました!
任意のページで目次を非表示
決まった投稿に目次を表示させたくない場合の手順は、

プレビューで確認し、設定した投稿のみ目次が非表示になっていればOKです。
振り番号を消す
デフォルトの設定では、目次の各項目の前に番号が振られますが、
こちらの番号を表示させたくない場合、以下のように先頭の番号を消す方法です。
「基本設定」タブ内の「番号振り」の項目のチェックを外します。
階層表示を消す
自動で目次作成される際に、h2、h3タグなどの階層による区別をなくし、
先頭の見出しから順番に表示させたい場合の設定です。
「基本設定」タブ内の「階層表示」の項目のチェックを外します。
不要な見出しを消す
以下のように、見出しに表示したくない項目(「まとめ」など)が表示される場合
(1)「基本設定」タブ内の一番下にある「上級者向け(表示)」をクリック
(2)「除外する見出し」欄に非表示にしたい目次のタイトル名を入力します。
(振り番号は不要)
なお、今回の例では「まとめ」という見出しを除外しましたが、
サイト全体の設定になるので、複数の記事に「まとめ」という見出しがある場合、
全ての記事の目次から「まとめ」という項目が消えます。
それぞれのパターンで以下のように「除外する見出し」欄に入力します。
複数設定する場合はそれぞれの設定を(|)で区切ります。大文字と小文字の区別なし
(例)「果物」から始まる見出しを非表示にする
→「果物*」と入力
■指定したキーワードが含まれる見出しを非表示
(例)「果物ダイエット」が含まれる見出しを非表示にする
→「*果物ダイエット*」と入力
■複数の見出しを非表示
(例)「リンゴ」「バナナ」「ミカン」という複数の見出しを非表示
→「リンゴ|バナナ|ミカン」と入力
目次に表示する見出しの階層を設定する
どの階層の見出しを目次に表示するかを設定する方法です。
以下の例では、h2,h3の見出しを目次に表示する設定から、
h1、h2タグの見出しのみを目次に表示(h3タグ以降の階層の見出しは非表示)する設定に変更しています。
(1)「基本設定」たぶの一番下にある「上級者向け(表示)」をクリック
(2)「見出しレベル」で表示したい階層のタグのみにチェックをつける。
目次の表示条件を「3つ以上見出しがあるとき」と設定した場合
「見出しレベル」で設定した階層のタグが本文中に3つ以上ないと、目次自体が
表示されません。
表示する見出しの数が、目次表示の前提条件以上であることを確認してください。
以上、wordpressで目次を設定する方法でした^^
最後までご覧いただきありがとうございました!
少しでもブログ運営のお役に立てれば幸いです。