【絶対に作るべき!】ブログ記事に目次は必要?メリット・作り方も解説!

ブログ記事に目次って必要なの?別にいらなくない?

そう考えているブロガーの方はいませんか?

結論から言うと、目次は絶対に必要です!

特にブログを書き始めて間もない方は、ぜひ目次を作るようにしましょう!

目次の必要性やメリットもお伝えします。

もくじ

目次は内容をリスト化したもの

ブログ記事に一番重要なのは、もちろん記事の内容ですよね。

でも私は、目次もかなり重要な役割をしていると思います。

そもそも目次とは何なのでしょうか?

目次は、見出しをリスト化して順番に並べたものです。

この記事の目次

ブログの記事だけでなく、書籍にも目次は使われていますよね。

意識していないだけで、目次があって助かっていることはたくさんあるんじゃないでしょうか。

目次のメリット

読者の立場に立って、目次のメリットについて考えてみました。

目次のメリット
  • 記事の内容が一目でわかる
  • 読みたい部分にアクセスできる
  • 知りたいことがすぐわかる

読者の立場に立ってみると、目次がどれだけ重要かよくわかりますよね?

読者は知りたいことがあって、あなたの記事に辿り着きます。

たとえば5000字の記事があったとして、一言一句読まれることは残念ながらほとんどないです。

その記事の中でも、知りたいことだけをピンポイントで読みたいと思っています。

それを可能にできる目次は、重要なんです。

ブログ記事の目次は、知りたいことがある読者にとって必要不可欠なもの。

目次で気をつけていること

私がブログ記事を書くときに、目次で気をつけていることを4つお話しします。

目次で気をつけていること
  • 目次だけで内容がわかるようにする
  • H2、H3で構成する
  • なるべく短くする
  • 目次は開いた状態にする

一つずつ説明していきます。

目次だけで内容がわかるようにする

記事を書くとき、なるべく目次だけで記事の内容がわかるように心がけています。

そうすることで、タイトルに対して内容がずれていないかの確認もできます。

ある程度内容を決めて書き始めても、少しずつ内容がずれてしまうことありませんか?

なんか内容ずれていってるってこと、私はよくあります。

目次つまり見出しに内容を入れて、目次で内容の確認をして修正をすることでタイトルに沿った記事を書くことができます。

H2、H3で構成する

私が使っているWordPressテーマ「SWELL」では、目次を自動で作ってくれます。

SWELLの目次設定では、H3までしか表示できません。

実は以前AFFINGERを使っていたときは、目次生成のプラグインを使用してH4まで表示していました。

移行をきっかけにH4を使うのをやめて、H2とH3のみで記事を構成しています。

より内容が分かりやすくなったと思います。

なるべく短くする

目次だけで内容をわかるようにすると言っても、見出しが長すぎないように気をつけています。

目次にずらずらと文章が並んでいると、見にくくなるからです。

見出しは簡潔に分かりやすくして、内容で詳しく掘り下げていくようにしています。

目次は開いた状態にする

目次を閉じた状態にしていませんか?

邪魔になるからと閉じたままにしていることもありましたが、今は開いた状態にしています。

正直、閉じている目次をわざわざ開く読者は少ないと思います。

ブログの目次の作り方

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

SWELLのようにテーマで目次の自動生成機能がついている場合は、そちらを使いましょう。

目次を作る方法
  1. プラグインで目次を作る
  2. HTMLで目次を作る

①プラグインで目次を作る

WordPressで目次を生成できるプラグイン「Easy Table of Contents」を入れると、目次が簡単に作れます。

目次生成のプラグインでは「Table of Contents Plus」が有名ですが、数年間更新されていないので「Easy Table of Contents」の方が安心だと思います。

目次のカスタマイズ等もできるので、便利です。

②HTMLで目次を作る

HTMLで目次を作ることもできます。

プラグインを入れすぎるとサイトが重くなることもあるようなので、多少の知識がある方はこちらの方法でもいいかもしれません。

知識がない私みたいな人は、プラグインを使う方が安心です。

HTMLで目次を作るには、下記の手順で進めていきます。

  1. 各見出しに名前(id)をつける
  2. テキストエディタで目次を作る

3つの目次を作ってみます。

STEP
各見出しに名前(id)をつける

見出しに名前(id=”◯◯”)をつけていきます。

<h2 id=”bl-01“>見出し01</h2>

<p>本文が入る</p>

<h2 id=”bl-02“>見出し02</h2>

<p>本文が入る</p>

<h2 id=”bl-03“>見出し03</h2>

<p>本文が入る</p>

idは好きなもので大丈夫ですが、分かりやすいものがいいと思います。

h2タグだけでなく、h3でも同じです。

STEP
テキストエディタで目次を作る

目次を作り、見出しのリンクを挿入します。

<ul>

<li><a href=”#bl-01″>見出し1</a></li>

<li><a href=”#bl-02″>見出し2</a></li>

<li><a href=”#bl-03″>見出し3</a></li>

</ul>

ごくシンプルな目次なので、ボックスで囲んだりCSSでデザインを変更したりする必要があります。

毎回記事を書くごとに設定が必要になりますが、HTMLやCSSの知識がある方にとってはこちらの方が操作性が高く簡単かもしれません。

まとめ:目次を作って読者に見やすい記事作り

ブログ記事で目次を作ることは重要で、読者に見やすい記事作りには必要不可欠です。

目次を作って読者に見やすい記事を作る=SEOにプラスになる

自分本位でなく、読者に役に立つ情報を分かりやすく伝えるためにも目次を設置するようにしましょう。

当ブログで使用しているWordPressテーマ「SWELL」は、目次を自動で生成してくれる機能があります。

プラグインを入れたり、自分で作ったりする手間が省けるのでオススメです。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

もくじ