--> ブログの目次の作り方【成果を出しているブログの目次の共通点解説します】
ブログ

ブログの目次の作り方【成果を出しているブログの目次の共通点解説します】

ブログの目次を作る方法を知りたい。そもそも目次って絶対に必要なの?

こんな疑問に答えます。

本記事の内容

  • ブログに目次は必要なのか?
  • ブログの目次を作る方法(プラグイン、HTML)
  • 成果を出すブログの目次の共通点

筆者

そうし
そうし
元サラリーマン。現在は当ブログの運営とWebライターとして活動しています!

この記事を書いているぼくは、当ブログ開設後3記事で収益化、その後もブログ記事とWebライティングで、毎日5000文字ほどを書いています。

今回の記事の内容は「ブログの目次」について。

ブログの必要性や、成果を出しているブログの目次の共通点を解説していきます。

それではさっそく、本文に入っていきましょう。

ブログに目次は必要なのか?

疑問がある人

ブログに目次は必要なのか?

答えは「必要」です。

なぜなら、本や説明書にも目次があるように、目次は読者が内容を理解するのに役立つからです。

とはいえ、絶対必要なわけではなく、有名ブロガーのマナブさんが運営するmanablogの多くの記事には目次がありません。

ブログのジャンルや記事の意図に合わせて、目次の有無を使い分けましょう。

のちほど、記事ごとに目次を非表示にするやり方も解説しますね。

ブログに目次を作るメリット

good

ブログに目次を作るメリットは、3つあります。

  • 読者が内容を理解しやすくなる
  • 読みたい箇所にすぐに移動できる
  • その結果読まれるブログになる

特に、当記事のようなハウツー系の記事には目次があった方がいいでしょう。

理解しやすいブログや読みやすいブログは、結果的に読まれるブログになりますよね。

つまり、ブログに目次をつけることで、より多くの人に読まれる可能性があるのです。

ブログの目次を作る方法

話す人

ブログの目次を作る方法は、以下の2つがあります。

  • プラグイン(WordPressの場合)
  • HTML

それぞれ画像付きで解説していきますね。

プラグインで目次を作る方法

目次を作るプラグインはいくつかありますが、今回はその中でもユーザー数の多い「Table of Contents(以下TOC)」で目次を作る方法です。

まずはTOCをダウンロードします。

WordPressのプラグインをダウンロードする方法は、以下の記事をご覧ください。

»WordPress プラグインの入れ方をシンプルに解説

ダウンロード後、WordPressの「設定」から「TOC+」をクリック

ワードプレス管理画面

設定に関しては、特にSEOなどに影響はないので、好きなようにしてOKです。

ぼくは以下の画像の設定なので、分からなければ参考にしてください。

TOC

「上級者向け」は特に変えなくてOKです。

TOC管理画面

設定が終わったら、忘れずに「設定を更新」をクリックします。

ちなみに、当ブログの目次は以下の画像のようになっています。

目次

形式や色に関しては、自分でカスタマイズしました。

分からない人は「TOC カスタマイズ」とかで調べたら出てくると思うので、調べてみてください。

特定の記事に目次を表示しない方法

特定の記事だけ目次を表示させない方法もあります。

以下の画像をご覧ください。

目次

特定の記事だけ目次を表示させたくない場合は、WordPressの執筆画面を「テキスト」に切り替えて[no_toc]と入力します。

場所はどこでもいいのですが、一番上が分かりやすくていいですね。

一文字でも間違っていると目次が表示されないので、注意してください。

これでコードを入力した記事には、目次が表示されなくなります。

HTMLで目次を作る方法

ブログの目次は、プラグインを入れなくてもHTMLで作ることができます。

HTMLで作る目次は2つのパターンを紹介します。

まずパターン1は、以下の画像のような目次です。

パターン1

目次

HTML目次用コードパターン1

<ul>
<li><a href=”#01″>1つ目の見出し</a></li>
<li><a href=”#02″>2つ目の見出し</a></li>
<li><a href=”#03″>3つ目の見出し</a></li>
</ul>

<h2 id=”01″>1つ目の見出し</h2> 段落1の本文
<h2 id=”02″>2つ目の見出し</h2> 段落2の本文
<h2 id=”03″>3つ目の見出し</h2> 段落3の本文

上記のコードをWordPressの「テキスト」の部分に貼ります。

WordPressもちろん貼り付けずに、記事を書く時に自分でコードを書いても大丈夫。

数を増やしたい時は、コードを真似して増やせばOKです。

パターン2(箇条書きを消してH3タグを追加)

パターン2は、H3の目次が見やすい形です。

目次

個人的には、こっちの方が見やすいと思います。

コードは以下の通り。

HTML用目次コードパターン2

<a href=”#01″>H2の見出し</a>
<a href=”#001″>ーH3の見出し</a>
<a href=”#002″>ーH3の見出し</a>

<h2 id=”01″>H2の見出し</h2> 本文
<h3 id=”001″>H3の見出し</h2> 本文
<h3 id=”002″>H3の見出し</h2> 本文

好みに合わせて使い分けてくださいね。

成果を出しているブログの目次の共通点

目次

目次に正解はありませんが、成果を出しているブログの目次の共通点は以下の通りです。

  • 長すぎない
  • 見やすいデザイン
  • 目次で内容が分かる

実際の画像で紹介します。

まず1枚目は、Tsuzukiさんが運営するTsuzuki Blogの目次。

Tsuzuki Blogの最高月収は300万円以上だということです。

tsuzuki blog 目次

とてもシンプルで見やすいですし、目次を見ただけで記事の内容が分かりますよね。

2枚目は、クニトミさんが運営されている副業コンパスの目次。

副業コンパスは、月に最高で1000万円以上の売り上げを上げたこともあるそうです。

副業コンパス目次

こちらもやはりシンプルで見やすいですよね。

そして当然、目次を見ただけで記事の内容がある程度分かります。

ちなみに、ブログでは「見出し=目次」になります。

つまり、成果を出す目次を作るには、見出しを正しく作る必要があるんですよね。

そこで、以下の記事で効果的な見出しの作り方を解説しているので、是非ご覧ください。

»ブログの見出しが重要な理由と効果的な見出しの作り方5つを解説

成果を出す目次の共通点は「シンプルで見やすく、記事の内容がわかる」です。

まとめ:目次でさらに見やすいブログにしよう!

飛行機に乗る人

今回は目次のメリットから、目次の作り方まで見てきました。

目次を上手く使いこなすことで、より見やすいブログをつくれます。

当ブログの、他の記事の目次も、成果を出している他のブログを研究して作っています。

ぜひ他の記事も参考にしてみてくださいね。

今回は以上です。