【コツ5つ】続きが読まれるブログ目次の作り方【プラグイン&手作りで簡単実装】

ブログに目次を作ってないと、機会損失ですよ？

この記事で紹介する「ブログ目次の作り方」を実践すると、ユーザーファーストな目次を作ることができます。

そこで本記事では、ブログ目次の作り方や5つのコツと解説します。

この記事を読むと、ブログに目次を設定する重要性や理由、具体的な作り方やそのコツをマルっと理解できます。

結論、目次の作り方は2つだけ覚えればOKです。それが「WordPressプラグイン｜Table of Contents Plus」と「手動でリスト作成」する方法です。

また、ブログ目次を作るコツとしては、下記のとおりです。

• コツ①：常に目次を表示させる
• コツ②：リンクスクロールさせる
• コツ③：すべての見出しを載せない
• コツ④：数字を入れる
• コツ⑤：スマホ表示を意識する

目次を作ることで、事前に内容を理解でき、必要な情報にサクッとアクセスできます。本でも目次があるよう、ブログでも「紳士」を目指しましょう。

ブログにおける目次の役割とは？

本でも「目次」があるよう、ブログの記事内容も「目次」で伝えましょう。

じゃあ「誰に？」と思うかもですが、それは「ユーザー」と「検索エンジン」ですね。双方に記事内容を目次で示すと、記事が評価され、読まれやすくなります。

• その①：ユーザーに情報を届ける
• その②：検索エンジンに情報を届ける

その①：ユーザーに情報を届ける

目次を設定することで、ユーザーに記事内容をわかりやすく伝えることができます。そこで、本記事の「目次」を振り返ってみましょう。

このように、記事内容がひと目でわかりますね。さらに、目次がリンクされてれば、必要な情報にサクッとアクセスできます。

ユーザーはすべての文章を読むワケではありません。読者目線に立って、ブログ記事を作ることが大切ですよ。

その②：検索エンジンに情報を届ける

ここが本とは一味違う点でして、ウェブページの評価は「検索エンジン」が決めます。

つまり、目次を作り込むことで、検索エンジンに「おっ、ちゃんと目次ありますね」と構造的に記事内容を伝えることができます。

このように目次は、ビジュアル&構造的に記事内容を伝える役割があり、ユーザーと検索エンジン双方に、適切に情報を伝えられるよう設定することが大切です。

ブログに目次を作るべき理由3つ

目次の役割を理解できたと思いますが、さらに目次の重要性を深掘りしますね。

• 理由①：記事内容を冒頭で理解できる
• 理由②：読みたいところにすぐ飛べる
• 理由③：検索結果に目次が表示される

理由①：記事内容を冒頭で理解できる

大切なのは「冒頭で理解できる」でして、書き出しは重要です。

そもそも読者は「悩みを解決したい」と思って検索します。たまたま辿り着いたあなたの記事に目次がなければ、求める情報にアクセスしづらく、離脱するかもしれません。

つまり、目次を作ることで、検索ユーザーに必要な情報をいち早く届けることができます。

もったいぶらず、書き出しで目次を提示しましょう。

>> 関連：【重要】ブログリード文（書き出し）で心を掴め！誰でもマネできる書き方テンプレート

理由②：読みたいところにすぐ飛べる

また「読みたいところにアクセスできる」配慮も大切ですね。

目次すらないと、すべてを読まないと答えに辿り着けません。しかし、これはダルいです。冒頭で「あなたの悩みに対する答えはココですよ」と示した方が親切ですよね？

必要な情報にサクッとアクセスできる「おもてなし」が大切でして、目次を設定しない =「気が利かないブログ」を意味します。

Googleも「ユーザーファースト」を重視しており、目次を設定しないとは、めぐりめぐって、自分に損ですよ。

理由③：検索結果に目次が表示される

実は、目次は検索結果にも表示されます。たとえば、下記のようなリンク表示を見たことありませんか？

厳密には 目次 =「見出し」ですが、適切に設定することで、検索エンジンに記事の重要性が伝わりやすく、検索結果から知りたい情報にダイレクトでアクセスできます。

繰り返しですが、ユーザーは悩みを解消するためにググります。その悩みが検索結果で「ピョコン」と表示されてたら、思わずクリックしそうですよね？

このように、読者の悩みを目次で代弁すると、検索結果にも目次（見出し）が出現し、アクセスアップに貢献できます。

ユーザーファーストとは、こーいった「気遣い」のできる人を指します。ぜひ、この記事を読んでるあなたも「紳士」を目指しましょう。

ブログの目次を作る方法2つ

ブログにおける目次の重要性を理解できたと思うので、目次の作り方を解説します。

• 方法①：WordPressプラグイン
• 方法②：手動でリスト作成

方法①：WordPressプラグイン

目次は「プラグイン」を使うと、カンタンに設定できますよ。

むずかしいプログラミングやデザイン知識は必要なく、ボタンをポチポチっとするだけで、細かな調整も可能です。

本記事では人気プラグイン「Table of Contents Plus」の実装方法を解説しますね。

※当サイトでも本プラグインを実装していましたが、2023年9月頃のアプデにて、バグが発生したため削除しました。

Table of Contents Plus の使い方

ます、インストール後 >「有効化」>「設定」>「TOC+」に進み、カスタマイズします。

  目次の位置

まずは、目次の「位置」を決めましょう。

基本的には「最初の見出しの前」が一般的です。アイキャッチ画像を表示させないなら「記事の一番上」とかでもOKです。

  目次の表示条件

目次に表示させる見出しの条件を設定します。

上記の場合「投稿記事に、見出しが2つ以上ある場合に表示」という設定です。

  目次の見出しテキスト

目次の「タイトル」と、目次の「表示・非表示」も設定しましょう。

許可すると、下記のように、目次を開閉するように設定できます。

とはいえ、後述しますが、目次は常にオープンさせてたほうが利便性が良いので、チェックを外すことをおすすめします。

  目次の階層・番号・スクロール

あとは、見出しの細かな設定ですね。

特にアンカーリンクは、ジャンプ設定（デフォルト）のままだと、リンク先に遷移したことに気づきにくいですね。なので、滑らかにスクロールさせるよう設定しましょう。

  目次の外観

見出しの外観デザインを設定します。

僕は上記のように設定しております。続いて「上級者向けの設定」を行います。

  上級者向けの設定

以上で、TOC+の設定はおわり。忘れずに「設定を更新」から保存しましょう。

方法②：手動でリスト作成

もしくは「手動作成」もおすすめです。

ちょっとメンドくさいかもですが、慣れれば3分ほどで作れます。プラグインも削減でき、維持管理や不具合も少なくなるので、意外とメリットは大きいですね。

目次を手作りするなら「WordPressテーマ」を導入しつつ、デザインテンプレートをカスタマイズするとカンタンですよ。

 目次の作り方

必要な項目は「目次用リスト」と「見出し」です。ここでは、H2見出し用の目次を作り、スムーススクロールを実装していこうと思います。

まず、WordPress編集画面 >「テキストモード」にて、下記のよう「目次用リスト」とそれに該当する「H2見出し」をHTMLで作ります。

• リスト：リンクさせ、URLを見出しのID名にする
• 見出し：IDを付与させる（id="ここに専用のid名"）

これにて、スクロール機能付きの目次が完成しました。しかしデザインはシンプルなので、あとはCSSでカスタマイズしてみてください。

WordPressのテーマだと、ボックスデザインや目次が用意されてます。それを使っておしゃれにデザインするのもアリかと。

毎回ゼロから作るのはメンドくさいと思うので、メモ帳などに「テンプト」をまとめておくと良いかと思います。

ブログで読まれる目次を作るコツ5つ

魅力的な目次を作るコツは、5つあります。目次は、ユーザーに活用してもらうことで、初めて意味をなします。

• コツ①：常に目次を表示させる
• コツ②：リンクスクロールさせる
• コツ③：すべての見出しを載せない
• コツ④：数字を入れる
• コツ⑤：スマホ表示を意識する

コツ①：常に目次を表示させる

目次は、常に表示させること。むしろ「表示・非表示」の選択肢を与えてはいけません。

たまに目次が閉じられてる記事を見かけますが、ユーザーはわざわざタップしないといけません。それに、目次を見落とす可能性だってあります。

その存在すら気づかれないなら、目次を設定してる意味がありません。必要な情報にサクッとアクセスできるよう「おもてなし」を体現しましょう。

コツ②：リンクスクロールさせる

目次には「スクロール機能」を付与し、該当箇所にちゃんと飛ベるようにしましょう。

ユーザーの探している情報がページ内の特定の場所にまとめて記載されている場合、ユーザーがその場所に直接ジャンプすることができるので、ページ全体をスクロールしながら探す手間が省けます。引用元：Google検索セントラル｜ページにセクションを特定する分かりやすいアンカーを設定しましょう！

必要に応じて目的地まで飛べるため、文章を読むストレスが減ります。SXO（Search Experience Optimization）の観点からも、検索体験の最適化は重要です。

たまに、違った箇所に飛んだり、そもそもリンクされてない目次を見かけます。しかしこれだと、ユーザー体験を損ね、離脱されやすくなります。

こーいった泥臭い作業をやる人は少ない。ユーザー目線に立てば、スクロール機能は絶対あったほうが良いと思いませんか？

 スムーススクロールの実装方法

プラグイン「Table of Contents Plus」でも可能でしたが、サイト全体で実装したい場合は、下記のコードをWordPressの「追加CSS」に記載しましょう。

これにて、リンクをクリックした際、滑らかにスクロールジャンプできるようになります。

コツ③：すべての見出しを載せない

目次の項目は「H2〜H3見出し」までとしましょう。それ以上を載せると、階層が深くなりすぎて、逆に読みづらくなります。

しかし、目次をプラグインで実装すると、記事をリライトした際、バグの原因になります。各見出しには「ID」が付与されており、それが変わってしまうからです。

記事のボリューム感にもよりけりなので、ユーザーにとって必要な情報かどうかを意識しつつ、ベストな目次を作りましょう。

>> 関連：【コツ7つ】読まれるブログ見出しの作り方【SEOより読者にフォーカスせよ】

コツ④：数字を入れる

数字を入れると「結論」「具体性」が増します。

• 理由3つ、おすすめ7選
• 3つのコツ、7ステップ
• 3分でできる、7%UPさせる方法

また、見出し内には「理由①：」「1.〜」などと、数字を割り振るのもおすすめです。

このように、見出し内には適切に「数字」を入れつつ、ユーザーファーストを意識してみてください。

コツ⑤：スマホ表示を意識する

特にスマホでみると、横幅がPC画面よりずっと狭いです。ブログはPCで作ることが多く、意識しないと、見た目がとても悪くなります。

スマホでも、なるべく1行に収まるようにしましょう。CSSやプラグイン設定で、フォントサイズを少し小さくしてみるのもおすすめです。

ブログに目次が不要なケース

そのようなケースは、下記のブログ記事が該当します。

• 日記やエッセイ
• 文字数の少ない記事（500〜1,000字）
• インデックス登録させない記事（noindex）
• 固定ページ

目次の役割とは、ユーザーや検索エンジンに記事内容を正しく、わかりやすく伝えることでしたね？

内容が薄く、情報量の少ない記事や自己満なポエム記事には、目次は入りません。

ブログの目次作成でよくある質問4つ

ブログに目次を設定し利便性をあげよう

本記事では、WordPressブログの目次の作り方を丁寧に解説しました。

目次の作り方は「WordPressプラグイン」と「手動でリスト作成」する方法がありましたが、どちらもマスターしておくことをおすすめします。

ユーザーの求める情報が見つからなければ「即離脱」されます。つまり、平均滞在時間が悪くなり、SEOでも検索上位を狙いにくくなることを意味します。

僕もブログを始めてまもない頃は、目次の重要性を知らず、メンドくさいからサボってました。しかし、目次を設定することで、多少なりとも、記事が読まれるようになりました。

たしかに、WordPressブログで目次を作るのはメンドいですが、サボるとマジ機会損失です。この記事を読み終えたら、ユーザーファーストな目次を作ってみてくださいね。

WordPressブログの始め方

【無料】たった10分でできるWordPressブログの始め方【エックスサーバー】

続きを見る

最後までお付き合いありがとうございました。僕のTwitter（@ImperialMiyavi）もフォローしてもらえたら嬉しいです。ブログ運営に関するお役立ち情報を発信しており、ブログとセットで勉強できます！