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

WordPressブログでも度々見る、目次。

ピンポイントで知りたいことがあるときは、目次のリンクを押すと指定箇所にジャンプできるから便利なんだよね。特に記事が長くなってくると、見たい場所を探すのも時間かかるからねぇ。こういう小さな気遣いが、読者さんに喜ばれる。

ってことで今回は、そんな便利な目次の作り方をご紹介!

ワードプレスのプラグイン「Table of Contents Plus(TOC+)」は使い方が簡単だし、1回設定するだけで目次が自動作成されるようになるよ。なのであなたのブログにも、このプラグインを入れてみよう。

 
※目次は見出しタグを使ってないと表示されないよ。なので記事には必ず、見出しタグを入れてね。
⇒見出しタグを使った、正しい見出しの作り方はこちら。

WordPressプラグイン「Table of Contents Plus(TOC+)」のインストールと有効化方法

まずはいつも通り、プラグインをインストールするよ。

ワードプレスにログインして、画面左の「プラグイン」から「新規追加」をクリックしよう。

 
そんで右上のプラグインの検索に「Table of Contents Plus」を入力。名前が長いので、コピペすると楽だよ。

 
Table of Contents Plusの横にある「今すぐインストール」をクリックして

 
青色の「有効化」ボタンをクリック。

 
「プラグインを有効化しました。」って表示されればおっけー。

 

Table of Contents PlusでWordPressブログに目次を自動作成させる使い方

ワードプレス管理画面でTOC+設定画面に移動する

今度は画面左の「設定」の中から、「TOC+」をクリック。TOC+はTable of Contents Plusの略称だね。

 
そしたらTable of Contents Plusを設定できる画面に行けたはず。こんな画面ならおっけー。

 
いじる設定は、基本設定だけだよ。

 

位置

まずは「位置」ってところね。ここでは、目次をどこに表示させるかってことを選べるよ。

記事はだいたい起承転結みたいに起があると思うので、おすすめはデフォルトの「最初の見出し前」。この位置だと、起の後に目次が出てくる感じ。

 

表示条件

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

あっぴは3つにしてるよ。

 

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

ここは、どんなタイプの記事に目次を入れるかってことを決めるところ。選択肢がたくさんあるけど、postとpageだけをどうすればいいか考えれば大丈夫。

postは投稿した記事、つまり今あなたが見てるような普通の記事のこと。pageは固定ページ、つまりプロフィールとかお問い合わせが書いてあるページのこと。

postは入れないと記事で表示されないのでチェック入れとこう。pageはお好みで。あっぴはpostだけにチェックを入れてるよー。

 

見出しテキスト

目次の上にタイトルを表示

タイトルっていうのは、あっぴのブログで言うと「目次」って文字が書いてあるところ。ここを表示させますか?表示させるなら、タイトルは何にしますかー?ってことを決められる。

 
タイトルはあった方がわかりやすいね。いきなりポンッと書いてあっても、「何だろこの文章の羅列」って感じだし。

タイトルの名前は、デフォルトだと英語でContensって書いてある。このままだとわかりにくいので、日本語に変えておこう。

「目次」って書いとくのが確実に誰にでも伝わるね。

 

ユーザーによる目次の表示・非表示を切り替えを許可

ここは読者さんが目次いらないと思ったら非表示にできるようにしたり。反対に、目次がほしいと思ったら表示させられるようにするところ。

ここはチェック入れといた方が、読者さんに選んでもらえるのでいいね。

 
その下のテキストを表示・非表示のところは、切り替えるのために押すリンクに何て書くか決めるところ。

デフォルトだと英語になってるから、日本語に変えよう。例に書いてあるように「表示」「非表示」にするか、あっぴは「開く」「閉じる」にしたよ。お好きな書き方でどうぞ。

 

最初は目次を非表示

ここは目次を最初っから表示させるのか。それとも最初は非表示で、読者さんが必要なときに自分にしてもらうのかを決められる。「最初は目次を非表示」にチェックを入れると、最初は非表示になるよ。

ここもお好みで。

あっぴはこのブログでは目次が長くなることが多いので最初は非表示に。趣味ブログでは目次が長くなることが少ないので、最初から表示させてるよ。

どっちにすればいいかよくわからなければ、まずは表示。で、自分で書いた記事を見てて「なんだか目次が長くて邪魔だなぁ」って思うことが多ければ、後で非表示に変えればOK。

 

階層表示

大きい見出しと小さい見出しで、階層がわかるようにするかを決めるところ。

ちょっとわかりにくいので、画像を見てもらったほうが早いかな。こんな感じで変わるよ↓

 
階層あるとくくりがわかりやすいので、チェックするのがおすすめ。

 

番号振り

文章の頭に番号を入れるかどうかを決めるところ。

 
あった方がぱっと見で、どのくらい見出しがあるのかがわかりやすい。基本的にはあって困るものでもないので、チェック入れとこう。

 

アンカーリンクにジャンプではなくスクロールする

目次に書いてある文章をクリックして、移動するときの方法を選べる。ジャンプだとパッと画面が切り替わって、スクロールだとシュルシュルシュルーって移動していくよ。

個人的にはスクロールだと突然動き出してびっくりしちゃうから、ジャンプにしてるwジャンプならどっかのページに移動するときと同じで、見慣れてるからね。

 

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

外観は、プレゼンテーションであなたの好きなデザイン選ぶだけでOK。黒はちょっと見にくいかなーと思うけど、他のは全部見やすいと思う。

あっぴは水色にしてるよ。

 

設定を更新

ここまで設定できたら、「設定を更新」のボタンをクリック。画面で1番下の、青いやつね。

 
これでTable of Contents Plusの設定は完了!

 

実際に目次が表示されるか確認しよう

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

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

 
こんな感じで目次(記事内の見出し一覧)が表示されればOK!

 

設定したのに目次が表示されないときの対処方法!目次の入れ方は?

機械にもわかるように「正しく」見出しを付けよう(見出しタグを使おう)

「ちゃんと設定したのに目次が表示されないです・・・」ってお問い合わせはめちゃくちゃ多いんだけど、9割以上の確率で原因はこれ。冒頭でも言ったように、記事内に正しく見出しを付けてないから。

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


※デザインはWordPressのテンプレート(テーマ)ごとに違っていたり、設定によって変わる。

 
「見出しは付けてるよー」って人でも、間違ったやり方で付けてるパターンが意外と多い。手動で背景色や文字色を付けていたり、太字や大きな文字にしたりね。

 
実はね、WordPressには見出し用のタグがあるんだ。

で、書いた文章に見出しタグを付けてあげると、自動的に背景色や文字色が付いたり、太字や大きな文字になる仕組み。

そして、そのように見出しタグを付けてあげると、機械もどこが見出しなのか判断できるようになる。なのでプラグイン「table of contents plus」でも目次が自動作成される仕組み。

 
なのであなたが「ん?目次が表示されないぞ・・・?」って思ったら、まずは見出しタグを使って正しく見出しを付けてみてね。やり方はこちら↓

ワードプレスの正しい見出しの作り方。見出しタグでアクセスUP

 

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

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

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

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

 

終わりに

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

もし「記事を見ても目次の入れ方がわからない・・・」ってときは、あっぴまでお気軽にメールしてね。あなたの状況を教えてくれれば、あっぴの方で確認して教えることもできるので。

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

 
また今回のような目次を始め、ワードプレスに入れておいた方がいいプラグインは、『WordPressの始め方・設定ガイド【完全版】』にて詳しく紹介してるよ。既にWordPressを始めている人でも、必要なプラグインを入れてなかったり設定をちゃんとできてない人がめちゃくちゃ多いからね。

現在このWordPressの始め方・設定ガイドは無料プレゼント中。よかったらあなたも受け取ってみてね。

※プレゼントは予告なく終了することがあります。その点はご了承ください。

 
無料プレゼントの受け取り会場はこちら↓
【無料配布アイテム】趣味ブログスタートダッシュセットのお申込み受付中!

19 COMMENTS

やすみん

あっぴさん

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

返信する
あっぴ

やすみんさん

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

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

返信する
しんいち

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

返信する
あっぴ

しんいちさん

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

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

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

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

返信する
TAKE

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

返信する
あっぴ

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

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

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

返信する
佐藤喜一郎

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

返信する
崎田圭

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

返信する
あっぴ

崎田圭さん

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

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

返信する
りょーざき

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

返信する
あっぴ

りょーざきさん

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

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

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

返信する
りょーざき

あっぴさん

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

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

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

返信する
あっぴ

りょーざきさん

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

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

返信する

コメントを残す

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