WordPressで目次を簡単に作成する方法

WordPressを利用したブログで目次を表示するメリット

記事の上部に目次を入れておくことで、記事の全体像が把握しやすくなり自分が読みたい記事かどうかを判断しやすくなりますので、訪問者の多くが利用しています。
また、ブログやサイトの記事に設置された目次は、リンク形式になっているので、目次をクリックすれば読みたい内容にすぐ移動できるので、ユーザー目線で考えるとメリットが多い機能です。

ブログ集客で集客されているのであれば設定をお薦めします。

WordPressで目次を作成する方法

WordPressで作っているWebページに目次を作成する方法には下記の2種類があります。

  • プラグインを利用する方法
  • プラグインなしで目次を作成する方法
  • まずは「プラグインあり」の方法で目次作成の方法を紹介します。

    Table of Contents Plusを設定する

    目次を作成するプラグインはたくさんあります。
    Table of Contents PlusEasy Table of Contentsが定番のようなのですが、私はTable of Contents Plusしか利用したことが無いので、この記事ではTable of Contents Plusの使用方法を紹介させて頂きます。

    では、例によってTable of Contents Plusをインストールして頂いて、Table of Contents Plusの基本設定のタブを開いてください。

    この画面で目次の生成条件を設定して行きます。

    位置

    目次を表示する位置を設定します。
    特別なこだわりがない限りは初期設定の「最初の見出しの前」のままが良いと思います。

    表示条件

    見出しが何個以上で目次を表示するという設定です。
    検索エンジン的に何個が最適なのかというのは分かりませんが、4つが見た目のバランスが良いのかな??という感覚で私は4つと設定します。

    以下のコンテンツタイプを自動挿入

    目次を表示させるページのタイプを選択する設定です。
    初期設定ではpage(投稿タイプ)のみになっていますので、post(固定ページ)などにも目次を表示させる場合には必要に応じてチェックを入れることが出来ます。

    見出しテキスト

    目次コーナーのタイトルを指定する設定です。

    階層表示

    h2やh3を階層として表示する場合にはチェックを入れます。チェックを入れていおくことをおすすめします。

    番号振り

    目次の先頭に番号を表示させる場合にチェックを入れます。
    数字があったほうが読んでいる人はわかりやすくなるのでありがたい機能ですが、h2やh3を階層として表示する場合には、目次が番号だらけになるのでうざったくなるので判断が必要です。

    スムーズ・スクロール効果を有効化

    目次をクリックした際に、該当の見出しまで一気に移動させたい場合ジャンプ、シュッとした感じで移動させたい場合はスクロールで移動する場合にはチェックを入れます。

    外観

    目次の外観を好みにカスタムできます。
    サンプルになぜ、水色系が多いのかは分かりませんが、水色系が目次には良いのですかね。

    上級者向け設定

    私のブログを見てTable of Contents Plusを設定しようとしているぐらいの知識レベルの方であれば、触らないほうが良いです。私が見てもよくわかりません。

    これらの設定が完了したら、該当の記事に自動で目次が表示されます。
    目次を設定したページを確認してみましょう。

    「プラグインなし」の方法

    続いてプラグインを使用せずに目次を作成する方法を紹介します。
    phpファイルを編集して目次を作成する方法とタグに目次のタグを埋め込む方法があります。

    phpファイルを編集して目次を表示する方法は、私のブログを見てTable of Contents Plusを設定しようとしているぐらいの知識レベルの方であれば、サイト全体の表示が崩れてしまうこともある危険性があるので挑戦はやめておきましょう。

    ちなみに、私は一度phpファイルを編集して表示する方法に挑戦して、表示を崩してスタッフにそこまで言わなくてもいいんじゃない??・・・・というぐらい説教された過去があります。
    危険です。やめておきましょう。(^^;

    見出しタグにidを指定する方法

    見出しのタグに目次のタグを埋め込み、それを反映した目次を表示させる方法です。

    見出しの装飾等がCSSで固定されているテーマであれば、見出しタグ(h2,h3.h4…)のみでテキストを囲います。この見出しタグを目次に対応したものに変更すると、目次からその見出しまでジャンプすることが可能になります。

    <h2 id=”head1″>見出し1</h2>
    <h2 id=”head2″>見出し2</h2>
    <h2 id=”head3″>見出し3</h2>

    idとして指定している部分(head1.2.3)は任意の文字で設定可能です。

    そして目次には以下のように記述します。

    <h2>目次</h2>
    <li><a href=”#head1″>見出し1</a><li>
    <li><a href=”#head2″>見出し2</a><li>
    <li><a href=”#head3″>見出し3</a><li>

    プラグインを使うか?使わないか?

    私はプラグインを使う一択です。
    設定も楽々、管理も楽々。

    プラグインを使われることをお薦めします。

    ただ、プラグインを利用していることが理由でWebページの読み込みが遅くなっていると予測される場合は、このプラグインの利用はお勧めしません。
    その場合は、WordPressのスーパー専門家に相談をするのが良いですね。

    ちなみに、うちはWordPressのなんちゃって専門家なので、うちには依頼しないでください。その問題が解決することは無いです。(^^;

    筒井 章年

    Web制作歴25年。1,000サイト以上のWeb集客のサポート経験を持つ。 その経験で得た知識や経験でWeb集客の立案やコンサルティングを担当しています。集客問題を解決できるノウハウをわかりやすくご紹介いたします!

    関連記事

    Instagram位置情報設定代行サービス 場所を追加
    Instagram位置情報設定方法 説明書
    最近の記事 おすすめ記事
    1. Instagramマーケティングの秘訣は女性フォロワーを引きつけてエンゲージメントを高める事

    2. リールを制する者はInstagramを制す  2025年のアルゴリズムを大胆予想

    3. Instagramでは「売り込み」は厳禁! 情報・意見・日常 だけの発信がBESTなんです

    4. 企業はなぜInstagramを運用しなければならないのか?2024年最新版

    5. これ知らなきゃヤバイ!【最新】Z世代の消費行動における情報収集方法について具体的に解説します

    6. SNSとホームページでは消費者はどのように情報源として利用しているのか?

    7. 【2024年版】消費者は商品やサービスを選ぶ手順 | 購買決定に影響を与える基礎知識

    8. サラリーマン向け飲食店がInstagramを初めて運用する時の1ヶ月目のロードマップ

    9. MEOとは?SEOと何が違うのか?Google mapに掲載する際に自社の店舗情報を検索結果の上位表示させる基礎知識

    10. 成功事例で学ぶ!ローカルSEOを強化して売上を伸ばしたビジネスのリアルストーリー

    1. SEO対策のWordPress設定完全マニュアル!5つの必須ステップでGoogle検索を制覇

    2. Instagram(インスタグラム)のリール動画の音源を保存して活用する方法

    3. Instagramのリール動画やTicktockやYoutubeのショート動画にたくさんの会社が力を入れている理由

    4. Instagram(インスタグラム)で集客を始める時に知っておくべき集客のコツ12選

    5. 検索意図とは?SEO対策で重要な調べ方と考え方を解説します。

    6. ホームページが検索結果に表示されない時の原因と対処方法を徹底解説!

    7. 【2022年版】Web集客の種類とその方法を集客にお困りのあなたに分かりやすく解説します

    8. SEO対策の内製化を積極的に取組んでいる中小企業の多くは自社でするSEO対策に迷走している。

    9. 売れているホームぺージ = 集客型ホームぺージに共通しているぺージ構成の法則

    10. これを見れば完璧!Google Maps API 取得方法をご紹介します。

    資料を無料ダウンロード

    弊社の会社概要と、ご提供サービスのご紹介資料です。
    ご覧いただき、お気軽にお問い合わせください。

    TOP