コーディング制作お役立ちPhotoshopIllustratorXDHTML・CSSHTMLやCSSを詳しく、そして分かり易く丁寧に解説しています。it改めて言うまでも無く、WordPressでブログ記事を書くなら目次は必須です。目次を付ける理由は、その記事内に何が書いてあるのか冒頭でわかる様にする事。ページ内リンクなので見たい所へすぐに飛ぶ事も出来ます。この記事ではプラグインを使って作成・カスタマイズする方法とプラグインなしで自作する方法をそれぞれ解説します。目次のメリットと合わせて参考にしてくださいね。この記事はこんな方におすすめ。WordPressの目次を作るなら、プラグインがおすすめ!ブログやWebサイトで目次を表示するメリットは?ブログ記事の全体像をひと目で把握してもらうのが目次を付ける理由です。忙しい読者の傾向として、見たい所だけを見る、いわゆる斜め読みをします。長文記事の場合、見たい情報があるのか目次で確認出来ますし、その情報へリンクで移動出来るのはとても便利です。目次の具体的なメリットをまとめると以下の4つになります。ブログ記事の全体像がひと目でわかる読みたい箇所までリンクで移動できる目次が検索結果に表示されることがある実際に読者にクリックされている具体的に見ていきます。ブログ記事の全体像がひと目でわかる繰り返しですが、基本的にユーザーは斜め読みをします。その様なユーザーは、「探している情報だけを早く知りたい」と考えています。目次があれば、探している情報をすぐに見付ける事が出来ます。見付けられないとページの離脱に繋がります。急いでいるユーザーの離脱を防ぐのが目的ですが、これは「記事の導入部で結論を先に述べる」のと同じ理屈です。Googleの検索エンジンも、メインコンテンツの上部にある内容やリンクを重視しています。目次の内容は記事の見出しと同じ内容が入りますから、こういった点でもメリットがあります。読みたい箇所までリンクで移動できる目次があれば、ユーザーは目次をクリック(タップ)すれば、読みたい箇所まですぐに内部リンクで移動できます。実は、記事が長いと途中で離脱してしまうユーザーも多いです。目次が設置してあると、長文記事でも目的の見出しまで一気にリンクで移動出来ます。ユーザービリティが高まります。Googleの検索エンジンもリンクを辿る事が出来るので、SEO的にも効果的です。目次が検索結果に表示されることがあるGoogleで検索した際、検索結果ページに目次が表示されることがあります。検索エンジンも、「aタグとhref属性で内部リンクされている目次」はクロール出来ますから。検索結果ページで目次が表示されるただの見出しだと当然リンクではありませんが、目次を付ける事で結果的にリンクが張られた状態になります。見出しタグ:HTML5リファレンス2022.10.01実際にユーザーにクリックされている実際に、WordPressの目次はユーザーにしっかりとクリックされています。ユーザーがどこをクリックしたのかを把握できる「ヒートマップツール」を見ると、目次をかなり利用している事がわかります。上記の画像だと、すでに知っている基本的な内容は飛ばし、興味のある内容を直接見に行っているのがわかりますね。WordPress(ワードプレス)で目次を作成する3つの方法WordPressで記事を書くのであれば、目次作成は3つ方法があります。目次作成プラグインを活用するプラグインなしで目次を作成するテーマ標準機能を使用するどれも一長一短ありますが、順に解説していきます。プラグインを使って目次を作成する方法WordPressを使っているなら、プラグインを使って目次を挿入する方法が一般的です。残念ながら大抵の目次プラグインはテーマの影響を受けてしまい、デザインが崩れてしまいます。Plusなら、設定用のCSSも用意されています。CSSを使えるなら自分で調整してもOKです。初めからデザインが調整されています。画面一番上の「新規追加」ボタンをクリック。似ているものも出てきますが、少しだけなので迷わないはずです。見つけたら、右上に「今すぐインストール」ボタンがありますのでクリック。行くには以下をご覧ください。Plusの設定画面へ管理画面の「設定」→「TOC+」という項目がありますので、ここから設定していきます。※プラグインの一覧ページからも設定ページへ行けます。設定を解説!ブログ記事を書く際、とても重要度の高いHTMLタグであるHタグ(見出し)を入れているかと思います。Plusの特徴は、記事ページに設定したHタグ(見出し)レベルから、自動的に目次を作成出来る事です。見出しタグ:HTML5リファレンス2022.10.01以下、具体的に設定項目の解説をしていきますね。目次を表示する位置を設定します。おすすめはデフォルトの「最初の見出しの前」です。見出しが何個以上あれば目次を表示するか?」という設定です。見出しが少ない記事であれば目次を作る必要はないですから。2~10個の間で選べます。目次を表示させるページタイプを選択します。デフォルトではpost(投稿記事)のみになっています。固定ページでも目次を付けたいならpage(固定)にチェックします。目次の上に表示するテキストを指定する設定です。5【階層表示】h2やh3など見出しレベルに合わせて、階層表示する場合にはチェックを入れます。字下げして表示させた方が分かり易いので、チェックしておきましょう。目次の先頭に番号を表示させる場合にチェックを入れます。番号が付いていると分かり易いですね。目次をクリックした際に、該当の見出しまでスルスルッとスクロールで移動します。目次の横幅サイズや色味などを変更できます。テーマでデザインを用意してくれているなら、ここは触らなくて良いです。これらの設定が完了したら、記事に目次が表示されているはずです。設定画面の下に上級者向けの設定があります。1【CSSファイルを除外】STORK19の様にデザインを用意してくれているテーマや、自分でCSSを編集出来るのであれば「CSSファイルを除外」にチェックを入れましょう。デザインが用意されているテーマは?プラグイン用に、はじめからデザイン・レイアウトが調整されているテーマがありますのでご紹介します。STORK19DiverCocoonプラグインなしで目次を自作する:ページ内リンクプラグインを用いずに自作で目次を作るには、最低でも「HTML」「CSS」の知識が必要です。残念ながらプラグインと同じ様な目次を手動で付けるには、手間がかかり現実的ではありません。自作する場合は目次と言うより、「ページ内リンク」として使う方がおすすめです。自作する場合、以下の手順で進めます。テキストエディタで、目次の部分を作る各見出しに「id=”〇〇”」で名前をつける各目次にリンクを挿入するまずはテキストエディタで、目次(ページ内リンク)になる部分を作っていきます。id="instagram">Instagram</h2>記事の見出しにidの名前をつけたら、今度は目次にリンクを挿入します。リンクを挿入するには、「liタグ」の中の文字を「aタグ」で囲んで、「href」に先ほどつけたそれぞれのid名を「#」をつけて記載します。id名)あとはCSSでデザインを変更すれば、きれいな見出しになります。プラグインと同じように記事の好きな所に挿入出来ます。テーマ標準機能を使用するテーマによってはプラグインを使わなくても、最初から目次機能が備わっていることもあります。最初から「目次の表示機能」が搭載されています。WordPressの目次を作るなら、プラグインがおすすめ!今回は、WordPressに目次を入れるメリットや、具体的な目次の作成方法について解説しました。結論から言うと、手軽に設定するならプラグインがおすすめ。自分で目次を作成する方法は、毎回記事を書く度に、別途目次を用意しなければいけません。Plus」を使ってみて下さいね。検索:FUERU(フエル)ウェブデザイナーが知識と経験をもとに、制作やSEO対策、ITスキルについて解説・発信するブログ。デザイン・コーディングからSEO対策やライティングなど幅広くWEB制作をしています。スキルアップして仕事に活かしましょう。コーディング制作お役立ちPhotoshopIllustratorXDHTML・CSSHTMLやCSSを詳しく、そして分かり易く丁寧に解説しています。