BLOG

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

2020年2月25日

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

[voice icon="https://waxtuze-yoka.com/wp-content/uploads/2020/02/1316ccecee8f1076901e12e508f385e5.png" name="もへじ君" type="l"]

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

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

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

[/voice]

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

[su_box title="これから紹介する内容" box_color="#1e73be"]

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

[/su_box]

今回は、目次の作り方を画像と動画を使って分かりやすく紹介します。

[voice icon="https://waxtuze-yoka.com/wp-content/uploads/2020/02/04166a201faf12742cfb7eafae9100bb.jpg" name="マサヤ" type="l"]

こんにちは、マサヤです。

アフィリエイト歴約7年、最高収益6桁。ペラサイトとブログ運営、まれに企業様の広告作成で収益を得ているアラフォー♂です。

[/voice]

この記事は「目次の作り方」がメインです。

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

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

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

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

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

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

 

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

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

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

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

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

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

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

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

[box class="blue_box" title="手動作成のメリット"]

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

[/box]

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

[box class="blue_box" title="自動作成のメリット"]

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

[/box]

[voice icon="https://waxtuze-yoka.com/wp-content/uploads/2020/02/04166a201faf12742cfb7eafae9100bb.jpg" name="マサヤ" type="l"]

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

[/voice]

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

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

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

サイトスピード

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

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

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

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

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

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

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

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

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

[voice icon="https://waxtuze-yoka.com/wp-content/uploads/2020/02/04166a201faf12742cfb7eafae9100bb.jpg" name="マサヤ" type="l"]

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

読むのが面倒くさい!そんな人は、動画で見てください。

[/voice]

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

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

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

Table of Contents Plus ワードプレス新規追加

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

Table of Contents Plus 今すぐインストール

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

Table of Contents Plus 有効化

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

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

続いて設定を行います。

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

Table of Contents Plus 設定→TOC+

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

[voice icon="https://waxtuze-yoka.com/wp-content/uploads/2020/02/716c79d322213ca0da66c387ce1efffb.png" name="ロボッチ" type="l"]

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

超~簡単です!

[/voice]

[box class="blue_box" title="設定項目8個"]

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

[/box]

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

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

Table of Contents Plus 位置

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

Table of Contents Plus 表示条件

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

Table of Contents Plus 以下のコンテンツタイプを自動挿入

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

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

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

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

Table of Contents Plus 見出しテキスト

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

Table of Contents Plus 階層表示

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

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

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

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

Table of Contents Plus プレゼンテーション

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

Table of Contents Plus 設定を更新

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

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

[aside type="warning"]注意

もしも目次が表示されない場合は、以下の項目を確認してください。

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

 

✔ここまでの作業を動画で解説

それでは、ここまでの作業を動画で解説します。

 

設定を間違えても特に問題はありません!

使いながら、自分好みに設定してください。

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

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

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

[voice icon="https://waxtuze-yoka.com/wp-content/uploads/2020/02/04166a201faf12742cfb7eafae9100bb.jpg" name="マサヤ" type="l"]

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

[/voice]

[voice icon="https://waxtuze-yoka.com/wp-content/uploads/2020/02/1316ccecee8f1076901e12e508f385e5.png" name="もへじ君" type="r"]

そうですね~?

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

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

[/voice]

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

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

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

[voice icon="https://waxtuze-yoka.com/wp-content/uploads/2020/02/04166a201faf12742cfb7eafae9100bb.jpg" name="マサヤ" type="l"]

私のブログでは、ブログの初め方やノウハウ、手順やおすすめのツール、トラブル対応や雑学など、ブログやアフィリエイトに関する情報を幅広く配信します。

よろしければご覧ください。_(._.)_

[/voice]

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

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

わっぜ~よか!!ブログ編集長
マサヤより

-BLOG

© 2020 わっぜ~よか!!ブログ Powered by AFFINGER5