【無料配布中】実録!あっぴが趣味ブログで月1万円稼ぐまでの道のり

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

このページは広告を含む場合があります。

 

どうも、あっぴ(@mypacist)です!

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

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

https://appiblog.net/wp-content/uploads/2021/01/rakko-nomal.jpgラッコさん

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

https://appiblog.net/wp-content/uploads/2021/01/appi-ver4-kiran.jpgあっぴ

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

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

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

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

 

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

 

注意

記事に見出しを付けていない場合、設定しても自動作成されません!
また、付けていてもやり方が間違っている場合、自動作成されないことがあります!

なので必ず見出しを付けるのはもちろん、正しいやり方をしてください!

⇒正しい見出しの付け方はこちら

目次の完成例

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

 

基本はシンプルな目次。

 

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

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

 

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

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

  1. プラグインのインストール&有効化をする
  2. 設定画面に移動する
  3. 設定を変える
  4. 最終確認
https://appiblog.net/wp-content/uploads/2021/01/appi-ver4-kiran.jpgあっぴ

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

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

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

 

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

 

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

https://appiblog.net/wp-content/uploads/2021/01/appi-ver4-hohoemi2.jpgあっぴ

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

早くて楽で確実!

 

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

 

「有効化」をクリック。

 

TOC+の設定画面に行こう

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

https://appiblog.net/wp-content/uploads/2021/01/appi-ver4-kiran.jpgあっぴ

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

 

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

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

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

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

 

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

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

 

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

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

位置

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

 

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

 

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

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

 

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

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

https://appiblog.net/wp-content/uploads/2021/01/appi-ver4-kiran.jpgあっぴ

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

表示条件

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

 

おすすめは、3つ。

 

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

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

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

 

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

それぞれの意味は

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

のこと。

 

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

 

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

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

https://appiblog.net/wp-content/uploads/2021/01/appi-ver4-kiran.jpgあっぴ

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

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

ここは

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

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

 

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

 

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

 

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

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

 

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

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

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

ここは、読者さんが

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

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

 

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

 

 

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

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

 

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

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

 

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

 

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

ここは、目次を

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

を決めるところ。

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

 

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

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

 

というのも

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

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

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

階層表示

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

 

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

こんな感じで変わるよ↓

 

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

 

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

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

 

番号振り

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

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

 

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

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

 

STORK19の場合

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

 

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

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

https://appiblog.net/wp-content/uploads/2021/01/appi-ver4-hohoemi2.jpgあっぴ

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

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

 

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

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

STORK19以外の場合

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

 

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

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

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

 

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

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

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

 

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

 

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

 

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

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

 

横幅(外観)

SANGOをお使いの方へ

SANGOを使っている場合、「外観」はすべて飛ばして、「上級者向け」を設定をしよう。

(SANGOではプラグイン側の外観の設定は、すべて無効化されるため)

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

上級者向け設定

 

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

 

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

 

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

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

回り込み(外観)

回り込みは、

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

を決めるところ。

 

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

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

 

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

 

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

文字サイズ(外観)

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

 

単位は

  • pt
  • em

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

 

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

 

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

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

プレゼンテーション(外観)

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

 

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

 

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

 

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

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

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

 

上級者向け設定

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

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

 

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

 

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

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

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

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

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

 

おすすめは・・・

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

 

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

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

見出しレベル

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

 

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

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

を、使うんだよね。

また、ごくまれに

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

まで使うこともある。

 

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

 

おすすめは、

  • heading 2 – h2
  • heading 3 – h3

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

 

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

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

設定を更新

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

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

https://appiblog.net/wp-content/uploads/2021/01/appi-ver4-hohoemi2.jpgあっぴ

これで設定は完了!

最終チェックをしよう

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

 

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

https://appiblog.net/wp-content/uploads/2021/01/appi-ver4-kiran.jpgあっぴ

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

 

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

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

 

よくある質問と対処法

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

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

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

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

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

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

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

  1. 機械にもわかるように「正しく」見出しを付けよう(見出しタグを使おう)
  2. 表示条件(〇つ以上見出しがあるとき)を満たそう
https://appiblog.net/wp-content/uploads/2021/01/appi-ver4-kiran.jpgあっぴ

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

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

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

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

 

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

見出しのSample

見出しはこんなの

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

 

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

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

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

 

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

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

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

 

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

 

正しい付け方はこちら↓

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

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

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

 

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

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

 

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

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

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

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

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

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

 

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

 

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

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

 

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

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

 

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

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

https://appiblog.net/wp-content/uploads/2021/01/appi-ver4-kiran.jpgあっぴ

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

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

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

[no_toc]

 

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

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

https://appiblog.net/wp-content/uploads/2021/01/appi-ver4-hohoemi2.jpgあっぴ

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

 

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

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

 

終わりに

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

 

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

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

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

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

https://appiblog.net/wp-content/uploads/2021/01/rakko-nomal.jpgラッコさん

お問い合わせはお気軽に

 

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

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

 

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

以上、あっぴ(@mypacist)がお送りしました~

 

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

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

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

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

 

こちらもおすすめ

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

26 COMMENTS

coloriage

あっぴーさん。今月からブログをはじめました。目次の方法がわからず、探していたら、あっぴーさんのブログに出会いました。すごくわかりやすくてよかったです。これから、目次が活躍してくれそうです。ありがとうございました。まだまだ、試行錯誤中。苦戦の日々ですが、少しずつマスターしていけたらいいなと思っています。

返信する
natsu7

あっぴさん
初めまして!実は昨日ブログ開設を行い、今日記事を編集していたのですが、目次の設定方法がわからなかったところ、こちらの記事を見つけました。
初心者でもわかりやすくて本当に助かりました。ありがとうございます!

返信する
りょーざき

あっぴさんのこちらの記事で目次の設定ができました。ありがとうございました。
しかし、目次の文字をクリックしてもそこの項目へジャンプやスクロールがされません。
何が原因かわかりますでしょうか?

返信する
あっぴ

りょーざきさん

こんにちは、ブログ管理人のあっぴです。

 
以下の2つをお伺いしてもよろしいでしょうか?

・WordPressのバージョン
・プラグインのバージョン

返信する
りょーざき

あっぴさん

お返事ありがとうございます。

・WordPressのバージョン:5.0.3
・プラグインのバージョン: 1601
です。

よろしくお願いいたします。

返信する
あっぴ

りょーざきさん

こんにちは、あっぴです。
返信が遅くなり申し訳ないです。

ジャンプできるようになったようですね!
よかったです!

返信する
うたみの

はじめまして。うたみのと申します。
目次の記事非常に役に立ちました!

一点だけ質問がありまして、目次の最後に「関連」みたいな字が必ず入るんですが、どうしたら良いでしょうか…

あっぴ

うたみのさん

コメントありがとうございます!
ブログ運営者のあっぴです。

 
「上級者向け」から「除外する見出し」で設定していただければ幸いです。
「関連」と入力して保存すれば消えると思います。

参考にしてみてください。

崎田圭

とてもシンプルなのに、知りたいことが的確に記載してあり、問題点がすぐに解決できました。質の高い記事のご提供ありがとうございます。

返信する
あっぴ

崎田圭さん

コメントありがとうございます、ブログ管理人のあっぴです。

お力になれたようでよかったです!

返信する
佐藤喜一郎

 お世話様です。
申し訳ありません・・・。
実は、本日返信(アドバイス)いただいたメールですが、フォルダ移動していた時に紛失してしまいました。
再度、送信いただけますでしょうか。
お手数をお掛けいたしまして、申し訳ありません。
宜しくお願いいたします。

返信する
TAKE

今まで目次の作り方を知らなかったのですごく参考になりました!
また、あっぴさんの説明もとってもわかりやすかったです!
さっそく今日から使っていきたいと思います!

返信する
あっぴ

TAKEさん、コメントありがとうございます。
あっぴです。

記事が参考になったようでよかったです。

ぜひぜひ、目次を使ってわかりやすい記事を書いていってくださいー。

返信する
しんいち

めっちゃ分かりやすかったです!
リンクで張ってある、見出しの使い方と意味もスゴク重要だってことも初めて知りました!
こんなことも知らないでブログ始めていたとは、我ならビックリでした!(笑)さっそく活用させてもらいました。( *´艸`)
ほんまありがとうございます!!

返信する
あっぴ

しんいちさん

コメントありがとうございます。あっぴです。

記事が参考になったようで何よりです!

目次や見出しがあると
読者さんからもGoogleからも喜ばれます。

なので是非、これからも続けていってください。

返信する
やすみん

あっぴさん

目次の初期設定を非表示にしたくて、
こちらの記事を拝見しました。
とてもシンプルにわかり易くて、
助かりました!
モヤモヤが晴れました。
ありがとうございました!

返信する
あっぴ

やすみんさん

コメントありがとうございます。あっぴです。

初期設定の表示/非表示でも、記事の読みやすさが変わりますよね。
お役に立ててよかったです!

返信する

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です