WordPressワードプレス)のブロックエディタでよく使うブロックの1つ、「見出し」ブロックの使い方を紹介します。見出しブロックでは、見出しレベルや配置を変更することができます。また、見出しを付ける順番に誤りがないかチェックできる機能もあります。

見出しブロックの使い方

ウェブページ内に見出しを挿入するときには、通常「Hタグ」を使います。Hタグとは、HTML(ウェブページを作成するための言語)で使われるタグの1つです。では、HTMLを理解できないと記事内に見出しを入れることはできないのでしょうか。

いいえ、WordPressを使っているなら心配はいりません。WordPressのブロックエディタでは、「見出し」ブロックを利用して簡単に見出しを挿入することができます。

記事の中に見出しを入れることで、どのような効果があるのでしょうか。

以下の解説は、つぎの条件下で作成しています。ご利用環境によって、本文の内容と実際の画面が異なる場合があります。

  • WordPress バージョン:5.2.2
  • テーマ:Twenty Nineteen

見出しの役割

「見出し」の持つ大きな役割として、次の2つがあります。

見出しの主な役割
  • サイト訪問者にとって読みやすくなる
  • 検索エンジンにページの構造を伝える

サイト訪問者にとって読みやすくなる
見出しを入れることによって、サイト訪問者に記事の主題をわかりやすく伝えることができます。また、単調に文章を並べるよりも、見出しでアクセントを付けることで読みやすくなるという視覚的効果も期待できます。

見出しを入れる前と後の比較

検索エンジンにページの構造を伝える
検索エンジンロボットがあなたのサイトを巡回(クロール)した際に、ページの内部構造を適切に伝えることができます。

クロールについて、くわしくは「Google 検索の仕組み | クロールとインデックス登録」を参照してください。

見出しの付け方

先ほどお話したHTMLという言語では、ウェブページ内に「H1」から「H6」まで合計6種類の見出しを付けることができます。H1が最も大きな(重要な)見出しで、H2、H3…となるにつれて小さい見出しとなります。

見出しを使うとき、その順番に注意が必要です。文書構造にそって、H2→H3→H4…という順番で見出しを入れるようにします。例えば、H2の次にH4を使うのは正しい見出しの付け方とはいえません。

見出しの付け方は順番に注意

見出しのデザイン

一般的に、見出しのレベルが高くなるほど大きな文字で表示されます。どのようなデザインで表示されるかは、使用しているテーマによって異なります。

下の画像は、WordPressの標準テーマ「Twenty Nineteen」「Twenty Seventeen」「Twenty Sixteen」を使用したときの、見出しの表示例です。

見出しデザイン標準テーマ使用時の表示を比較

見出しについての基本がわかったところで、実際に見出しブロックを使ってみましょう。

見出しブロックを追加する

見出しブロックを追加する

見出しブロックを新しく追加する方法については、下記ページを参考にしてください。

見出しを編集する

ブロック内に見出しとなる文字列を入力したら、見出しレベル見出しの配置を変更してみましょう。

見出しレベルを変更する

見出しブロック上部のボタンで[H2][H3][H4]から選択できます。また、画面右側の設定パネルでは、[H1]~[H6]から選択することができます。

見出しレベルを変更する
見出しを付ける順番に注意
見出しの付け方でも話しましたが、見出しを付ける順番にも注意が必要です。画面上部の[コンテンツ構造]ボタンをクリックすると、見出しの順番に誤りがないかチェックをすることができます。

コンテンツ構造ボタンで見出しレベルに誤りがないかチェックできる

配置を変更する

見出し内の文字の配置を、[左寄せ][中央寄せ][右寄せ]から選択できます。

見出しの配置を変更する

ブロックの種類を変更する

見出しブロックは、次のブロックに変換することができます。

  • 段落
  • 引用
ブロックエディタでは、合計60種類以上のブロックを利用できます。しかし、ブロックタイプの変更機能は元のブロックと関連性があるものしか選択することができない仕様となっています。

見出しブロックを他のブロックに変更したい場合は、[ブロックタイプまたはスタイルを変更]ボタンをクリックします。

見出しブロックの種類を変更

この記事のまとめ

ウェブページ上の見出しには、サイト訪問者にとって記事を読みやすくしたり、検索エンジンにページの内部構造を適切に伝えたりする役割があります。WordPressのブロックエディタでは、「見出し」ブロックを利用して簡単に見出しを挿入することができます。見出しブロックでは、見出しレベルや配置を変更することができます。

見出しには「H1」から「H6」までの合計6種類あります。見出しのデザインは、使用しているテーマによって異なります。

見出しを使うとき、その順番に注意が必要です。文書構造にそって、H2→H3→H4…という順番で見出しを入れるようにします。[コンテンツ構造]ボタンをクリックすると、見出しの順番に誤りがないかチェックをすることができます。