【目次の自動生成方法を伝授】WordPressプラグイン「Table of Contents Plus」設定方法を完全図解解説!

こんにちは、やまかず(@yamakazu001)です。

本でもブログ記事でも、目次って、要点がまとまっていて、大切な部分なんですよね。ブログで目次を自動で作る方法についての話です。

やまむら
普段、本って読んだりする!?

30代会社員/木村さん
うん、たまに読むよ!

やまむら
目次には、目を通すかな・・・?

30代会社員/木村さん
目次は必ず見るようにしているよー

やまむら
そうなんだね!ブログでも目次があると見やすくなるし、簡単に作れるんだよね。今日はその作り方の話だよ!
WordPressブログ構築のこれまでの流れ!

ムームードメインにて、ドメインを取得する作業
取得したドメインを「エックスサーバー」に設定する作業
「エックスサーバー」に「WordPress」をインストールする作業
「SSL化」する作業
パーマリンクの設定作業
タイトル・キャッチフレーズの設定作業
テーマのインストール方法
「Googleアナリティクス」の設置作業
「Google Search Console」の設定作業
各種「WordPressプラグイン」の設定作業
今日やること!
WordPressプラグイン「Table of Contents Plus」の設定作業をしていきます。

記事に自動で目次を生成してくれる「Table of Contents Plus」の設定方法について、お伝えしていきたいと思います。下記の目次もこのプラグインのおかげで、表示されています。

ブログに目次を表示させたほうが良い理由

ブログに「目次」を設置するためには、WordPressプラグイン「Table of Contents Plus」を使うと、簡単に目次を作ることができます。ちなみに、下記のような目次を作ることができます。

30代会社員/木村さん
こんな目次が作れるんだね!
このような「目次」をカンタンに作ることができます♪
目次例

「WordPressのプラグインとは何んなのか!?」については、こちらから確認できます。

目次の便利さと読者目線

本を読む時、基本的には、はじめからめくっていき、目次に目を通しますよね。その目次があるからこそ、どういったことが書いてあるのか、おおよそ把握できるんですよね。

 目次を見る

30代会社員/木村さん
たしかに、目次から見てしまうよね!

 

また、本を読み直したり、時間がないときなど、あえて目次を見てから、気になるページを開いて、読んだりする事もありますよね。これって目次があるから、できるんです。

目次のメリット

ブログも同じなんです。読者のことを考えると、目次は無いより、あったほうが圧倒的に良いです。どういうことが書いてある記事か、さっと見れるし、目次項目をクリックすると、その項目にも移動できて便利なんです。

ブログの目次

だからこそ、読者さんのことを考えて、目次はつけてあげましょう。

記事ごとに目次を手動で作ると、非常に大変です。なので、今回紹介するプラグインを入れて、自動で目次を生成してもらう事を、おすすめしています。

Table of Contents Plusのインストール方法

WordPress管理画面にログイン後の状態から、作業をしていきます。もしログイン方法がわからない場合は、「WordPress管理画面のログイン方法」よりご確認ください。

1WordPressプラグインを「新規追加」

プラグインを新しく追加していく作業をしていきます。

「プラグイン」にカーソルを合わせる
「新規追加」をクリック

プラグインを新規追加

2プラグインを検索

画面が切り替わりましたら、プラグインの検索をしていきましょう。「プラグインの検索窓」に下記のキーワードを入力してください。

入力するプラグイン名
Table of Contents Plus

プラグインを検索

3プラグインをインストール

すると、下記のように検索結果が表示されます。すぐに見つからない場合、スクロールしましょう。「Table of Contents Plus」の右横の「今すぐインストール」をクリックして、インストールしてください。

今すぐインストール        

4プラグインを有効化

インストール後、下記のように画面が切り替わります。「有効化」をクリックしてください。

有効化

5「有効化」完了

「プラグインを有効化しました。」という表示が出ましたら、有効化が完了となります。

有効化完了

Table of Contents Plusの「インストール~有効化」まで、終わりましたら、引き続き「設定」をしていきましょう。

Table of Contents Plusの設定方法

Table of Contents Plusの設定をしていきましょう。WordPress管理画面内の左メニューから操作していきます。

「設置」にカーソルを合わせる
「TOC+」をクリック

Table of Contents Plus設定

 

画面が切り替わりましたら、詳細の設定をしていきましょう。ここでは、おすすめの設定方法をお伝えします。

「表示条件」 ⇒ 「2」を選択
目次が表示される条件を指定する部分です。
・僕は見出しが2つ以上ある時に、目次を表示させるようにしています。
「以下のコンテンツタイプを自動挿入」 ⇒ 「post」と「page」にチェック
どのコンテンツに「目次」を表示させるかを選択できる部分です。
・post(投稿ページ)・・・記事を投稿する部分
・page(固定ページ)・・・問い合わせとかの固定ページ
固定ページに表示させたくない場合、pageのチェックは外しましょう。
「見出しテキスト」 ⇒ 「目次」と入力
目次部分のタイトルを入力してください。
「テキストを表示」 ⇒ 「開く」と入力
 「テキストを非表示」 ⇒ 「閉じる」と入力
目次を表示・非表示にさせる時の、『ボタン部分』のタイトル名の事です。
「上級者向け」 ⇒ 「表示」をクリック
※上記の設定以外は、初期設定の状態のままで大丈夫です。「プレゼンテーション」部分は好みで、変更しても良いでしょう。

Table of Contents Plus設定

 

引き続き画面が、下部に出現します。下記のように設定していきましょう。

⑥「見出しレベル」
「heading 2 - h2」
「heading 3 - h3」
のみにチェックを入れて、他はチェックを外しましょう。
※上記の設定以外は、初期設定の状態のままで大丈夫です。

設定後、「設定を更新」をクリックしてください。

Table of Contents Plus設定

これで、Table of Contents Plusの設定は完了となります。次の項目では、どのように記事を書いていけば、目次が表示されるか!?その方法についてお伝え致します。

どのように、目次を表示させるのか!?操作方法とは

記事に文章を書くだけだと、目次は表示されません。上記で設定した「見出し」部分を、記事内に入れてあげることが必要なんです。念の為、今回設定した「目次が表示される条件」が、下記になります。

目次が表示される僕の設定
  • 「見出し」が2つ以上
  • 「h2」と「h3」の見出しに有効

 

具体的な投稿ページの使い方については、別途お伝えする予定です。ここでは、「見出し」をどうやって入れていくのか!?それについて、お伝えしていきます。

記事を書く流れ(一例)
記事を書く流れを1つお伝えすると、
文章を書く
見出しを決めて
見出しを作る

色んな流れがありますが、見出しを作る流れを見ていただくために、この流れにしました。では、さっそくやり方を見ていきましょう。

1投稿画面を開く

WordPress管理画面内の左メニューから操作していきます。

「投稿」にカーソルを合わせる
「新規追加」をクリック

投稿新規追加

2記事内容を入力

下記が投稿画面です。文章を以下のように書いてみました。あくまでも見本です。この状態だと、目次は表示されません。プレビューを押して一応確認してみましょう。

投稿画面

 

プレビューで確認すると、もちろん「目次」は表示されていない状態です。

プレビュー画面

3「見出し」部分を考える

次にすることは、見出し部分をどこにするのか!?を考えることです。ここでは、下記部分を見出しにしてみたいと思います。

  • 「見出しをつける方法」
  • 「見出しが表示される条件」

見出し考える

4「見出し」をつける手順

続きまして、「見出し」をつける手順をお伝えしていきます。

「見出し」にする部分を、マウスでなぞって青色に選択する
「段落」をクリック
「見出し」を選択して、クリック

見出しを選択手順

 

「段落」をクリックすると、見出し1~6まで選べます。ここでは「見出し2」を選択しました。

見出しを選択

見出しをつける流れを再確認♪
記事内容を入力する
「見出し」部分をマウスで選択する
「段落」をクリックして、見出しを選択する
※「見出し」を選択すると、内部に「見出しタグ」というものが入るようになります。設定上、最低でも、2つ以上見出しをつけると、目次が表示されるようになります。

 

「見出し」を選択すると、投稿画面では、下記のように変わります。「プレビュー」をクリックして、どのように変わったのか、見てみましょう。

投稿画面

 

プレビュー画面では、「見出し」が1つ表示されるようになりました。まだ、目次は表示されていない状態です。

プレビュー画面

5「見出し」を2つ以上設定

同じ流れで、もう1つの見出しも設定してみましょう。すると、下記のように変わります。再度「プレビュー」をクリックしてみましょう。目次が表示されれば、成功です。

プレビュー画面

 

プレビュー画面を見てみると、このように「目次」が表示されるようになりました。

プレビュー画面

こういう流れで、「見出し」を2つ以上設定すると、目次が表示されるようになります。

まとめ

Table of Contents PlusというWordPressのプラグインを使った、目次を自動生成する方法について、お伝えしました。いざ、目次をつけたくなっても、手動で入力していくのは大変です。

そのためにも、こういう便利なプラグインを利用するようにしましょう。

あの人のようなブログが「迷わず作れる教科書」をプレゼント

WordPressでブログを作ってみたい…でも、難しそうだし、どうやるかわからない。一度作ってみたけど失敗してしまった。なぜか『あの人のようなブログにならない…』。

そんなあなたでも、スムーズにブログが作れるようになる
『あの人のようなブログが「迷わず作れる教科書」』
を期間限定特典としてプレゼントしています。

さらに・・・
今回プレゼントを受け取った方には、「ブログを使ってお金を稼ぐ方法」も教えています。

期間限定でお渡しておりますので、ぜひこの機会に手にいれてください。
※特典を手に入れられた方は、メルマガへ登録されます。

.

Twitterでフォローしよう

おすすめの記事