BLOG

ブログ記事の目次の作り方を画像と動画で分かりやすく紹介!最強のプラグインはコレだ!

2020年2月25日

ブログの目次の作り方を画像と動画で分かりやすく紹介!最強のプラグインはコレだ!
もへじ君

ブログ運営をはじめたのですが、、、

私の記事には「目次」がないことに気が付きました。

どうやって目次を作るのか教えてください。

こんな疑問にお答えします。

本記事で紹介する内容

  • 目次のメリット
  • 目次の作り方

この記事は「目次の作り方」をメインで紹介しています。

ブログにおいて目次は読者に記事を読んでもらうためには欠かせないツールです。まだ目次を設置していない人がいればこの機会にぜひ設置してみてはいかがでしょうか?

余計な情報は飛ばして読んでもらってもOKです。目次の作り方だけに集中して読み進めてください。

それでは、どうぞご覧ください。

ブログ記事に「目次」があるメリット

ブログ記事に「目次」があるメリット

ブログの記事に目次があるメリットは3つです。

  1. 読者が読みたいところをピンポイントで読める
  2. 目次があると、記事の内容が一目で分かる
  3. 滞在時間が増える

読者にとって目次があることはメリットだと思いますが、実はブログの運営者側にもメリットはあります。

目次があることで、記事の内容が一目で分かるので「とりあえず気になる見出しがあるから読んでみようかな?」と思ってくれるユーザーがいます。

1人に読んでもらうことがブログでは大切です。(^∀^)アリガトウ!

目次がないと、記事の内容が分からないという理由で読むのをやめてしまう可能性がありますね。

ブログ記事の「目次の作り方」を紹介【Wordpress編】

ブログ記事の「目次の作り方」を紹介【Wordpress編】

ワードプレスで「目次」を作る場合は、2通りの方法があります。

ひとつは、htmlなどを編集して手動で作成する方法です。

手動作成のメリット

  • 重複キーワードを減らせる
  • プラグインを使わないので、サイトの読み込みスピードが落ちない

もう一つは、プラグインを使って自動で作成する方法です。

自動作成のメリット

  • 一度導入すれば、毎回作業の必要なし
  • 見た目がキレイで使いやすい
masaya

今回はプラグインを使って、初心者さんでも簡単に目次が作れる方法を紹介します。

プラグインの入れ過ぎは、サイトのスピードを落とすと言われていますが、、、そこまで気にする必要はありません。

むしろ毎回記事を書くたびに手動で目次を作る時間の方が非効率かもしれません。

以下の図は、私のブログのサイトスピードを測定した結果です。

ブログのサイトスピードの画像

ちなみに、当ブログに入っているプラグインの数は、2020年2月現在で23個です。

おそらく平均より多い方だと思いますが、それでもスピードは98で良好です!

もちろん、今から紹介するプラグインも入っているので、ご安心ください。
( ^ω^)

目次作成プラグイン「Table of Contents Plus」の紹介【画像+動画あり】

目次作成プラグイン「Table of Contents Plus」の紹介【画像+動画あり】

それでは本題に入ります。

ここでは、目次をサクッと設置できる人気のプラグインを紹介します。

そのプラグインの名は「Table of Contents Plus」です。

初心者でも簡単に使うことができるプラグインなので、ぜひこの機会に利用してみてください。

masaya

今回は導入方法と設定方法に分けて、画像を使いながら解説した後に動画でも紹介します。

1.Table of Contents Plusの「導入方法」

1、まずはコチラの→ Table of Contents Plus をコピーしてください。

2、ワードプレスのダッシュボードの「プラグイン」→「新規追加」を選択

Table of Contents Plusの設定解説画像1

3、Table of Contents Plusを貼り付け→「今すぐインストール」

Table of Contents Plusの設定解説画像2

4、「有効化」をクリック。

Table of Contents Plusの設定解説画像3

これでプラグインの導入は完了です。

2.Table of Contents Plusの「設定方法」

続いて設定を行います。

1、ワードプレスのダッシュボードの「設定」→「TOC+」を選択

Table of Contents Plusの設定解説画像4

2、各項目を設定していきます。

ロボッチ

え~!?設定項目が8個もあるの?と驚くことなかれ!

超~簡単です!

設定項目8個

  1. 位置
  2. 表示条件
  3. 以下のコンテンツタイプを自動挿入
  4. 見出しテキスト
  5. 階層表示
  6. 番号振り
  7. スムーズ・スクロール効果を有効化
  8. プレゼンテーション

以降は私のブログの設定になります。

①位置:「最初の見出しの前」を選びます。

Table of Contents Plusの設定解説画像5

②表示条件:「2つ以上見出しがあるとき」を選びます。※見出しの数を「目次」に反映させる設定です。3に設定して、見出しが2つしかないと「目次」は表示されません。私の設定は「2」です。

Table of Contents Plus 表示条件

③以下のコンテンツタイプを自動挿入:postを選びます。posが個別(投稿)記事、Pageが固定記事です。

Table of Contents Plusの設定解説画像6

④見出しテキスト:ここでは、3つの項目を設定します。※以下の画像を参考に①~③を設定してください。

1.①には目次に表示したい言葉を入れます。例えば「記事の内容」と入力すれば「記事の内容」と表示されます。私は「目次」としています。

2.②には目次のとなりに表示される[表示]などの文字を決めます。私は「表示」と「隠す」にしています。

3.③記事を開いたときに初めから目次の内容を表示したいときはチエック欄の☑️を外す、「目次」をクリックすると内容が見れるようにする場合は☑️を入れる。私は☑️ありです。

Table of Contents Plusの設定解説画像7

⑤階層表示:階層表示に☑️を入れるとh2とh2見出しの間にh3やh4の見出しがあれば、2.1や2.2のように階層として表示されます。私は☑️ありです。

Table of Contents Plusの設定解説画像8

⑥番号振り:番号振りは上記の図のように、番号の有無表示だけです。私は☑️ありです。

⑦スムーズ・スクロール効果を有効化:☑️を入れると記事を高速で流しながら移動します。☑️を外すと一気にクリックした「見出し」までジャンプします。私は☑️ありです。

point ! スクロールしながら移動することで、途中の画像などに目がとまり、読んでもらえる文書が出てきます。(一気にジャンプすると目に付くことはありません)

⑧プレゼンテーション:見出しのデザインを決めます。私は水色を選んでます。

Table of Contents Plusの設定解説画像9

3、「設定を更新」をクリック。

Table of Contents Plusの設定解説画像10

4、実際に投稿記事で反映されてるか確認して終了です。

お疲れ様ででした。(^-^)∠

注意ポイント

  • ③のPOSTに☑️が入っているか?
  • ②の表示条件の数字が大きい数字いなっていないか?(4とか5など)

まとめ:目次は読者と製作者に利益をもたらす優れたツール

まとめ:目次は読者と作者に利益をもたらす優れたツール

ブログ記事の目次は、読者と運営者の両方にとって利益をもたらす必要なツールです。

masaya

本屋に行って本を買う時に、あなたなら何を見て購入するか判断しますか?

そうですね~?

タイトルを見て良さそうな本だと思ったら、次は目次を見て、どんな内容か?を確認します。

面白そうな見出しがあれば買いますね!

もへじ君

目次は、記事の内容を読者に伝える大事なツールです。

魅力的な見出しを付けることで、読者は「読んでみようかな?」と感じます。

ぜひ、この機会に目次を設置してください。

それでは、今日はこの辺で失礼します。

またネ☆(*^-^)o゙

Sponsor Link




  • この記事を書いた人

Masaya

はじめまして、フリーランスWebライターのMasayaです。 大手電機メーカーを転職後フリーライターとして、さまざまなジャンルの執筆に携わっています。ブログでは、これまでの経験から得たノウハウや情報を発信しております。

-BLOG