WordPressでの目次の作り方！プラグインで簡単に、見やすいブログに

どうも、あっぴ（@mypacist）です！

今回はプラグイン「Table of Contents Plus（TOC+）」を使ってWordPressブログに目次を入れる方法をご紹介！

TOC+は使い方が簡単だし、1回設定するだけで目次が自動作成されるよ。

ラッコさん

みんな入れてるから何となく入れたいんだけど、目次って実際なにがいいの？

あっぴ

読者さんがピンポイントで知りたいことがあるときに、記事の大まかな内容をチェックできるんだ

特に記事が長くなってくると、知りたい情報が載っているか(その記事を読むか)を判断するのが大変。

だから読者さんが「よくわかんないから、他のわかりやすいサイトに行こ」と離脱しないよう、目次を用意してあげるのは大事。

小さな気遣いだけど、こういう些細なことを積み重ねるのが、ブログで稼ぐコツだよ。

ってことで、さっそくあなたのブログにも目次を入れてみよう！

目次の完成例

この記事を参考に目次をつくると、下のような目次ができあがるよ。

基本はシンプルな目次。

ただしSTORK19とSANGOは、TOC+に対応した独自デザインがある。

なのでCSSファイルをいじらずに、誰でも簡単にブログデザインに合った目次がつくれるよ。

プラグイン「Table of Contents Plus(TOC+)」を使った目次を自動作成させる方法

目次は、次の４つのステップで作っていくよ。

1. プラグインのインストール&有効化をする
2. 設定画面に移動する
3. 設定を変える
4. 最終確認

あっぴ

このブログを見ながらあなたのブログを動かすと思うので、画面切り替えが爆速化する方法を使うと早いよ

TOC+のインストールと有効化をしよう

まずは他のプラグインと同じように、インストールと有効化をするよ。

ワードプレスの管理画面で、「プラグイン」の中にある「新規追加」をクリック。

右上の検索窓に「Table of Contents Plus」と入力。

あっぴ

名前が長いし英語でミスしやすいから、コピペがおすすめ！

早くて楽で確実！

Table of Contents Plusを探して、「今すぐインストール」をクリック。

「有効化」をクリック。

TOC+の設定画面に行こう

画面左の「設定」の中から、「TOC+」をクリック。

あっぴ

ちなみに「TOC+」は、Table of Contents Plusの略称です。

そしたらTable of Contents Plusを設定できる画面に行けたはず。

こんな画面ならおっけー。

各設定項目の解説&おすすめ設定

各設定項目は、あっぴのおすすめ設定だけをザっと確認してもOK。

ただしそれぞれの設定をおすすめする理由には、ブログで稼ぐ上での大事な考え方やテクニックがある。

なのでよかったら、じっくりと読みながら確認していってね。

特定の項目だけ見るならリンクをクリック！

おすすめ設定だけ(解説なし)を見るならクリック！

STORK19向け、おすすめ設定まとめ

SANGO向け、おすすめ設定まとめ

その他テーマ向け、おすすめ設定まとめ

位置

位置では、目次をどこに表示させるかを選べるよ。

おすすめは、「最初の見出し前（デフォルト）」。

というのも記事の最初は、読者さんに興味を持ってもらえるかの勝負どころ。

また、記事には本題に入る前に、冒頭文を書くと思う。

一方、最初の見出し前に目次を入れるってことは、冒頭文が１番最初に来て、その直後に目次が来るってこと。

これなら冒頭文で読者さんの興味をそそれるから、しっかり見てもらえる記事にできる。

あっぴ

もちろん読者さんの興味をそそれるかは、冒頭文次第だけどね。

表示条件

表示条件では、見出しがいくつ以上あるときに目次を表示させるかを決められる。

おすすめは、３つ。

基本的に目次はあった方がいいんだけど、そもそも記事が短い（見出しが少ない）場合はなくていいからね。

以下のコンテンツタイプを自動挿入(post、page)

ここはどんなタイプのページに目次を入れるかを決めるところ。

選択肢がたくさんあるけど、postとpageだけをどうすればいいか考えれば大丈夫。

それぞれの意味は

• post：投稿した記事（今あなたが見てるような、普通のページ）
• page：固定ページ（お問い合わせページやプロフィールページなど）

のこと。

おすすめは、postとpageの両方にチェックを入れること。

というのも、たいていのページでは目次があった方がわかりやすいからね。

それにいらないページがあったら、ページごとに非表示にすればいいから。

あっぴ

ページごとに非表示する方法は、後ほどよくある質問でお伝えするよ

目次の上にタイトルを表示（見出しテキスト）

ここは

• 「目次」みたいなタイトルを表示させますか？
• 表示させるなら、タイトルは何にしますか？

ってことを決めるところ。

まずタイトルの有無は、ありがおすすめ。
(つまりチェックを入れる)

というのも、いきなりポンッと書いてあっても、読者さんは「何だろう？この文章の羅列は」って思うだろうからね。

また、タイトルの名前は「目次」がおすすめ。

もっと言うなら「押すとジャンプします」みたいな補足入れて、クリック(スマホならタップ)をすると移動できることを伝えるのもおすすめ。

というのも、デフォルトだと英語(Contens)だと何か伝わりにくいから。
確実に誰でも伝わるよう、日本語にしよう。

あと各項目をクリック(タップ)すると該当箇所に飛べることを、知らない読者さんも多い。
なので補足してあげると、記事の一部だけ見たい読者さんにも喜ばれるよ。

ユーザーによる目次の表示・非表示を切り替えを許可（見出しテキスト）

ここは、読者さんが

• 目次をいらないと思ったら非表示
• 目次がほしいと思ったら表示

のように切り替えできるようにするか決めるところ。

また、切り替えできるようにする場合、どんな文章のリンクにするかを決めるところ。

おすすめ設定は、切り替えできるようにすること。
(つまりチェックを入れること)

というのも読者さんの中には見たい人も見たくない人もいるので、個人の好みで選べるように。

また、文章は「開く」「閉じる」がおすすめ。

もしくはカッチリした印象のブログにしたいなら、「表示」「非表示」。

というのもデフォルトは英語になってるけれど、伝わりにくいからね。
確実に一瞬で伝わるよう、日本語にしておこう。

最初は目次を非表示（見出しテキスト）

ここは、目次を

• 最初から表示させるのか
• それとも最初は非表示で、読者さんが必要なときに自分で表示してもらうのか

を決めるところ。

「最初は目次を非表示」にチェックを入れると、最初は非表示になるよ。

ブログ初心者さんにおすすめは、まずは表示にすること。
(つまりチェックをしない)

で、記事数が増えてきたときに「なんだか目次が長くて邪魔だなぁ」って思うことが多ければ、後で非表示に変えること。

というのも

• 目次が長くなることが多いなら、最初は非表示に
• 反対に、目次が長くなることが少ないなら、最初から表示

というのがいいんだけど、これからブログを始めるところ(もしくは始めたばかり)だと、自分の目次の長さがまだわからないから。

なので今後記事を書きながら、様子を見ていこう。

階層表示

ここは大見出しや小見出しの違いがわかるようにするかを決めるところ。

ちょっとわかりにくいので、画像を見てもらったほうが早いかな。

こんな感じで変わるよ↓

おすすめは、階層を表示させること。
(つまりチェックを入れる)

というのも、階層があると括りくくりができてわかりやすいから。

見出しレベル(大見出しと小見出し、どちらを使うかなど)はミスしやすいところだけど、これなら確認もしやすいしね。

番号振り

ここは各項目の頭に番号を入れるかを決めるところ。

これも実際の目次を見てもらうのがわかりやすいと思う↓

おすすめの設定は、使っているWordPressテーマがSTORK19かそれ以外かで変わるよ。

クリックで該当箇所に移動！

• STORK19の場合
• その他のテーマの場合

STORK19の場合

STORK19なら、番号振りありがおすすめ。

というのも実はSTORK19だと独自デザインの目次になるのだけど、番号があっても見やすいからね。

それどころかどのくらいの項目数があるのかわかる分、番号なしよりもおすすめ。

あっぴ

デザイン的にも、番号がアクセントになっていておしゃれ！

それに丸っこくて可愛い！

ただし注意点として、「①目次の設定をしよう」みたいに、見出しの頭に①②③・・・を使うと少し見にくいけどね。

なのでとりあえずチェックを入れておいて、記事を書いていくうちに、もし見にくく感じたらチェックを外そう。

STORK19以外の場合

STORK19以外のテーマを使っているなら、おすすめは番号振りなし。
(つまりチェックを入れない)

というのも見出し(目次の各項目になる文章)には、数字を入れると読者さんの興味をひきやすい。

けれど番号振りをありにすると、見出しでも数字を使ったとき、数字だらけで見にくくなるからね。

例えばおすすめ商品のランキングを作ったとき、見出しに「1位：〇〇」と付けると、目次では「1.1位：〇〇」みたいな謎の表示になっちゃうってこと。

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

ここは各項目をクリックしたときの画面移動方法を選べる。

• ジャンプだと普通のリンクのように、一瞬で画面が切り替わる
• スクロールだと超高速でスクロールしながら画面移動(「シュルシュルシュルーッ！」って感じ)

おすすめは、ジャンプ。
（つまりチェックを入れない）

というのもスクロールだと、ページが重くなるかもしれないから。

あと個人的には、スクロールだと突然動き出してびっくりしちゃうｗ

一方のジャンプだと、普通のリンクと同じで見慣れてるから、しっくりくる。

横幅（外観）

ここは目次の横幅（サイズ）を決めるところ。

おすすめは「自動(デフォルト)」。

自動が特別すごくおすすめってわけではないけどね。

ただ、大きすぎると表示が崩れるし、小さすぎると見にくいから。

回り込み（外観）

回り込みは、

• 目次のまわりに本文を配置するか
• 配置するとしたら左と右のどちらに位置に配置するか

を決めるところ。

ONにすると、目次が本来ある場所の直後に書いた文章が、目次の隣に配置されるよ。

※「位置」の設定を「最初の見出し前（あっぴがおすすめしたやつ）」にした状態で回り込みをONすると、表示が崩れます。

いうまでもないけど、おすすめは「なし（デフォルト）」。

ありだと見にくいし、そもそも表示崩れになるのは論外なので。

文字サイズ（外観）

文字サイズでは、各項目の文字サイズを決めるよ。

単位は

• ％
• pt
• em

から選べるのだけど、％は本文の文字サイズに対する比率ね。

おすすめは、95%。
(つまりデフォルトのまま)

というのも、あくまでメインは本文なので、目次は本文より目立たなくていい。
けれど小さすぎると読めないからね。

95%がすごくおすすめってわけじゃないけど、まぁそのままで問題ない。

プレゼンテーション（外観）

プレゼンテーションでは、目次の背景色を選べるよ。

おすすめは、グレー(デフォルト)。

まぁグレーがすごくおすすめってわけではないけどね。
強いていうならって感じ。

というのも、まず黒は見にくいので、真っ先に候補から除外したよ。

それ以外なら見やすいからぶっちゃけどれでもいいんだけど、グレーならリンクの色(青)とは系統が違って、リンクが映える。
つまりクリックできることがわかりやすいから。

なおかつ記事の背景色(たいていの場合は白)とも違って、目次だということがわかりやすいから。

上級者向け設定

続いて、上級者向けの設定を変えよう。

項目名は上級者向けとはいえ、初心者さんでも一部、変えた方がいいものがあるからね。

まずは「表示」をクリックして、設定項目を開こう。

たくさん項目があるけれど、変えるのは以下の基本的に1ヵ所けでOK。

ただしSANGOを使っている場合のみ、2ヵ所を変えるよ。

クリックで該当箇所に移動！

• CSSファイルを除外(SANGOのみ)
• 見出しレベル

CSSファイルを除外(SANGOのみ)

ここは、プラグインのCSSファイル(外観設定)を有効化するか決めるところ。

おすすめは・・・

というか、SANGOの場合、必ず無効化しよう。
(つまりチェックを入れる)

というのもSANGOは、テーマ側でCSSファイルが用意されているのね。

で、プラグイン側も有効化すると、お互いがケンカして表示が崩れてしまうから。

見出しレベル

ここは、どのレベルの見出しまで表示させるかを決めるところ。

ワードプレスでは基本的に

• H2見出し：大見出し
• H3見出し：小見出し
• H4見出し：さらに小さい見出し

を、使うんだよね。

また、ごくまれに

• H5見出し：H4見出しよりさらに小さい見出し
• H6見出し：H5見出しよりさらに小さい見出し

まで使うこともある。

このうちどの見出しまでを目次に表示させるか？ってこと。

おすすめは、

• heading 2 – h2
• heading 3 – h3

にだけチェックを入れること。

あまり多いと目次が長くなって、ごちゃごちゃと見にくくなる。

なのである程度のところまでに抑えておこう。

設定を更新

ここまで設定できたら、「設定を更新」のボタンをクリック。

画面で1番下の、青いやつね。

あっぴ

これで設定は完了！

最終チェックをしよう

最後に、実際に目次が表示されているか確認しよう。

目次を見るには実際の記事の画面か、プレビュー画面を確認。

あっぴ

記事の投稿画面だけを見てても目次は表示されないので注意！

下のような目次が表示されればOK！

あっぴと同じ設定しているなら、最初の見出しの真上にあるよ。

よくある質問と対処法

この記事を参考にした方々から頂いたご質問と対処法もご紹介しておくね。

もし疑問点があったら、参考にどうぞ。

疑問点があればクリックして移動！

1. 設定したのに目次が表示されません・・・
2. 各項目をクリックすると、ジャンプしたときに見出しより下に行ってしまいます・・・
3. 記事(ページ)ごとに非表示にしたいときは、どうすればいいですか？

疑問点がなければこちら！

Q.設定したのに目次が表示されません・・・

この場合の対処法は２つ。

1. 機械にもわかるように「正しく」見出しを付けよう（見出しタグを使おう）
2. 表示条件（〇つ以上見出しがあるとき）を満たそう

あっぴ

両方ともできて初めて目次が表示されるよ。

「正しく」見出しを付けよう

「ちゃんと設定したのに目次が表示されないです・・・」ってお問い合わせはめちゃくちゃ多いんだけど、9割以上の確率で原因はこれ。

冒頭でも言ったように、記事内で正しく見出しを付けてないから。

見出しっていうのはこんなのね↓

※デザインや色などはWordPressテーマや設定ごとに変わるよ。

「見出しは付けてるよー」って人でも、間違ったやり方で付けてるパターンが意外と多い。

手動でデザインや色などを変えたりね。

また、見出しの大きさを好き勝手に選んでることもよくある。

実はね、WordPressの見出しは、正しく使うと自動的にデザインや色など変わる。

そしてそのように見出しタグを付けてあげると、機械もどこが見出しなのか判断できるようになる。

なので目次が自動作成されるってこと。

ということであなたが「ん？目次が表示されないぞ・・・？」って思ったら、まずは見出しの付け方を確認してみてね。

正しい付け方はこちら↓

目次も自動表示される正しい見出しの付け方を解説！

2020年7月24日 ワードプレスでの見出しの付け方！アクセス集まる正しい使い方を解説

表示条件（〇つ以上見出しがあるとき）を満たそう

これが原因なことも、割と多い。

目次は表示条件を満たしてないと、表示されないよ。

例えばあっぴと同じ設定にしたのなら、表示条件は「3つ以上見出しがあるとき」にしたはず。

なので最低でも見出しを3つは付けると、目次が表示される。

Q.各項目をクリックすると、ジャンプしたときに見出しより下に行ってしまいます・・・

この場合は、以下の２つを確認しよう。

• WordPressにログインしていませんか？
• 固定ヘッダーを設定していませんか？

WordPressにログインしている場合

もしかして、ワードプレスにログインしたままクリックしてないかな？

その場合、見出しが管理用の帯に隠れてしまうよ。

なのでログアウトしてから、目次をクリックしてみてね。

固定ヘッダーを設定している場合

これはスマホから見ると、よくある不具合。

固定ヘッダーを設定している場合、下のように、見出しが固定ヘッダーに隠れてしまうことがある。

これの対処法は、以下のとおり

1. スムーズ・スクロール効果を有効化する
   (「アンカーリンクにジャンプではなくスクロールする」にチェックを入れる)
2. 設定を更新
3. 上級者向けの設定を表示
4. スムーズ・スクロール上部余白を増やす
5. 設定を更新

ただし上記の設定だと、各項目をクリックしたときに高速でスクロールする。

動きが激しくなるので、位置を正確にするのとどちらを優先するか考えるといいね。

あっぴ

個人的には高速スクロールが苦手なので、位置の方を妥協してます

Q.記事(ページ)ごとに非表示にするにはどうすればいいですか？

非表示にしたい記事や固定ページの本文に、下のコードを入力するだけで出来るよ。

[no_toc]

ただし、半角/全角とか大文字/小文字を間違えるだけでも機能しない。

なので必ず正確に入力してね。

あっぴ

間違えやすいからコピペがおすすめ！

また、入力する場所は、本文中ならどこでもOK。

カスタムHTMLじゃなくて、（普通の文章と同じように）段落で入力しても大丈夫だよ。

終わりに

ということで、WordPressに目次を入れる方法でした！

あなたのブログにも目次を表示できたかな？

もし「記事を見てもやり方がわからない・・・」ってときは、あっぴまでお気軽に連絡してね。

あなたの状況を教えてくれれば、あっぴの方で確認して教えることもできるので。

⇒あっぴにメールはこちら。

ラッコさん

お問い合わせはお気軽に

また、WordPressには目次のプラグイン以外にも、便利なプラグインがたくさんある。

ブログ初心者さんにおすすめのプラグインはまとめてあるので、よかったらチェックしてね。

2020年8月3日 知らないと損！ブログ初心者におすすめのWordPressプラグイン9選(2020年版)

ではでは、参考になれば幸いです！

以上、あっぴ（@mypacist）がお送りしました～

今回紹介したおすすめ記事

見出しが表示されないなら要チェック！

2020年7月24日 ワードプレスでの見出しの付け方！アクセス集まる正しい使い方を解説

他のおすすめプラグインも見るなら

2020年8月3日 知らないと損！ブログ初心者におすすめのWordPressプラグイン9選(2020年版)

マスターするとブログ運営の効率が上がるよ

2017年8月27日 参考サイトとの行き来が爆速化！ショートカットキーで画面切り替えをする手順と覚え方

2020年10月23日 キーボードでコピペをする方法！覚え方&忘れる時の対処法付きで解説

こちらもおすすめ

テーマ選び、大丈夫ですか？

2020年7月28日 【失敗者続出】稼げるテーマの中からあなたのブログテーマを選ぶのはおすすめしません！