WORDPRESS

【2022年】WordPressの見出しとは?作り方&「H1・H2・H3…」使い分けのポイントまとめ【ワードプレスブログ「完全初心者」ガイド】

WordPressの見出しとは?作り方&「H1・H2・H3…」使い分けのポイントまとめ【ワードプレスブログ「完全初心者」ガイド】

専業ブロガー5年目のあずきです🐥

 

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

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

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

 

まず!

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

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

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

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

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

 

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

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

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

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

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

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

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

【2022年】WordPressの見出しとは?作り方&「H1・H2・H3…」使い分けのポイントまとめ【ワードプレスブログ「完全初心者」ガイド】

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

WordPress ヘッダー b-01

注意

ご紹介する内容は、いずれもWordPressの編集エディタが…

クラシックエディタ

の前提となります。「グーテンベルグ」をお使いの方はご了承ください

 

「クラシックエディタとグーテンベルグってなに…?」という場合や、「クラシックエディタに切り替える方法(一瞬です!)」はこちらをどうぞ ↓ ※重要です

WordPressクラシックエディタ・グーテンベルグとは?Classic Editorの導入方法【ワードプレスブログ「完全初心者」ガイド/第4章/No.6】
WordPressクラシックエディタ・グーテンベルグとは?Classic Editorの導入方法【ワードプレスブログ「完全初心者」ガイド/第4章/No.6】

続きを見る

 

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

 

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

 

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における「見出しの使い分け」はバッチリです🐥

 

人気記事

 

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

「全8章」の総合TOPページです

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

 

あずき猫 - Azuki Cat

猫です。独立5年目の専業ブロガー / アパレル歴10年 / Twitterでは、ブログに限らず「色々うまくいかへん…」「どないしよ…」というときのための、本質的な思考を発信しています。ニャー!!!

-WORDPRESS