WORDPRESS

WordPressブログの「見出し」とは?H1・H2・H3…の作り方&使い分けのポイント【記事の階層を作る】

WordPressブログの「見出し」とは?H1・H2・H3…の作り方&使い分けのポイント アイキャッチ



今回は、WordPressのブログ記事作りで「基本中の基本」となる…

各種「見出し」の違いと使い方

について、1から優しく解説していきたいと思います

まず、ブログ記事における「見出し」とは…

wp-heading-20200309_top-01

↑ 例えばこういうの

もっと言うと…

wp-heading-20200309_top-02

↑ この記事タイトル部分(オレンジ枠のとこ!)も、実は「見出し」の一種

WordPressで記事を作るときには、これらの「見出し」をそれぞれ正しく使い分ける必要があります

「見出し」の使い方がそもそも間違ってると、ページを訪れたユーザーにとっては相当わかりづらいページになります

なぜなら記事の「階層」、つまり構成の全体像がイメージできなくて迷子になるからですね

と言っても、この「見出し」の使い方は超簡単です

3分でわかるよ

それではさっそく見ていきましょー🐥

このブログのWordPress環境

\「本気」で戦うなら /

WING AFFINGER5 バナー 02

―― 検証と改善を重ねた唯一無二のテーマ ――

WING AFFINGER5

今なら超時短ツール「タグ管理プラグイン(4,980円)」の無料配布キャンペーン中!

About me

あずきアイコン main-01 背景透過

- 専業ブロガー・フリーランス -

あずき

独立3年目 / 元アパレル → 歴10年

20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます

普段はTwitterにわりといるので、覗いてもらえると嬉しいです^^

Twitter

WordPressにおける「見出し」とは?H1(記事タイトル)とH2, H3, H4…を使い分けるポイント【ブログ記事の階層わけ】

見出しの「基本的な作り方」と「種類」について【H1見出しは、記事タイトルのこと】

pc-work-202001_01

まずWordPressブログの記事作成では、「見出し」の種類が…

H1・H2・H3・H4・H5・H6見出し

と、計6タイプあります

HはHeading(見出し)の頭文字!

これらの見出しを作るときは、入力したテキストを選択した状態で、画面左上の…

wp-heading-20200309_1-01

↑ このオレンジ枠の場所から選択すると…

wp-heading-20200309_1-02

↑ こんな感じで見出しに変えられます

見出しの作り方自体は、これでOK

超簡単!

ちなみに、それぞれの選択肢は…

  • 見出し2 = H2見出しのこと
  • 見出し3 = H3見出しのこと
  • 見出し4 = H4見出しのこと

こういった形です

でもよく見ると、「見出し1」つまり「H1見出し」が載ってませんね

この「H1見出し」とは…

その記事のタイトル

のことを指します

なので、「H1見出し」を「H2」以降と同じように本文中へ入れるということは、絶対にありえません

要するに、「記事ページ」の形はざっくり…

記事タイトル(=H1見出し)

本文

こんな形になってるということですね

ちなみに「記事タイトル」のことを、わざわざ「H1見出し」とか呼んだりは実際しません

「記事タイトル」は、普通に「記事タイトル」と呼ばれてます

なので、いわゆる「見出し」とは実質…

  • 「H2見出し」以降

のことを言うんですね

つまり「H2, H3, H4…」のこと!

この点をふまえたうえで、ここからが重要です

\「本気」で戦うなら /

WING AFFINGER5 バナー 02

―― 検証と改善を重ねた唯一無二のテーマ ――

WING AFFINGER5

今なら超時短ツール「タグ管理プラグイン(4,980円)」の無料配布キャンペーン中!

H2見出し, H3見出し, H4見出し…の使い分け【階層にもとづいて作ろう】

pc-work-202001_02

さきほどのパートでは、実際に記事本文のなかに入れていくのは…

記事タイトルにあたる「H1見出し」を除いた、「H2見出し」以降

とお話ししました

じゃあその「H2」「H3」「H4」… という各見出しは、それぞれどう使いわければいいのか?

大切なポイントはただ1点、「階層」です

「階層」とは、例えばこういったもの ↓

wp-heading-20200309_2-01b

 

ただこれだけだとイメージが沸きづらいかもなので、↑ の例にもとづいてサンプル記事を用意してみました

「料理」をテーマに作ってみたよ!

wp-heading-20200309_2-02

wp-heading-20200309_2-03

wp-heading-20200309_2-04

wp-heading-20200309_2-05

このサンプル記事をふまえて、改めてさきほどの「階層」を見てみましょう

wp-heading-20200309_2-01b

この「階層」を作るときの注意点としては…

  • 「H3見出し」は、「H2見出し」のなかにのみ成り立つ
  • 「H4見出し」は、「H3見出し」のなかにのみ成り立つ
  • 「H5見出し」は、「H4見出し」のなかにのみ成り立つ

ということ

そして…

  • 「H2見出し」のなかに、「H3見出し」を飛ばして「H4見出し」以降を使ってはダメ!
  • 「H3見出し」のなかに、「H4見出し」を飛ばして「H5見出し」以降を使ってはダメ!
  • 「H4見出し」のなかに、「H5見出し」を飛ばして「H6見出し」以降を使ってはダメ!

ということ

間を飛ばすのはNG!

このシンプルな階層ルールさえ守れば、見出しの使い分けはもうバッチリです

今回の「見出しの使い分け」については、これで以上となります

大変お疲れさまでした♪

あずき🐥

見出しの色やデザインを変更する手順は、↓ をどうぞ♪

WING AFFINGER5で「記事タイトル&見出し」の色とデザイン設定をカスタマイズする手順 アイキャッチ
WING AFFINGER5で「記事タイトル&見出し」の色とデザイン設定をカスタマイズする手順【WordPressブログ】

続きを見る

\「本気」で戦うなら /

WING AFFINGER5 バナー 02

―― 検証と改善を重ねた唯一無二のテーマ ――

WING AFFINGER5

今なら超時短ツール「タグ管理プラグイン(4,980円)」の無料配布キャンペーン中!

About me

あずきアイコン main-01 背景透過

- 専業ブロガー・フリーランス -

あずき

独立3年目 / 元アパレル → 歴10年

20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます

普段はTwitterにわりといるので、覗いてもらえると嬉しいです^^

Twitter

-WORDPRESS

© 2020 あずきのぶろぐ