WORDPRESS

【2021年】WordPressの見出しとは?作り方と「H1・H2・H3…」の使い分けを初心者向けに解説【ブログ記事の「階層」を作る】

WordPressの見出しとは?作り方と「H1・H2・H3…」の使い分け
 

あずきです🐥

 

WordPressで記事を作るうえで、事前に押さえておきたい超基礎的なポイントの1つ…

「見出し」の作り方と使い分け

について、ブログ初心者さん向けに1からわかりやすく解説していきます

 

まず!

 

WordPressにおける「見出し」というのは、実際のブログ画面上だと…

WordPressの見出しとは?作り方と「H1・H2・H3…」の使い分け top-01

↑ この「青枠で囲った箇所」を指します

つまり、記事のなかに大小いくつか設置する「タイトル」部分のこと!
 

ブログ記事を作成するときには、これらの各種「見出し」を正しい使い方で設置していくことが大前提となります

 

なぜなら「見出し」の使い方がそもそも間違っていると、どれだけ記事内容にこだわっていても…

  • ブログを訪れたユーザーが、記事の構成を掴みづらく困惑してしまう
    (→満足度に悪影響)
  • 検索エンジンのクローラーも、同様にマイナスの評価を下してしまう
    (→SEO面で悪影響)

となる可能性が高いからですね

と言っても、要点はいたってカンタンだよ!
 

そんな【見出しの作り方と使い分けのポイント】について、2つのステップで丁寧に解説していきます

  1. WordPressにおける「見出し」の作り方と、その種類
  2. 見出し「H1・H2・H3…」を使い分ける際のポイント

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

 

\ 当ブログで愛用しています /

ACTION AFFINGER6 バナー 01-300px

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

ACTION AFFINGER6

今ならワードプレスプラグイン
「すごいもくじLITE」
の限定特典配布キャンペーンも実施中!!!

公式:「稼ぐ」に特化したワードプレステーマ『ACTION AFFINGER6』

関連:【1番の本質】ACTION AFFINGER6って実際どう?気に入ってる点・気になる点を、専業ブロガーが本気レビュー【愛用テーマ】

 

ACTION AFFINGER6は新エディタ「グーテンベルグ」への対応が強化されましたが、「クラシックエディタ」も引き続き使用できます

【2021年】WordPressの見出しとは?作り方と「H1・H2・H3…」の使い分けについて初心者向けに解説【ブログ記事の「階層」を作る】

ステップ1:WordPressにおける「見出し」の作り方と、その種類【H1・H2・H3・H4・H5・H6】

WordPress ヘッダー b-01

 

補足

ご紹介する内容は、いずれも「クラシックエディタ」の前提となります。「グーテンベルグ」をお使いの方はご了承ください

 

「そもそもクラシックエディタとグーテンベルグってなに…?」という場合はこちらをどうぞ ↓(重要です)

WordPressのクラシックエディタとグーテンベルグとは?プラグイン「Classic Editor」の導入方法まで
【2021年】WordPressのクラシックエディタとグーテンベルグとは?プラグイン「Classic Editor」の導入方法まで1から解説

続きを見る

 

WordPressにおける「見出し」の作り方は、まずWordPress管理画面の左側一覧から…

投稿 > 新規追加

をクリックして「投稿編集」の画面を開いたら…

WordPressの見出しとは?作り方と「H1・H2・H3…」の使い分け 1-1-01-a

↑ 画像例のように、「見出し」にしたい任意のテキストを選択した状態で、左上の「段落」というタブを開きましょう

編集エディタは、「テキスト」じゃなく「ビジュアル」のままでOK!
 
 

すると…

WordPressの見出しとは?作り方と「H1・H2・H3…」の使い分け 1-1-01-b

↑ このように…

  • 見出し2(H2とも言います)
  • 見出し3(H3)
  • 見出し4(H4)
  • 見出し5(H5)
  • 見出し6(H6)

という見出しの「種類」が表示されるので、このなかから1つ選択するだけ

今回は例として、【見出し2】を選んでみるよ!
 

ちなみに、この【見出し2】~【見出し6】の選び方には…

ルール

があるんですが、こちらは次のステップで解説していきますね

 

見出し1(H1)というのは「記事タイトル」を指すので、記事内で設置していくのは実質「見出し2以降」ということになります

 

ということで、上記の手順で「見出しタイプ」を選択すると…

WordPressの見出しとは?作り方と「H1・H2・H3…」の使い分け 1-1-02

↑ このように、対象のテキストが「見出し」デザインへと変更されました🐥

 
 
つづいて、この【見出し2】~【見出し6】の使い分けについて見ていこう!
 

ステップ2:WordPressにおける見出し「H1・H2・H3…」を使い分ける際のポイント【記事内に「階層」を作ろう】

WordPress ヘッダー b-02

 

WordPressの記事内に「見出し」をいくつか設置していくうえで大切なポイント(ルール)は、ズバリ…

「階層」を意識すること

です

 

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

 

WordPressの見出しとは?作り方と「H1・H2・H3…」の使い分け 1-2-01

 

上の図をもとに、サンプル記事を作ってみました ↓

 

WordPressの見出しとは?作り方と「H1・H2・H3…」の使い分け 1-2-02-a

WordPressの見出しとは?作り方と「H1・H2・H3…」の使い分け 1-2-02-b

 

つまり「階層」とは…

  • 【見出し2=H2】を細分化したのが【見出し3=H3】
  • 【見出し3=H3】をさらに細分化したのが【見出し4=H4】
  • 【見出し4=H4】をさらに細分化したのが【見出し5=H5】

という流れですね

 

なので例えば…

【見出し2】がそもそも存在しない記事に、【見出し3】を設置してしまう

といった見出し構成は「NG」になります

それならその【見出し3】を、【見出し2】にしないといけないよね
 

このシンプルな ”階層” ルールさえ守れば、WordPressにおける「見出しの使い分け」はバッチリです🐥

 

今回の記事はこちらの章に属しています

 第7章 記事投稿 編          

次の章はこちらからどうぞ

 第8章 収益化 編           

全9章のTOPページです

あずきのワードプレスブログ「完全初心者」ガイド

\ 当ブログで愛用しています /

ACTION AFFINGER6 バナー 01-300px

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

ACTION AFFINGER6

 

   ✔ 洗練されたビジュアルと、ターゲットに合わせた「変幻自在」な柔軟性!

   ✔ 時間のかかる面倒なカスタマイズも「クリック1つ」でさくさく実現!

   ✔ 本気で戦うためのSEO対策と、「稼ぐ」に特化したアフィリエイト機能!

今ならワードプレスプラグイン
「すごいもくじLITE」
の限定特典配布キャンペーンも実施中!!!

公式:「稼ぐ」に特化したワードプレステーマ『ACTION AFFINGER6』

関連:【1番の本質】ACTION AFFINGER6って実際どう?気に入ってる点・気になる点を、専業ブロガーが本気レビュー【愛用テーマ】

ACTION AFFINGER6は新エディタ「グーテンベルグ」への対応が強化されましたが、「クラシックエディタ」も引き続き使用できます

WordPressのクラシックエディタとグーテンベルグとは?プラグイン「Classic Editor」の導入方法まで
【2021年】WordPressのクラシックエディタとグーテンベルグとは?プラグイン「Classic Editor」の導入方法まで1から解説

続きを見る

 

-WORDPRESS