WordPress 見出しブロックの使い方 見出しの付け方

WordPressエディター操作

WordPress見出しブロックの使い方・見出しの付け方のコツ

2021年7月1日

WordPressをページを作成する際によく使うのが「見出し」ブロックです。

見出しにしたいテキストに「見出しタグ(Hタグ)」ブロックを活用することで通常の段落テキストよりも目立たせて表示できます。

今回は見出しタグについて詳しく説明していきます。

(※)本記事では、WordPress5.7、無料テーマLightningを利用した環境で説明しています。

■WordPress見出しブロックの使い方・見出しの付け方のコツ
 

(関連記事)ブロックエディターの使い方について

本記事では、カバーブロックのやり方に絞って説明していますが、エディターの使い方全体を勉強したい方は「【徹底解説】WordPressブロックエディターの使い方」を合わせてご参照ください。
 

見出しとは

文章を見出しでグルーピングする

見出しは本や雑誌の各章のタイトルに相当します。テキストを見出しを利用することで章立てすることで文章が格段に見やすくなります。

見出しのない文章例

以下は見出しのない文章例です。 見出しのない文章。分かりにくい 一から順番に読んでいかないと内容が把握できず分かりにくい文章です。

見出しを適切につけた文章例

以下は見出しをつけた例です。 見出しのある文章。分かりやすい 見出しを読むだけで何が書いてあるか把握できるため読みやすくなります。
全然違いますね。見出しのある文章は、見出しだけ見て概要をつかめるので理解しやすいですね。
見出しのない文章は分かりにくいので読んでもらえません。読んで考えて理解できる見せ方ではなく、眺めて分かるように意識して構成しましょう。

Googleでも見出しのない文章はよくない例として挙げており、見出しを適切に利用することで検索エンジン対策にもなります。

避けるべき方法: パラグラフ、小見出し、レイアウトの分離を取り入れずに、1 つのページにさまざまなトピックに関する大量のテキストを載せる。

検索エンジン最適化(SEO)スターター ガイド - Search Console ヘルプ より引用

見出しには以下のようにH1〜H6まであります(見出しはHTMLタグで<h1>〜<h6>まで用意されています)。多くのケースではH1が記事タイトルに相当し、本文中ではH2から利用することが多いです。

見出しタグを使ってページを作成する

見出しの階層について

  • H1・・・記事のタイトル。本のタイトルに相当
  • H2・・・大見出し。本の第1章、第2章に相当。
  • H3・・・中見出し。本の第1-1章、1-2章に相当。
  • H4・・・小見出し。本の第1-1-1章、1-1-2章に相当

見出しはH1が一番大きく、次がH2、H3、 H4、H5、H6の順番になります。自分の感覚で、文字の大きさやデザインの好みでいきなりH4から始めるのはよくないです。

見出しブロックの使い方

それでは見出しブロックの使い方を説明していきます。

見出しブロックの追加方法

見出しを追加したい場所でブロックの追加>見出しを選択します。

見出しブロックの選択

見出しブロックが挿入されます。

見出しブロックが挿入された

見出しとなるテキストを入力します。

見出しとなるテキストを入力

以上で見出しブロックの追加は完了です。

見出しレベルの変更

見出しブロックはブロック上にあるツールバーから見出しレベルを変更することができます。

上ツールバーの「H2」をクリックして見出しレベルを変更します。

見出しレベルの変更

ここではH2→H3に変更しました。見出しのデザインはご利用のテーマによって異なります。

見出しレベルがH2からH3に変更された

見出しの配置を変更する場合

見出しの文字を左寄せ、中央寄せ、右寄せから選択します。

中央揃えを表示画面から「テキスト中央寄せ」を選ぶと、以下のように配置を変更できます。

後から見出しブロックに変更する

見出しブロックの追加方法を説明しましたが、段落ブロックで入力しても、後から見出しブロックに変更できます。

文字が記載された「段落」ブロックの見出しに変更したい部分にカーソルを合わせて、ツールバーの左端にあるPが反転したアイコンをクリックしてください。

そうすると、以下のように見出しのタグが表示されます。

見出しレベルを変更の部分から、見出しレベル(H2〜H4)を選んで選択します。

ちなみに見出しブロックは「段落ブロック」「引用ブロック」に変更できます。

見出しの正しい階層構造

見出しタグの追加方法でもお伝えしましたが、本の章に相当するので、基本的に小さい順番から正しい論理構造で設定しておくことがおすすめです。

見出しの正しい階層構造の付け方

画面の上部にコンテンツ構造ボタン、「 i 」を丸で囲んであるアイコンをクリックすると、見出しの順番が正しいかどうかをチェックできます。

なお、もし見出しの階層構造に問題がある場合、以下のように「見出しレベルに間違いがあります」と表示されます。

必要に応じて正しい見出しの階層構造に修正しましょう。

見出しの付け方のコツ

【各論見出し】見出しは「洩れなく重複なく(MECE)」を利用する

結論を支える各論の構成として、「洩れなく重複なく(MECE)」という考え方を利用すると便利です。
 

MECE(ミッシー)とは、「Mutually Exclusive and Collectively Exhaustive」の略で、「洩れなく重複なく」という意味になります。
 

ロジックツリーを使って結論を支える各論を洩れなく重複なく洗い出す(MECE)

上記図のように、結論を支える論拠を並列に揃えることで論理的に正しさを示す論理構造は便利です。読み手も論拠を理解しやすいため、説得力があります。
 

各論の項目出しをしようと思っても、せいぜい2,3個しか思い浮かびませんがどうしたらよいでしょうか?
自分で考えても限界があるので、そういう時は一度ネットで同じテーマの記事を検索して、どのような切り口で各論を述べられているか調べてみましょう。
もちろんそのまま盗んではいけませんが、自分で考えているだけでは限界があります。他のサイトを参考にしてみてください。

「〇〇(結論)」を支える各論を洩れなく重複なく、網羅的に項目出ししてみましょう。
 

【各論見出し】見出しには結論とキーワードを含める

各論の見出しでは結論とキーワードを含めて記述するのがおすすめです。キーワードを含めることで検索エンジン対策にもなりますし、読み手側がトピックを理解するのにも役立ちます。
 

見出しの付け方の悪い例と良い例

下記は良くない見出しの例です。

よくない例

<h2>1段階目</h2>

購買心理の1段階目は「認知」です。見込み客にあなたの商品・サービスを認知してもらいましょう。....  

<h2>2段階目</h2>

購買心理の2段階目は「興味」を持ってもらうです。...

 
「1段階目」や「2段階目」といった見出しを読んでも、読み手は各論の概要を理解できません。また、キーワードも入っていないのでSEO的にも優しくありません。
 

各論の見出しもタイトル同様結論を書きます。ここでは、下記のように修正しました。

良い例

<h2>【購買心理の1段階目】見込み客に「認知」してもらう</h2>

購買心理の1段階目は「認知」です。見込み客にあなたの商品・サービスを認知してもらいましょう。....    

<h2>【購買心理の2段階目】「興味」を持ってもらう</h2>

購買心理の2段階目は「興味」を持ってもらうです。...

このように見出しに各論の結論を述べることで読み手は、見出しを見ただけでどんなテーマを説明しているのか理解できるようになります。理想は見出しだけを読んで記事の中身がわかるように構成する工夫をしましょう。

多くの人は細かい文章まで読んでくれません。スクロールしながら見出しだけ拾って流し読みのような人も多いのです。

まとめ

まとめです。今回は見出しブロックについて説明しました。

■WordPress見出しブロックの使い方・見出しの付け方のコツ

見出しはユーザーにとっての読みやすさだけでなく、検索エンジンにも内部構造を伝える上で正しく見出しをつける必要があります。

正しい見出しをつけて見やすいブログやホームページ作りを目指しましょう。

今回は以上になります。最後までご覧いただきありがとうございました。

 
「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら

YouTubeチャンネル開設しました!

WEBST8 YouTube Channel 開設
最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。

ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。

 

『自分で作る選択を』
自分でホームページ作成・Web集客したいホームページ作成スクール・教室

自分でホームページ作成・Web集客したいホームページ作成スクール・教室 WEBST8

おすすめ記事3選

【WordPressの始め方総まとめ】ワードプレスブログの作り方9STEP

【おすすめレンタルサーバー比較総まとめ】WordPress対応5社

国内シェア上位のエックスサーバー、ロリポップ、さくらのレンタルサーバ、およびConoHa WING、mixhostを中心にWordPressおすすめレンタルサーバーを比較・紹介していきます。これからWordPressでホームページやブログを開設するためにレンタルサーバー選びを検討している方はこちらをご覧ください。

【WordPressの始め方総まとめ】ワードプレスブログの作り方9STEP

WordPressの始め方総まとめ

WordPress(ワードプレス)でブログを始めようと思った時に、サーバー・ドメインの手続きなどわからないことだらけで困っているというお悩みをお持ちの方も多いのではないでしょうか。本記事では、WordPressでブログやアフィリエイトを始めたい初心者を対象にWordPressの始め方をご紹介していきます。

【総まとめ】WordPress(ワードプレス)ホームページ作り方

【総まとめ】WordPress(ワードプレス)ホームページ作り方

WordPressでホームページを自作しようと思った際に、「ドメイン?サーバー?たくさん調べることがあって何から手をつけたら良いのかわからない」というかたも多いのではないでしょうか。この記事ではWordPress初心者の方を対象にWordPressでホームページを作る方法をご紹介していきます。

-WordPressエディター操作