訪問者が詳細な投稿にアクセスしたとき、彼らはガイドされ、コントロールされていると感じてほしいと思います。彼らが探している答えを簡単に見つけられるようにしたいのです。
WordPressの投稿やページに目次を作成する方法を学ぶことは、非常に役立ちます。これは、サイトでの読者の体験を向上させる最も効果的な方法の1つです。
フレンドリーな歓迎のように機能し、何があるかを正確に示します。長いスクロールをシンプルでクリック可能なアウトラインに変換します。
読者にこのようなコントロールを提供することで、コンテンツへの関与を深めることができます。最も重要な部分に直接移動できることを高く評価しています。
一緒に設定しましょう。この機能を追加して、最高のコンテンツをさらにアクセスしやすくする方法をご紹介します。
WordPressの投稿やページに目次を追加する理由
Wikipediaのようなウェブサイトで目次を見たことがあるかもしれません。WPBeginnerでも、WordPressの速度とパフォーマンスを向上させるための究極のガイドのような長い記事で目次を使用しています。
長文記事のセクション間を移動しやすくするために、WordPressウェブサイトの投稿に目次を追加できます。
目次を設置することは、ユーザーエクスペリエンスを向上させるだけでなく、WordPressのSEOにも役立ちます。Googleは目次を利用して、検索結果に自動的に「セクションにジャンプ」リンクを追加できるためです。
目次は、検索エンジンの結果ページの上部に表示される注目のスニペットとして投稿を掲載するのに役立つこともあります。
これにより、最大のSEOトラフィックを獲得できます。
それでは、WordPressの投稿やページに簡単な目次を作成する方法を見ていきましょう。プラグインを使った自動化、アンカーリンクを使った手動、コードを使った方法を紹介します。
方法1：WordPressで目次を自動的に追加する
AIOSEOは、All in One SEOとしても知られ、最高のWordPress SEOプラグインであり、WordPress用の組み込み目次ブロックが付属しています。
この方法は、小見出しに基づいて目次を自動生成することで時間を節約し、編集可能なリンクで完全にカスタマイズできるため、お勧めします。
詳細については、完全なAIOSEOレビューをご覧ください。
まず、無料のAll in One SEO Liteプラグインをインストールする必要があります。詳細については、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。
目次の簡単追加には無料版で十分ですが、AIOSEO Pro を利用すると、検索エンジンの結果ページでのランキングを向上させるためのさらに多くの機能を利用できます。
有効化後、AIOSEOセットアップウィザードを使用してプラグインを設定する必要があります。詳細な手順については、WordPressでAll in One SEOを正しく設定する方法に関するガイドを参照してください。
All in One SEOで目次を追加する
目次を追加したい投稿またはページを作成または編集する必要があります。その後、ブロックエディターの青い「+」アイコンをクリックし、「AIOSEO – Table of Contents」ブロックを見つけます。
目次を表示したい投稿またはページにブロックをドラッグするだけです。
注意: 目次を追加すると、「AIOSEO – 目次」ブロックがグレーアウトしていることに気づくかもしれません。これは、投稿またはページごとに目次を1つしか持つことができないためです。
プラグインは、ページ上の見出しを自動的に識別し、目次に追加します。異なる見出しレベル（例えばH2とH3）を使用すると、下位レベルの見出しはインデントされ、コンテンツの構造が表示されます。
投稿やページのコンテンツをまだ作成中の場合、ドキュメントに追加された見出しは自動的に目次に含まれます。
All in One SEOで目次をカスタマイズする
目次をニーズに合わせてカスタマイズする方法はいくつかあります。たとえば、見出しをクリックして名前を変更できます。これにより、目次の見出しは変更されますが、記事の見出しは変更されません。
AIOSEO は、各見出しのアンカーリンクを自動的に作成します。リンクアイコンをクリックしてアンカーテキストを編集でき、これは目次と投稿コンテンツの見出しの両方で変更されます。
見出しの横にある目のアイコンをクリックして非表示にすることもできます。AIOSEO Proのユーザーは、目次ブロックの見出しを並べ替えることができます。これにより、目次内の見出しは並べ替えられますが、記事内の見出しは並べ替えられません。
サイドバーにもブロックの設定があります。ここで、目次の箇条書きまたは番号付きリストのスタイルを選択できます。
最後に、WordPressの目次のカスタマイズが完了したら、「完了」ボタンをクリックして変更を保存する必要があります。
これで、目次が訪問者にどのように表示されるかを確認できるようになります。
目次の上にヘッダーまたは段落を追加することをお勧めします。これにより、読者はそれが目次であることが明確になります。
訪問者が目次のリンクをクリックすると、記事のその見出しにすぐに移動します。これにより、ユーザーは最も関心のあるセクションにジャンプできます。
AIOSEOの目次機能が優れている点は、見出しをカスタマイズしたり、必要に応じて見出しを選択的に非表示にしたりできることです。
これは、他のほとんどの目次プラグインにはない重要な機能です。
方法2：WordPressで目次を手動で追加する
プラグインなしでアンカーリンクを使用して目次を手動で作成することもできます。ただし、これにはより多くの時間と労力がかかります。
アンカーリンクの詳細については、WordPressにアンカーリンクを追加する方法に関するガイドをご覧ください。
目次の入力
まず、目次の見出しを追加できる「リスト」ブロックを追加する必要があります。見出しをリストに直接入力するか、記事コンテンツから1つずつコピー＆ペーストすることができます。
見出しブロックにアンカーテキストを追加する方法
次に、目次で参照したい各見出しにアンカー属性を追加する必要があります。これにより、訪問者が目次内の見出しをクリックしたときに、WordPressはどこにジャンプするかを知ることができます。
まず、H2やH3などの見出しをクリックする必要があります。次に、ブロック設定ペインの「詳細設定」矢印をクリックして、詳細設定を表示します。
次に、「HTMLアンカー」フィールドにスペースを含まない一意の単語またはフレーズを入力します。必要に応じて、ハイフンを使用して単語を区切ることができます。
次に、目次に含める他のすべての見出しについても同様に繰り返します。
ヒント: このフィールドに見出しを貼り付けると、ハイフンが自動的に追加されます。これは、一意のIDを作成し、見出しを明確に表す簡単な方法です。
目次へのアンカーリンクの追加
目次内の見出しを、作成したHTMLアンカーにリンクする最後のステップです。
リストブロックの最初の項目をハイライト表示し、ツールバーの「リンク」アイコンをクリックしてください。
次に、ハッシュタグ（#）を入力し、その見出しのアンカーテキストを入力または貼り付けます。
# は、WordPressに現在の投稿のそのセクションにジャンプするように指示します。ドメイン名やその他のURLパラメータを追加しないでください。
それが完了したら、「Enter」キーを押すか、「送信」アイコンをクリックしてリンクを作成する必要があります。
アンカーリンクが目次リストに追加されます。訪問者がこのリンクをクリックすると、投稿またはページのコンテンツ内のその見出しにすぐに移動します。
これらの手順を繰り返すことで、目次の他の見出しにもアンカーリンクを追加できます。
方法3：コードを使用してWordPressに目次を追加する
WordPressに目次を追加するには、WPCodeプラグインを使用してコードスニペット経由で追加することもできます。
WPCodeを使用すると、テーマファイルを編集することなく、WordPressにカスタムコードを簡単に追加できます。さらに、投稿の見出しに基づいて目次を自動的に追加するスニペットなど、既製のコードスニペットのライブラリも付属しています。
他の方法ほど柔軟ではなく、すべてのウェブサイトで機能するとは限りませんが、コードを使用してWordPressのカスタマイズを行うことに慣れているユーザーにとっては良い選択肢です。
まず、無料のWPCodeプラグインをインストールして有効化する必要があります。ヘルプが必要な場合は、WordPressプラグインのインストール方法のチュートリアルで、ステップバイステップの説明をご覧ください。
有効化したら、WordPress管理ダッシュボードからコードスニペット » ライブラリに移動します。
そこから、「シンプルな目次」スニペットを検索します。見つけたら、カーソルを合わせ、「スニペットを使用」ボタンをクリックします。
次に、WPCodeがコードを自動的に追加し、目次を表示するための適切な挿入方法を選択します。
その後、スイッチを「非アクティブ」から「アクティブ」に切り替え、「更新」ボタンをクリックするだけです。
これで完了です。投稿にアクセスして、基本的な目次が追加されたことを確認できます。
ユーザーはリンクをクリックして、記事の特定のセクションに直接ジャンプできます。
目次の作成に関するよくある質問
WordPressサイトに目次を追加することについて、さらにいくつか質問があるかもしれません。よくある質問をここに集め、迅速かつ明確な回答を提供します。
WordPressで目次を追加する最も簡単な方法は？
最も簡単な方法は、小見出しから目次を自動生成するプラグインを使用することです。高速で自動的、かつ高度にカスタマイズ可能なため、All in One SEO (AIOSEO) プラグインに組み込まれている目次ブロックの使用をお勧めします。
目次はSEOを改善しますか？
はい、目次はSEOに大きく役立ちます。Googleはしばしばそれを使用して、検索結果に直接「セクションにジャンプ」リンクを作成し、クリック率を向上させることができます。また、検索ページの先頭にある注目のスニペットにコンテンツが選ばれるのを助けます。
プラグインなしで目次を作成できますか？
もちろんです。リストを作成し、HTMLアンカーリンクを使用して各項目を記事の対応する見出しにリンクすることで、手動で目次を作成できます。この方法では完全に制御できますが、より多くの手作業が必要です。
新しい見出しを追加すると、目次は自動的に更新されますか？
AIOSEOのようなプラグインを使用している場合は、はい。AIOSEOの目次ブロックは、記事を書きながら自動的に新しいヘッダーを検出し、追加します。手動で作成した場合は、ヘッダーを追加または変更するたびにリストを自分で更新する必要があります。
目次に表示される見出しを選択できますか？
はい、適切なツールがあれば可能です。AIOSEOプラグインを使用すると、ワンクリックで目次から特定のヘッダーを簡単に非表示にできます。これにより、記事の構造を変更することなく、アウトラインに表示されるものを制御できます。
このチュートリアルが、WordPressの投稿やページに目次を作成する方法を学ぶのに役立ったことを願っています。また、ブログのトラフィックを増やす方法に関するガイドや、WordPress向けの最高のFAQプラグインの専門家のおすすめもご覧になりたいかもしれません。
この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。
シルビア
素晴らしい記事です！長いブログ投稿の1つで「方法2：WordPressで目次を手動で追加する」に従いました。完璧に見え、リンクも正しく表示されていますが、ウェブサイトにアクセスして保存した後、目次のエントリのいずれかをクリックしても、アンカーの見出しにリダイレクトされません。代わりに、「このサイトにアクセスできません」というエラーが表示されます。私のウェブサイトはまだ公開されていませんが、これがリンクが現在機能しない理由でしょうか？ご協力ありがとうございます。
WPBeginnerサポート
その特定のエラーは通常、サイトに別のエラーがあることを意味します。以下の記事を確認することをお勧めします。
https://www.wpbeginner.com/wp-tutorials/how-to-easily-fix-this-site-cant-be-reached-error-in-wordpress/
管理者
デニス・ムトミ
私はしばしば長文コンテンツを書きますが、投稿内のナビゲーションを改善する方法を探していました。プラグイン方式と手動方式の両方に関するあなたの指示は非常に役立ちます。個人的にはAIOSEO方式を使用します。
目次がGoogleの「セクションにジャンプ」リンクに表示されることでSEOが向上するというヒントに、本当に感謝しています。これは以前は考えていなかったメリットです。
専門知識を共有していただき、重ねて感謝いたします。あなたの記事は、あらゆるレベルのWordPressユーザーにとって、常に非常に貴重な洞察を提供してくれます！
サム・スミス
WordPressの投稿エディターにいますが、青いプラスボタンや高度なブロックが表示されません。これらの機能を見るにはどうすればよいですか？
WPBeginnerサポート
ブロックエディターを使用している場合、右上の「集中モード編集」を無効にすると、プラス記号が表示されるようになるかもしれません。
管理者
Ahmed Omar
私はすでに最初の方法を使用しており、それが私のサイトを検索結果で上位に表示させるのに役立ち、もちろんより多くの訪問者をもたらしています。
ありがとうございます
WPBeginnerサポート
どういたしまして！
管理者
本当にありがとうございます
TOCのフォントカラーを変更する方法を教えていただけますか？
WPBeginnerサポート
そのためには、CSSを使用してテキストの色を変更する必要があります。テキストの色を変更する方法については、以下の記事をご覧ください！
https://www.wpbeginner.com/wp-tutorials/how-to-change-the-text-color-in-wordpress-easy-methods/
管理者
ario
教えていただいた方法で手動で目次を作成しましたが、ページ区切りを追加してポイントを異なる部分やページに分割するまで、うまくいっていました。これに対する解決策はありますか？
WPBeginnerサポート
ページを分割する場合、正しくリンクするには、# の前の完全なURLとアンカーを含める必要があります。
管理者
Mark
昔は、ウェブサイトが新しかった頃、これをサイトマップと呼んでいました。でも、検索エンジンがウェブサイトにサイトマップを見つけるのは、ある程度予想されていましたね。
リマインダーと情報、ありがとうございます。
WPBeginnerサポート
Sitemaps are slightly different, we have our guide below for sitemaps specifically. The Table of contents is to allow your visitors to jump to a specific section of a post
https://www.wpbeginner.com/beginners-guide/what-is-a-wordpress-sitemap-how-to-create-a-sitemap-in-wordpress/
管理者
samarth
SEOにはどちらが良いですか？HTMLで手動でTOCを追加するか、プラグインを使用するか？
WPBeginnerサポート
追加される情報が同じであれば、違いはありません。プラグインはプロセスを容易にし、マークアップが正しく追加されるようにするのに役立ちます。
管理者
Tay
目次を特定のページに手動で配置するにはどうすればよいですか？自動挿入を無効にすることはできますが、ページ上のどこに目次を配置したいかを決定することはできません。それは可能ですか？
WPBeginnerサポート
目次はページで有効にする必要があり、その後、追加したい特定のページを編集する際にオプションが表示されます。
管理者
Muhammad Arslan Sharif
なんて素晴らしいチュートリアルでしょう。私やウェブサイトやブログに新しい機能を追加したい他の人々にとって非常に役立ちます。非常に短い言葉で、あなたは例外的に説明しています。
WPBeginnerサポート
Glad you found our guide helpful
管理者
Rianne
Brilliant! What I thought would take me hours took me 20 minutes instead
WPBeginnerサポート
Glad our guide was helpful
管理者
Claudia
いつも役立つ記事をありがとうございます！
WPBeginnerサポート
You’re welcome
管理者
キム・バルキオス
開発者が私が書いた非常に長いブログに目次を作成しました。エントリの1つを編集したところ、リンクが消えてしまいました。
新しいエントリを作成しようとすると、「URLを貼り付けるか、検索するためにタイプしてください」と表示されます。URLを追加すると、読者はブログのトップに移動しますが、ブログ内の正確な場所には移動しません。
WPBeginnerサポート
以下のガイドに従って、アンカーリンクを作成してください。
https://www.wpbeginner.com/beginners-guide/how-to-easily-add-anchor-links-in-wordpress-step-by-step/
管理者
David Ellin
このビデオは、投稿内に目次を作成する方法を示しています。ブログ全体に目次を作成したいのですが、各記事のタイトルがTOCに表示されるようにしたいです。どうすればよいですか？
WPBeginnerサポート
ブログページを作成する方法については、以下の記事をご覧ください。目次を作成すると、やりたいことに対して長すぎることになるためです。
https://www.wpbeginner.com/wp-tutorials/how-to-create-a-separate-page-for-blog-posts-in-wordpress/
管理者
ジャン
この有益な投稿をありがとうございます！
ちょっとした質問なのですが、「この特定の投稿/ページでグローバル設定を上書きする」とはどういう意味でしょうか？
目次を自分で挿入することを選び、h2とh3のみをチェックした場合、目次が全く表示されません。
ありがとうございます！
WPBeginnerサポート
それは、その特定の投稿/ページに対してプラグインのデフォルト設定を無視するように指示していることを意味します。ページにH2またはH3がない場合、プラグインが目次に追加するものはありません。
管理者
Ahmad Zeeshan
設定に「目次」がありません。どこで見つけられますか？
WPBeginnerサポート
You would want to ensure you activated the plugin after installing it.
管理者
ディーラージ・ソニ
有益な記事を共有していただきありがとうございます。あなたのコンテンツはいつも私を次のレベルに進めるのに役立ちます。
WPBeginnerサポート
You’re welcome, glad you found our content helpful
管理者
Asthen
なぜwpbeginnerは、本当に長い場合を除いてTOCの使用を推奨しないのですか？
長すぎるというのはどのくらいですか？
WPBeginnerサポート
ページが短すぎてスクロールできない場合、目次を設ける理由はありません。投稿の長さは個人の好みによります。
管理者
SAHIL DHIMAAN
こんにちは、とても役立つ記事です
しかし…
モバイルで目次が表示されません。どうすればよいですか…
AMPプラグインも使用しています…
WPBeginnerサポート
AMPプラグインがプラグインの追加機能を削除している可能性があります。目次プラグインのサポートに問い合わせると、AMPサポートがあるかどうか教えてくれるでしょう。
管理者
Bee Lian Low
ありがとうございます。この目次をインストールするのをずっと待っていました！
WPBeginnerサポート
You’re welcome
管理者
セシリア
ありがとうございます。使いやすいです。
WPBeginnerサポート
You’re welcome
管理者
Lucimar
こんにちは！
Congratulations on the article, it helped me a lot
しかし、AMPページではうまくいきませんでした。
注: 「Accelerated Mobile Pages」プラグインを使用しています。
どうすれば解決できますか？
ありがとうございます！
WPBeginnerサポート
AMP に関する推奨事項があるかどうかは、プラグインのサポートに問い合わせる必要があります。
管理者
Džangir Kolar
こんにちは！
このプラグインは、ページの速度自体にどのような影響を与えますか？
WPBeginnerサポート
ページの速度に影響を与えるべきではありません。
管理者
ルーク・リチャードソン
Easy Table of Contentsを使用していますが、目次にある見出しのいずれかをクリックしたときに、その特定のセクションにジャンプするハイパーリンクを作成するオプションはありますか？
プラグインで何か見落としているのか分かりませんが、見出しをクリックしてもセクションにジャンプしません。
ありがとう
WPBeginnerサポート
プラグインで可能になるはずです。コンテンツと、ページのあるセクションへのスクロールを妨げるブラウザアドオンがないか、十分なスペースがあることを確認してください。
管理者
Tosh Lubek
「目次を初期状態で非表示にする」にチェックを入れましたが、目次が表示される投稿を開くたびに目次が表示されます。他に何かする必要がありますか？
WPBeginnerサポート
プラグインとテーマの競合ではないことを確認するために、プラグインのサポートに問い合わせることをお勧めします。
管理者
Oulimata
いつものように、驚くほど詳細で役立ちます。ブログ関連のことは何でも、皆さんが私の頼れる情報源になりました。
WPBeginnerサポート
Thank you, glad we can continue to be helpful
管理者
Raaz shrestha
このプラグインは本当に素晴らしいです。wpbeginnerチーム、共有ありがとうございます。
WPBeginnerサポート
Glad you liked our recommendation
管理者
Akamps
こんにちは、サイドバーにこの目次を入れる方法はありますか？
WPBeginnerサポート
The plugin does have a widget you can use
管理者
Nic
目次を中央揃えにする方法はありますか？
WPBeginnerサポート
カスタムCSSを有効にする必要があります。必要なCSSはテーマによって異なります。
管理者
KM
プラグインを「手動」で一度に1つだけ使用するにはどうすればよいですか？説明が不明確です
WPBeginnerサポート
目次を表示したい投稿タイプを有効にすると、それが有効になっているタイプのいずれかを編集する際に、エディターの下部にあるオプションで目次を追加できるようになります。
管理者
Kelvin
いいえ、また投稿です。ページではありません！
ページにテーブルを挿入するにはどうすればよいですか？
WPBeginnerサポート
プラグインの設定でページを有効にすると、投稿と同じ手順でページにも対応できるようになります。
管理者
リシ
良い
WPBeginnerサポート
Glad you like our article
管理者
Abhishek
こんにちは、Wikipediaのように、個々の見出しをクリックするだけで表示/非表示することは可能ですか？
各h3の下にサブヘッダーが多すぎるため、ナビゲーションを容易にしたいです。
WPBeginnerサポート
こんにちは、アビシェークさん。
トグル効果を使用して WordPress でテキストを表示/非表示する方法については、こちらの記事をご覧ください。
管理者
Alex
記事をありがとうございます！
Prince Gabriel Okocha
この投稿のガイドラインに従って、このプラグインをブログにインストールしました。しかし、投稿に表示されません。何か間違っていますか？できるだけ早くこれが必要です
WPBeginnerサポート
Hello,
プラグインの設定を確認してください。投稿とページの両方でサポートを有効にする必要があります。その後、投稿とページを編集すると、投稿エディターの下にTOC設定が表示されます。ここから、「目次を挿入」のチェックボックスをオンにして、その特定の投稿に追加します。
管理者
Srinu
記事をありがとうございます。うまくいっていますが、TOC_Boxで箇条書きと数字が表示されてしまいます。どうすれば変更できますか？すでにh2タグで番号を付けています。
そのため、数字が2回繰り返されています。
Mae
本当にありがとうございます！これを私の限定ライブラリに使用しました。とても気に入っています！これで、購読者は印刷可能なものを探すのに苦労しなくなります。
XOXO,
メイ
Jan Peter Aursnes
素晴らしいプラグインですが、ページを除外する方法はありますか？見出しに書き込んだり、* や ⎮ を使用したりしても（少なくとも私には）機能しません。私は技術者ではないので、少し説明が必要なのかもしれません。
事前に感謝します。
Raushan
これは最高のプラグインですが、このプラグインで目次を作成すると、SEOの観点から良くない複数のH1タグが表示されます。
これを解決するにはどうすればよいですか？
ありがとうございます
スニル・スレシュ
ありがとうございます。あなたの記事はちょうど良いタイミングで届きました！クライアントのためにまさにこのようなものを探していました。