WordPress 目次の作り方 !初心者でもできるプラグインありとなしの方法

WordPress 目次の作り方 !初心者でもできるプラグインありとなしの方法

「記事に目次を付けた方がいいって聞くけど、どうやって作るの?」——WordPress初心者の方からよくいただく質問のひとつです。

WordPressの目次は、記事の内容を読者に素早く伝えるだけでなく、検索エンジンへのアピールにもつながります。それだけに「早めに設置しておいたほうがよかった」と後悔する方も少なくありません。

この記事では、WordPress 目次の作り方を「プラグインを使う方法」と「テーマ機能を使う方法(プラグインなし)」の2つに分けて、初めての方でも迷わず設置できるように解説します。自分の環境に合った方法がすぐに見つかる構成になっていますので、ぜひ最後まで読んでみてください。

読み終わる頃には、「自分でも今日から設置できそう」と感じていただけるはずです。

この記事を書いた人

Webデザイナー・Webコンサルタント
Web制作会社、Web担当者を経て独立。17年以上の実務経験で培った制作スキルとSEOノウハウを活かし、現在はSTARRY代表としてWordPressサイト制作・集客サポートを提供。ランサーズ認定ランサー。ランキング上位受賞多数。

目次

WordPressの目次とは?設置するとどうなるの?

WordPressの目次とは、記事内の見出しを自動的にリスト化して、記事の冒頭に表示するナビゲーションのことです。

本や教科書の「目次」と同じ仕組みで、記事のどこに何が書いてあるかをひと目で伝えます。目次の各項目をクリックすると、そのセクションに直接ジャンプできるのが特徴です。

WordPressでは、プラグイン(かんたんに言うと、機能を後から追加できる拡張ツールのこと)を使うか、テーマ(かんたんに言うと、サイトの見た目やレイアウトを決める設計図のこと)の機能を使うことで、難しいコードを書かずに目次を自動生成できます。

【画像提案:記事冒頭に目次が表示されたブログ記事のキャプチャ例】

目次を設置する前と後の違いを体感するには、実際に目次ありの記事を読んでみるのが一番早いでしょう。「あ、こういう機能のことか」とすぐに理解できるはずです。

次のセクションでは、目次を設置することで得られる具体的なメリットを確認してみましょう。

WordPress目次を設置する4つのメリット

目次を記事に設置すると、読者にとっても、検索エンジンにとっても、うれしい効果があります。主なメリットは4つです。

記事の内容が一目でわかる

目次があると、読者は記事を読む前に「この記事で何が得られるか」を確認できます。

「自分の知りたいことが書いてある」と判断できれば、読者は安心して記事を読み進めます。逆に目次がない場合、読者は記事全体をスクロールして確認しなければなりません。多くの場合、スクロールの途中で離脱してしまいます。

実際の制作現場では、長文の記事(2,000文字以上が目安)になるほど、目次がある記事とない記事で読者の滞在時間に差が出るケースが多く見られます。読者が「全体を把握してから読む」という行動を取りやすくなることが、その理由のひとつです。

読みたい箇所にすぐジャンプできる

目次の各項目はリンクになっており、クリックすると該当のセクションに移動します。これを「ページ内リンク(アンカーリンク)」と言います。

たとえば「設定方法だけ知りたい」という読者は、目次から「作り方」のリンクをクリックするだけで、すぐに必要な情報にたどり着けます。読者の時間を節約できることは、ユーザー体験(かんたんに言うと、読者が記事を読む際の快適さのこと)の向上につながります。

目次のない記事に比べて、読者が目的の情報にたどり着くまでの時間が短縮されます。その結果、読者の満足度が上がり、再訪問にもつながりやすくなります。

検索結果に目次が表示されることがある

Googleの検索結果に、記事の目次項目が表示されることがあります。これを「サイトリンク」と呼びます。

サイトリンクが表示されると、検索結果画面でより多くのスペースを占有できます。目を引きやすくなるため、クリック率(CTR)が向上する効果が期待できます。ただし、サイトリンクの表示はGoogleが自動的に判断するもので、目次を設置すれば必ず表示されるわけではありません。あくまで「表示される可能性が上がる」と理解しておいてください。

H3:SEOにもよい効果が期待できる

目次を設置すると、ページ内のリンク構造が整理されます。Googleはページ内リンクを手がかりにして、記事の構造と内容を把握します。そのため、目次の設置がSEO(かんたんに言うと、検索エンジンでの表示順位を上げるための取り組みのこと)に良い影響を与えると考えられています。

さらに、目次によって読者の滞在時間が伸びることも、間接的にSEO評価へのプラス要因になると言われています。ただし、目次だけでSEO順位が大きく変わるわけではなく、記事の内容の質が最も重要であることは念頭に置いておきましょう。

メリットを確認できたところで、次は正直なところ、目次にはデメリットや注意点もあることをお伝えします。

WordPress目次を設置するデメリットと注意点

メリットが多い目次ですが、状況によっては逆効果になるケースや、注意が必要な点もあります。プロの現場でも意識している注意点をお伝えします。

目次が逆効果になるケースがある

目次は、情報量の多い長文記事ほど効果を発揮します。一方で、以下のようなケースでは目次を設置しない方がよい場合があります。

見出しが2〜3個しかない短い記事の場合、目次に表示されるリンクが少なく、かえってページの見た目が散漫になります。また、単一のトピックをシンプルに伝えることを目的とした記事も、目次を入れることで読み進める流れが途切れてしまうことがあります。

「すべての記事に目次を入れるべき」と思いがちですが、記事の内容と長さに応じて判断するのがプロのアプローチです。後述するプラグインでは、記事ごとに目次の表示・非表示を切り替えることができますので、ご安心ください。

ページの表示速度に影響する場合がある

目次プラグインを導入すると、プラグインのCSSやJavaScriptがページに読み込まれます。サイトの表示速度に影響するケースがあるため、不要なプラグインを増やしすぎないことが大切です。

とはいえ、主要な目次プラグインは軽量に設計されており、通常の環境では体感できるほどの速度低下が起きることは少ないです。過度に心配する必要はありませんが、サイト全体のプラグイン数が多い場合は定期的に見直すとよいでしょう。

注意点も理解できたところで、いよいよ実際に目次を作る方法を見ていきましょう。

プラグインを使って目次を作る方法(プラグインあり)

プラグインを使う方法は、最も手軽で確実な目次の設置方法です。インストールして設定するだけで、記事内の見出しを自動的に読み取り、目次を生成してくれます。コードを書く必要はなく、WordPressの管理画面から操作できます。新しい記事を書くたびに自動で目次が生成されるため、記事ごとの手間もかかりません。

使用しているテーマに目次機能が搭載されていない場合は、この方法がおすすめです。

おすすめプラグイン「Easy Table of Contents」のインストール

WordPress.org 日本語
Easy Table of Contents 使いやすい目次を、ページの内容に基づき完全自動で生成し表示します。

「Easy Table of Contents」は、設定がシンプルで日本語対応も進んでいることから、初心者に特におすすめのプラグインです。WordPress公式ディレクトリで配布されており、無料で利用できます。

インストール手順

  1. WordPress管理画面の左メニューから「プラグイン」→「新規プラグインを追加」をクリックします。
  2. 検索欄に「Easy Table of Contents」と入力します。
  3. 表示されたプラグインの「今すぐインストール」をクリックします。
  4. インストールが完了したら「有効化」をクリックします。

以上で、プラグインの導入は完了です。次は設定を行います。

【画像提案:WordPress管理画面のプラグイン検索画面キャプチャ】

基本設定と表示のカスタマイズ

インストールが完了したら、設定を行います。管理画面の「設定」→「目次」からアクセスできます。

特に確認してほしい設定項目は以下の3つです。

「自動挿入」の設定では、目次を自動で表示するコンテンツの種類を選びます。ブログ記事に目次を表示したい場合は「投稿」にチェックを入れてください。

「表示条件」の設定では、見出しが何個以上ある記事に目次を表示するかを設定します。初期値は4つに設定されていることが多いですが、「3つ以上の見出しがある記事に表示する」設定がおすすめです。

「見出しレベル」の設定では、目次に表示する見出しの階層を選びます。H2とH3のみにチェックを入れるのが見やすくなるポイントです。H4以降まで表示すると、目次が長くなりすぎて読みにくくなります。

設定を変更したら「変更を保存」をクリックして完了です。記事を開いて目次が表示されていれば、設定は成功です。

もうひとつの選択肢「Table of Contents Plus」

WordPress.org
Table of Contents Plus A powerful yet user friendly plugin that automatically creates a table of contents. Can also output a sitemap listing all pages and categories.

「Table of Contents Plus(TOC+)」は、Easy Table of Contentsと並んで人気が高い目次プラグインです。細かなカスタマイズが得意で、こちらも無料で利用できます。設定画面は「設定」→「TOC+」からアクセスでき、基本的な設定項目の構成はEasy Table of Contentsと同様です。

2つのどちらを選ぶか迷ったときは、「Easy Table of Contentsはシンプルさ優先、TOC+はカスタマイズ重視」と覚えておくとよいでしょう。初めての方にはEasy Table of Contentsが取り組みやすいです。

プラグインを使う方法の次は、プラグインをインストールせずに目次を設置できる「テーマ機能を使う方法」を見ていきましょう。

H2:テーマ機能を使って目次を作る方法(プラグインなし)

使用しているテーマによっては、目次機能が最初から組み込まれている場合があります。その場合は、プラグインをインストールすることなく、テーマの設定画面を操作するだけで目次を設置できます。代表的なテーマとしては「SWELL」と「Cocoon」が挙げられます。

SWELLで目次を設置する方法

SWELLは有料テーマですが、目次機能が標準で搭載されており、設定がシンプルです。

管理画面の「外観」→「カスタマイズ」→「投稿・固定ページ」→「目次」から設定画面にアクセスできます。「目次を表示する」をONにするだけで、記事の最初のH2見出し直前に目次が自動生成されます。表示する見出しレベルや、折りたたみの有無もここで設定できます。

Cocoonで目次を設置する方法

Cocoonは無料で使えるテーマで、こちらも目次機能を標準搭載しています。

管理画面の「Cocoon設定」→「目次」タブから設定画面にアクセスできます。「目次を表示する」にチェックを入れ、表示したい見出しレベルを選択して保存するだけです。デザインのカスタマイズも同じ画面から行えます。

テーマ機能を使う場合の重要な注意点

テーマの目次機能を使う場合は、「別途プラグインを追加しないこと」が最も大切な注意点です。

テーマに目次機能が内蔵されているにもかかわらず、さらに目次プラグインを有効にしてしまうと、記事の中に目次が2つ表示されてしまいます。実際の制作現場でも、このトラブルに気づかないまま公開してしまうケースが見られます。

もし目次が二重表示になってしまった場合の対処手順は以下のとおりです。

  1. 使用中のテーマに目次機能が含まれているかを確認する。
  2. テーマに目次機能がある場合は、目次プラグインを「無効化」する。
  3. テーマに目次機能がない場合は、テーマ設定で目次をOFFにしてプラグインのみ有効にする。

プラグインを導入したら、必ずいくつかの記事で表示確認を行う習慣をつけてください。

テーマ機能を使う方法が確認できたところで、次は上級者向けの「手動作成」についても簡単に触れておきます。

上級者向け:HTMLで手動作成する方法

HTMLのリストタグとアンカーリンクを使って、目次を自作する方法もあります。デザインの自由度が最も高く、独自のスタイルを適用したい場合に有効です。ただし、HTMLとCSSの基礎知識が必要なため、初心者の方にはおすすめしません。

具体的な手順としては、GutenbergのリストブロックでリンクのリストをHTMLで記述し、各見出しにid属性(ページ内リンクの飛び先を指定するコード)を付与して紐づけます。

デメリットとして、見出しを追加・変更するたびにリンクを手動で更新する必要があります。記事数が多い場合には管理の手間が大きくなるため、プラグインまたはテーマ機能を使う方法への切り替えを検討するのが現実的です。

作り方の全体像が把握できたところで、次は設置した目次をより効果的に活用するためのコツを解説します。

クリックされる目次にする3つのコツ

目次は設置するだけでなく、読者が実際にクリックしてくれる状態にすることが大切です。プロの視点で特に重要な3つのコツを解説します。

目次は常に開いた状態で表示する

プラグインやテーマによっては、目次が折りたたまれた状態(クリックしないと展開されない状態)で表示されることがあります。この設定のままにしておくと、目次の存在自体に気づかれないまま読者がスクロールしてしまいます。

設定画面で「最初から展開した状態で表示する」オプションを選んでおくことを強くおすすめします。目次は最初から見えていてこそ機能します。プラグインやテーマの設定画面に「初期表示」や「展開する」という項目がある場合は、ONにしておきましょう。

見出しはH3までに絞る

目次に表示する見出しの階層が深くなるほど、目次の項目が増えて読みにくくなります。H4以降の小見出しまで目次に表示すると、スクロールしないと全体を把握できないほど長い目次になってしまいます。

プラグインやテーマの設定で「H2とH3のみ表示」に設定することで、コンパクトで見やすい目次になります。読者が目次をひと目で把握できる状態が、最もクリックされやすい目次です。

見出しのテキストを簡潔にする

目次の項目は、記事の見出しがそのまま表示されます。そのため、見出しのテキストが長すぎると目次も読みにくくなります。

目安として、ひとつの見出しは20〜30文字以内に収めると目次でも読みやすくなります。「何が書いてあるか」がひと言でわかる見出しが、読者にクリックされやすい目次を作ります。多くの制作案件で確認してきたのですが、見出しが長い記事ほど目次がスルーされる傾向があります。

これら3つを実践するだけで、設置した目次の使われ方が大きく変わります。次は読者からよく寄せられる疑問にまとめてお答えします。

よくある質問(WordPress目次に関するFAQ)

※このセクションには、FAQ Schema(構造化データ)のマークアップを施すことを推奨します。Google検索でPAA(よくある質問)枠に表示される可能性が高まります。

WordPressの目次はプラグインなしで作れますか?

作れます。テーマに目次機能が搭載されている場合は、プラグイン不要でテーマ設定のみで対応できます。代表的なテーマとしては「SWELL」や「Cocoon」が挙げられます。テーマに目次機能がない場合は、Gutenbergのリストブロックで手動作成する方法もありますが、見出しが増えるたびに手動更新が必要なため、記事数が多い場合はプラグインを使う方が効率的です。

目次があるとSEOに効果がありますか?

直接的な効果は明言できませんが、間接的にSEOに良い影響があると考えられています。目次の設置によって読者の滞在時間が伸びること、ページ内リンク構造が整理されること、検索結果にサイトリンクが表示されるケースがあることなどが、その理由です。SEOへの影響を期待するよりも、まず「読者にとって使いやすい記事にする」ための手段として目次を活用するのがおすすめです。

目次が表示されないときはどうすればいいですか?

以下の4点を順番に確認してください。

  1. プラグインが有効化されているかを確認する。
  2. 記事の見出し数が「表示条件」で設定した最低数を満たしているかを確認する。
  3. 見出しタグ(H2・H3など)が正しく設定されているかを確認する。
  4. テーマとプラグインが競合していないかを確認する(テーマに目次機能がある場合は、プラグインを無効化することで解決することが多いです)。

目次はすべての記事に必要ですか?

必ずしも必要ではありません。見出しが2〜3個の短い記事、または単一のトピックを扱うシンプルな記事には目次は不要です。目次が効果を発揮するのは、複数のセクションに分かれた情報量の多い記事(目安として見出しが4個以上)です。プラグインの設定で、見出し数の少ない記事では目次を非表示にする設定ができますので活用してください。

まとめ

この記事では、WordPress目次の作り方を「プラグインあり」と「プラグインなし(テーマ機能)」の2つの方法に分けて解説しました。最後に重要なポイントを振り返ります。

WordPressの目次は、読者の利便性向上・SEOへの好影響・検索結果でのサイトリンク表示など、複数のメリットをもたらします。一方で、短い記事には不要なこと、テーマとプラグインを同時に有効にすると二重表示になることも正直にお伝えしました。

作り方の選び方はシンプルです。「テーマにSWELLやCocoonを使っている場合はテーマ機能を使う、そうでない場合はEasy Table of Contentsをインストールする」という基準で選べば、迷わず設置できます。

設置が完了したら、「目次を常に展開」「H3まで表示」「見出しテキストを短く」の3つのコツを意識することで、読者に実際に使ってもらえる目次になります。

「目次の設置はできたけど、もっとサイト全体のSEOや見やすさを改善したい」「WordPressの設定や運用に不安がある」という方は、ぜひお気軽にご相談ください。小さな疑問や「ここだけ確認してほしい」というご要望にも対応しています。プロが一緒に確認することで、見落としがちな問題を早めに解決できます。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次