PR

【画像付】【COCOON】初心者でもかんたん!H2/H3/H4見出しの使い方と、目次への反映ルール

H1〜H6階層図解イメージ 未分類

はじめに|見出しをつけるだけで、ブログは一気に読みやすくなる

ブログを書いていて、

  • 文章がだらだら長くなってしまう
  • どこから読めばいいか分からない記事になりがち

と感じたことはありませんか?

そんなときに役立つのが、H2/H3/H4見出し です。

見出しをつけると、

  • パッと見て記事の全体像が分かる
  • 読者が「知りたいところ」だけ読みやすくなる
  • 自動で目次が作られる(Cocoonや目次プラグインの場合)

というメリットがあります。

この記事では、

  • H2/H3/H4見出しの基本的な使い方
  • WordPressブロックエディターでの操作方法
  • 見出しが目次に自動反映されるしくみ
  • 目次設定で非表示にして、見出し番号を手入力する方法

を、初心者さん向けにやさしく解説します。


H2/H3/H4見出しの役割|本でいうと「章・節・小見出し」

まずは、見出しの「役割」をイメージしてみましょう。

本の構成でたとえると…

  • H2:章のタイトル(大見出し)
  • H3:節のタイトル(中見出し)
  • H4:小見出し(さらに細かい説明)

というイメージです。

たとえば「Xserverの始め方」という記事なら、

  • H2:Xserverとは?
  • H2:Xserverの申込み手順
    • H3:プランを選ぶ
    • H3:必要情報を入力する
    • H3:支払い方法を登録する

のように、大きな区切りをH2、小さな区切りをH3/H4 にすると、
記事全体がとても整理されて見えます。

追記に使える文章例

見出しは H2〜H6 まであります。

  • H1 … 記事タイトル(自動で設定されるので自分では使いません)
  • H2 … 章のタイトル(大見出し)
  • H3 … 節のタイトル(中見出し)
  • H4 … 小見出し
  • H5・H6 … さらに細かく分けたいとき用(基本はあまり使いません)

ふだんは H2 と H3、必要なら H4 まで 使えばOKです。
それ以上細かくすると読みにくくなるので、H5・H6は「どうしても分けたいときだけ」


見出しブロックの設定について

1.見出しブロックに切り替える方法

まずは、段落(文章)を見出しに変える基本操作から。

  1. WordPressの投稿編集画面を開く
  2. 見出しにしたい文章(例:「見出しH2」)をクリックする
  1. 左上に表示される「段落」と書かれた部分をクリック
  2. 出てきたメニューから 「見出し」 を選ぶ

これで、その行が「見出しブロック」に変わります。


2.H2/H3/H4のレベルを選ぶ

次に、見出しのレベル(H2/H3/H4)を指定します。

  1. 見出しブロックを選択した状態で、右側の設定欄(または上のツールバー)を見る
  1. 「H2」「H3」「H4」といったボタンから、使いたいレベルを選ぶ

基本のルールはこれだけ👇

  • 記事の大きな区切り → H2
  • H2の中をさらに分けたい → H3
  • H3の中をさらに細かくしたい → H4

最初は 「とりあえず大事なところをH2」 と思っておけばOKです。


見出しが目次に自動で反映されるしくみ

Cocoonや目次プラグインを使っている場合、
H2/H3/H4見出しをつけるだけで、目次が自動で作られます。

  • 目次に表示されるのは、基本的に H2 と H3(設定で変更可能)
  • 見出しの順番=目次の順番
  • 見出しのテキスト=目次に表示される文字

つまり、

「見出しをしっかりつける」=「読みやすい目次が勝手にできる」

という、とても便利な仕組みです。

目次の設定に関する記事はこちらからどうぞ。


目次には出さずに、見出しだけ使いたいとき

ときどき、

  • タイトルとしては使いたい
  • でも目次には載せたくない

という見出しも出てきます。

例:

  • 記事の一番上の「この記事で分かること」
  • 「まとめ」や「おわりに」など、目次にはいらないもの

この場合は、目次側の設定で「表示する見出し」「除外する見出し」を調整 します。

(※Cocoonの目次機能やプラグインによって画面は少し違いますが、
「H2/H3のみ表示」「特定の見出しを除外」といった項目があります。)


目次の設定を「非表示」にして、見出し番号を手入力する方法

愛ちゃんのように、

「STEP1」「STEP2」のように、自分で番号をつけたい

という場合もありますよね。

そのときは、

  1. テーマ(Cocoonなど)の「目次設定」で
    • 見出しに自動で番号を振る機能
    • 目次の自動表示
      などを OFF(非表示) にする
  2. 記事内の見出しテキストに、
    • 「STEP1 Xserverを登録する」
    • 「STEP2 WordPressでブログ開設」
      のように、自分で番号を入力する

こうしておくと、

  • 目次に自動で番号がついて二重になることもない
  • 自分の好きな表現(STEP・第1章…など)で番号をつけられる

というメリットがあります。

目次自体を表示したい場合は、

  • 「番号だけOFFにして目次は表示」
  • もしくは「このページだけ目次を非表示」

など、テーマやプラグインの設定に合わせて調整してみてください。


まとめ|見出しを整えると、記事も目次も一気にわかりやすくなる

最後に、この記事のポイントを振り返ります。

  • 見出しは 本の「章・節・小見出し」 のようなもの
  • H2 → 大きな区切り、H3/H4 → その中の説明
  • 見出しブロックに変えて、H2/H3/H4を選ぶだけでOK
  • 見出しをつけると、自動で目次にも反映される
  • 目次設定を調整すれば、
    • 目次に載せない見出しを作れたり
    • 自分で「STEP1」などの番号を入力したりできる

最初はむずかしく感じるかもしれませんが、
「大事なところ=H2」にする習慣 をつけるだけで、ブログが一気に読みやすくなります。

このページを見ながら、
まずは1記事だけでも、見出しを整理してみてくださいね😊

ーーーーーブログ収益化必須リンク ーーーーーーーーーーーー

✓まずはXserverでブログ開設

✓もしもアフェリエイトならAmazon・楽天等商品のASPあり!

✓A8.netは広告主数、メディア数が日本最大級のASP!

✓バリューコマースは旅行、ほか多数のASP!

ーーーーーブログ収益化必須リンク ーーーーーーーーーーーー

☆まずはXserverでブログ開設


☆ブログ収益化につなげるために
✓もしもアフェリエイトならAmazon・楽天等商品のASPあり!

✓A8.netは広告主数、メディア数が日本最大級のASP!

✓バリューコマースは旅行、ほか多数のASP!

未分類
シェアする
あいをフォローする
タイトルとURLをコピーしました