【hタグ】H1.H2.H3…って何?見出しの種類と効果的な使い方を解説します

こんにちは。ヒロユキです。

先に答えを言うと「H1〜H6」=「見出し」のことです。

ぼくはブログ書き始めたころ、先輩ブロガーさんの記事やYouTubeを見ていて

H1はタイトルと合わせてね」とか「H2の下に画像入れればいいよ」っていうアドバイス

…そもそも「H1」「H2」ってなんだよって思ってました。

これは、まず記事を書いてみれば自然とわかるんですけど、書くより先に情報を調べる方はそう感じたと思います。

今日はそんな「H1〜H6」ついて解説していきます。

H1.H2.H3…って何?
見出しの種類と効果的な使い方を解説します

「H1」~「H6」の見た目の違い

もう一回言うと、「H〇」=「見出し」です。「H」は「Heading」の略で「見出し」を意味します。

WordPressだと大体どんなテーマを使っても、見出しのデザインは変わらないと思うので、実際にどんなものか見てみるのが早いですね。

一般的に見出しは「H1」~「H6」の6種類があって、これらは「hタグ」と呼ばれています。

「hタグ」は以下の見た目に分かれます。↓


これが「H1」記事のタイトルに使われます。


これが「H2」大体の場合タイトルと似た内容が入ります。


これが「H3」記事を内容ごとに分けたものが入ります。


これが「H4」分けた内容をさらに深堀した手順などが入ります。


これが「H5」ここまでくると一般的な記事ではほとんど使われていません。

これが「H6」目次を作る場合などには使うかもしれませんが、ほとんど本文と変わりません。

「見出し」に「hタグ」を使う理由は、記事を要所ごとに目立たせて読みやすくするのがメインです。記事の目次を作る際にも重要な要素になるので使い方は覚えておきましょう。

「hタグ」の使い方

実際に記事で「hタグ」を使う場合は、見出しにしたい文章を(仮に「ヒロユキ」として)

HTML<h1>ヒロユキ</h1>と打ち込みます。

…ですが、これは初心者さんは覚えなくても大丈夫です。

WordPressならHTMLコード打ち込まなくてもボタンで対応できます。

WordPress
(ブロックエディタの場合)

まず、ブロックの追加で「見出し」を選びます。
(候補にない場合は、ブロックの検索に「見出し」と検索してください)

②次に、H2の「見出し」ブロックが展開されるので「H2」と書かれた項目をクリック。するとH1~H6までの候補が出てくるので、好きなものを選んでください。以上!

WordPress
(クラシックエディタの場合)

クラシックエディタの場合は、画面左上の段落をクリックすると、「H1~H6」が「見出し1~見出し6」として表示されるので、ここから選べばOKです。

ちなみに、Wordpressのブロックエディタクラシックエディタの切り替えは

WordPressのダッシュボードが含まれる設定画面から、「設定」⇒「投稿設定」⇒「すべてのユーザーのデフォルトエディター」から行うことができます。

「hタグ」の選び方

突然ですが、あなたは「マインドマップ」って知ってますか?
マインドマップ – Wikipedia←出典 Wikipedia 様

簡単に説明すると「中心になる事柄から、関連するイメージを放射線上に増やして整理する。」ものなんですけど「hタグ」の選び方もこれに習っています。

例えば、「オムライス」の作り方って記事を書くとします。そうすると…

  1. まず、タイトルになる「オムライス」の作り方 H1の見出しです。
  2. 次に、記事の内容とタイトルを紐づけるために、H2の見出しオムライス」の作り方
  3. ここから内容に入ります。オムライスを作るためにはチキンライスオムレツが必要なのでH3の見出し「チキンライスの作り方」「オムレツの作り方」
  4. さらに、チキンライスオムレツを作るための材料と工程を、H4の見出しとしてタマゴ、玉ねぎ、ケチャップ、ごはん…。

…とまぁ、これは例えとしても細かすぎるけど。笑

これが仮に、説明するとして…

タマゴ割って!玉ねぎ切って!ごはん用意した?ケチャップは後で使うから!オムレツ先に作っちゃダメだよ!

って乱雑にいろんな情報を与えられても、受け取る側は困ってしまいますよね。正直こんな人の話は、聞くのイヤになっちゃいます。

そこで大切なのが、情報を種類ごとにまとめてわかりやすくする。その上で、詳しい内容は各種の分けられた情報から派生させていく必要があります。

「hタグ」の注意点

「hタグ」の注意点としては、たまにH4の見出しの内容の中でH3の見出しを使ってしまう人がいますが、これは基本的にNGです。

文章の流れで、やむを得ない場合は仕方ないですが、情報が行ったり来たりして読みづらくなるので、そういう場合は見出しをH4にするか、大きな情報なら別にH3見出しとして書き足しましょう

まとめ

記事内の情報を整理して、読みやすくする「hタグ」。

「hタグ」の意味を正しく理解すれば、ぐっと記事が書きやすくなるでぜひご活用ください。

それではまた。ヒロユキでした。

気に入ったらシェアしてね

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です