ワードプレスでブログを始めた初心者の方向けに、目次の作り方を2つご紹介します。
目次は、記事の最初に何が書いてあるか読者に案内できるもので、読者にとっても便利なものです。記事ごとに目次を設置するかしないかは、記事の内容や量によりますが、必ず作り方は習得しておきましょう！
目次
記事に目次を設置する意味
目次は、記事の最初に何が書いてあるか読者に案内できるもので、読者にとっても便利なものです。読者が必要な情報が書いてあるかすぐにわかるので、読者の満足度があがったり、Googleにその記事の構造を伝えたりと多くの意味があります。
また、目次にリンクを設定することで、読者が読みたい内容にすぐにリンクで飛ぶこともできるので、記事の読みやすさも向上します。
これから説明する目次の作り方を参考に、自分のブログにあった目次を作成してみましょう！
プラグイン(TOC+)を使う方法
ワードプレスで目次を設定する1つの方法は、プラグインを利用する方法です。Table of Contents Plus(TOC+)というプラグインを利用すれば簡単に目次を設定することができます。
TOC+を使った目次の例を下記に示します。
作り方について簡単に1から解説します。
Table of Contents Plusをインストールする
プラグインの新規追加から、「Table of Contents Plus」をインストールして有効化しましょう。
基本設定を行う
ワードプレスの設定から、TOC+を選択し、基本設定画面で基本設定を行います。下のような画面のページです。
この基本設定のページで目次の表示する位置や表示条件、デザインを決めます。
① 位置（TOC+の基本設定）
まず目次を表示する位置について設定します。おすすめは、デフォルトの「最初の見出しの前」です。記事の導入部分を書いて、見出し(h2)の部分の前に目次を表示する設定です。多くの方はこの設定でやっているのではないのでしょうか。
② 表示条件（TOC+の基本設定）
表示条件の設定では、見出しがいくつ以上（2〜10）あるときに目次を表示するかを決めます。おすすめは、「2」か「3」です。
記事の量や構成のによって、見出しの数が少ない時は、記事に目次は設定する必要もありません！
③ 以下のコンテンツ対応を自動挿入（TOC+の基本設定）
この設定は、どの型のページに目次を自動で表示するかを決めます。おすすめの設定は、「post」と「page」の2つにチェックを入れます。
これだけチェック
「post」：投稿記事のページ
「page」：固定ページ（サイトマップやお問い合わせのページ）
基本的に投稿記事には、目次はあった方が読者のためなので投稿記事にはチェックをいれましょう。
全ての記事に目次は入れたくないという方は、ページごとに目次を非表示にする設定をすることができます！
特定のページで目次を非表示にする方法
目次を非表示にしたい投稿記事の本文に、コードを入力するだけ！
④ 見出しテキスト（TOC+の基本設定）
見出しテキストでは、目次のブロックのタイトルに表示する文字を設定します。「目次」「コンテンツ」「Contents」など自分のブログのデザインや好みに合わせて決めましょう。また、読者がクリックすることで、目次の表示と非表示を設定することができる設定もできます。
⑤ 階層表示、番号振り（TOC+の基本設定）
「階層表示」「番号振り」なし
「階層表示」「番号振り」にチェック
⑥ スムーズ・スクロール効果を有効化（TOC+の基本設定）
この項目は、目次のリンクをクリックした時に、リンク先にジャンプで飛ぶか、素早いスクロールで移動するかを選択することができます。好みで設定をしましょう。
⑥ 外観（TOC+の基本設定）
最後に目次の外観の設定です。目次の文字の大きさや目次の幅など、ブログのデザインに合わせた目次を設定しましょう！
プラグイン(TOC+)を使うメリット
プラグイン（TOC+）で目次を作るメリットは、とにかく簡単だということです。
後述する自作で目次を作る方法については、一手間目次作成にかかります。プラグインを利用した目次作成であれば、最初に初期設定をしてしまえば、自動で目次が記事ごとに設定されるので、目次作成に時間はいっさいかかりません。
読者のことを考えれば、目次作成は必要なので、目次作成に手間がかからないのであれば、ブログ運営においてもメリットとなります。
もう一つのメリットは、デメリットにもなりますが、全てのページの目次のデザインを一斉に変えることができるという点です。ブログを始めた初心者の方は、ブログのデザインや方向性を途中で変更する場合もあると思います。その場合には、設定で目次のデザインを一括で変更できます。
プラグイン(TOC+)を使うデメリット
目次をプラグインで作ることによるデメリットは、個人的には2つあると考えています。
1つ目は、デザインです。
プラグインによる目次は、デザインがサイトで1つしか設定できないので、記事ごとに目次のデザインを変更することができません。
2つ目は、プラグインを多く入れるとサイトが重くなるという点です。
プラグインを使えば使うほどサイトは重くなります。なるべく自作できるところは自作して、プラグインの力に頼らずサイトを構築するということも大事になります。
プラグインを利用した目次作成は、とても簡単で便利な物ですが、デメリットもあります。後述で自作で目次を作成する方法もご紹介しますが、一手間かけて自作で目次を作るか、プラグインの便利さをとるかしっかり考えておきましょう！
目次を自作する方法
ワードプレスで目次を自作するのには、テキストエディタを編集する必要があります。テキストエディタを編集するのには抵抗がある方もいるかもしれませんが、目次の作成についてはそんなに大変な作業ではないので、やり方を覚えていきましょう！
この記事の目次については、こちらの方法で自作しています。
リストと見出しを作成する
記事作成の画面から、ボックスやリストを使って自作で目次のリストを作成しましょう。ワードプレスのテーマやプラグインによって、リストやボックスの作り方は異なりますが、どんなやり方でも大丈夫です。自分の好きなデザインの目次を作成しましょう。
ページリンクを設定する
自作で目次を設定するのに、手間がかかるのはこの部分です。目次については、リンクを設定しなくても、記事の内容がすぐに理解できるという大きな意味がありますが、読者の満足度を上げるためにはリンクを設定しましょう。簡単に例を示しながらやり方を説明します。
ワードプレスの記事編集画面で、リストの作成と見出しを作成すると下記のようになると思います。（ボックスやその他の修飾は省略しています。）
テキストエディタの部分は、下のようになっているはずです。このテキストの部分を編集してリンクを設定します。
この部分を編集してリンクで飛べるように設定します。
目次となる部分に<a href="A-1">を、
見出しとなる<h2>の部分にid="A-1"を記述します。A-1の部分はなんでも構いません。
リンクを飛ばしたい目次の行から、見出しの<h2><h3>に上記のルールでそれぞれテキストエディタを編集すれば、リンクの設定の完了です。
目次を自作する方法については、ボックスやリストで目次となる部分の作成と見出しの作成、リンクの設定の2つの作業で目次ができます。
目次を自作するメリット
目次を自作するメリットは、プラグインで目次を作るデメリットとは反対にデザインが自由にできるということです。記事のカテゴリーごとに目次のデザインを変えたり、文字の色や大きさも自由自在です。
もう一つは、目次を自分で作るようになると、記事の構成を考える意識も高まります。プラグインで目次を作ると自動で目次が作られるので、特に意識をすることはないかもしれませんが、目次を自分で作ると、記事の見出し<h2>はどうしよう、小見出し<h3>はどうしようかとより考えるようになります。
最初に記事の構成から考えて、目次と見出しから先に作ってしまえば、勢いで記事を書いていってしまう記事よりも内容がしまった記事を書くことができます。
自作で目次や見出しを設定した記事作成のフォーマットを作ってしまえば、自作目次で一手間がかかるリンクの設定作業も短縮できるのでおすすめです。
目次を自作するデメリット
目次を自作するデメリットは基本的に、自作する一手間がかかるというだけで他にでけリットはないと考えています。個人的には、目次ぐらいは自作してブログを作ろうと考えています。目次作成の一手間を削減するために、プラグインを入れるデメリットなどを受け入れるかどうかだと思います。
まとめ
ワードプレスで目次を作る方法を2つご紹介しました。ブログの運用やデザインの方向性にもよるので、それぞれ好みの方法で記事に目次を入れていきましょう！
ポイント
プラグインで簡単に目次作成：目次作成に時間をかけたくない人
自作で目次：目次のデザインを自分で設定したい！（記事ごとにデザインを変えたい）、プラグインになるべく頼りたくない
