WordPress（ワードプレス）のブロックエディタでよく使うブロックの1つ、「見出し」ブロックの使い方を紹介します。見出しブロックでは、見出しレベルや配置を変更することができます。また、見出しを付ける順番に誤りがないかチェックできる機能もあります。
見出しブロックの使い方
ウェブページ内に見出しを挿入するときには、通常「Hタグ」を使います。Hタグとは、HTML（ウェブページを作成するための言語）で使われるタグの1つです。では、HTMLを理解できないと記事内に見出しを入れることはできないのでしょうか。
いいえ、WordPressを使っているなら心配はいりません。WordPressのブロックエディタでは、「見出し」ブロックを利用して簡単に見出しを挿入することができます。
記事の中に見出しを入れることで、どのような効果があるのでしょうか。
以下の解説は、つぎの条件下で作成しています。ご利用環境によって、本文の内容と実際の画面が異なる場合があります。
- WordPress バージョン：5.2.2
- テーマ：Twenty Nineteen
見出しの役割
「見出し」の持つ大きな役割として、次の2つがあります。
- 見出しの主な役割
-
- サイト訪問者にとって読みやすくなる
- 検索エンジンにページの構造を伝える
サイト訪問者にとって読みやすくなる
見出しを入れることによって、サイト訪問者に記事の主題をわかりやすく伝えることができます。また、単調に文章を並べるよりも、見出しでアクセントを付けることで読みやすくなるという視覚的効果も期待できます。
検索エンジンにページの構造を伝える
検索エンジンロボットがあなたのサイトを巡回（クロール）した際に、ページの内部構造を適切に伝えることができます。
見出しの付け方
先ほどお話したHTMLという言語では、ウェブページ内に「H1」から「H6」まで合計6種類の見出しを付けることができます。H1が最も大きな（重要な）見出しで、H2、H3…となるにつれて小さい見出しとなります。
見出しを使うとき、その順番に注意が必要です。文書構造にそって、H2→H3→H4…という順番で見出しを入れるようにします。例えば、H2の次にH4を使うのは正しい見出しの付け方とはいえません。
見出しのデザイン
一般的に、見出しのレベルが高くなるほど大きな文字で表示されます。どのようなデザインで表示されるかは、使用しているテーマによって異なります。
下の画像は、WordPressの標準テーマ「Twenty Nineteen」「Twenty Seventeen」「Twenty Sixteen」を使用したときの、見出しの表示例です。
見出しについての基本がわかったところで、実際に見出しブロックを使ってみましょう。
見出しブロックを追加する
見出しブロックを新しく追加する方法については、下記ページを参考にしてください。
見出しを編集する
ブロック内に見出しとなる文字列を入力したら、見出しレベルや見出しの配置を変更してみましょう。
見出しレベルを変更する
見出しブロック上部のボタンで[H2][H3][H4]から選択できます。また、画面右側の設定パネルでは、[H1]～[H6]から選択することができます。
- 見出しを付ける順番に注意
-
見出しの付け方でも話しましたが、見出しを付ける順番にも注意が必要です。画面上部の[コンテンツ構造]ボタンをクリックすると、見出しの順番に誤りがないかチェックをすることができます。
配置を変更する
見出し内の文字の配置を、[左寄せ][中央寄せ][右寄せ]から選択できます。
ブロックの種類を変更する
見出しブロックは、次のブロックに変換することができます。
- 段落
- 引用
見出しブロックを他のブロックに変更したい場合は、[ブロックタイプまたはスタイルを変更]ボタンをクリックします。
この記事のまとめ
ウェブページ上の見出しには、サイト訪問者にとって記事を読みやすくしたり、検索エンジンにページの内部構造を適切に伝えたりする役割があります。WordPressのブロックエディタでは、「見出し」ブロックを利用して簡単に見出しを挿入することができます。見出しブロックでは、見出しレベルや配置を変更することができます。
見出しには「H1」から「H6」までの合計6種類あります。見出しのデザインは、使用しているテーマによって異なります。
見出しを使うとき、その順番に注意が必要です。文書構造にそって、H2→H3→H4…という順番で見出しを入れるようにします。[コンテンツ構造]ボタンをクリックすると、見出しの順番に誤りがないかチェックをすることができます。