HTMLの基本と使い方まで徹底解説
はじめに
Webページにおける「見出し」は、文章構造を整理し、読みやすさを向上させるための重要な要素です。WordPressでは「見出しブロック」を使って簡単に階層構造を持ったコンテンツを作成できます。このページでは、HTMLにおける見出しの役割から、WordPressの見出しブロックの具体的な使い方までをわかりやすく解説します。
HTMLにおける見出しタグ（<h1>〜<h6>）の意味
HTMLでは、<h1>から<h6>までの6段階の見出しタグが用意されています。
| 見出しタグ | 用途・意味 |
|---|---|
<h1> | ページの主題（最上位の見出し） |
<h2> | <h1>の下位のトピックの見出し |
<h3> | <h2>の下位項目、より細かい説明 |
<h4>〜<h6> | より詳細な階層で使われる見出し |
ポイント
- 見出しタグは順番に使うことが大切です。いきなり
<h3>を使ったり、階層を飛ばすとSEO評価が下がることも。 - 見出しは論理的な構造を表現するために使います。見た目だけで選んではいけません。
WordPressの見出しブロックとは？
WordPressのブロックエディタ（Gutenberg）には「見出しブロック」という専用ブロックがあります。これは、HTMLの<h1>〜<h6>タグに対応した見出しを簡単に挿入・管理できる機能です。
見出しブロックの追加方法
- 投稿または固定ページの編集画面を開きます。
- 「＋」アイコンから「見出し」ブロックを選択します。
- テキストを入力します。
- ブロック上のツールバーで、
H2などの階層レベルを選択します。
見出しレベルの切り替え
ブロックを選択すると、ツールバーに「H2」「H3」などが表示されます。ここで簡単にレベルを変更可能です。
見出しブロックの活用ポイント
1. ページ全体の構成を意識する
- ページタイトルは通常
<h1>（テーマが自動で付与） - 本文の見出しは
<h2>からスタート H3以降は必要に応じて使用
2. SEO対策としての見出しの役割
- Googleは見出しから内容を読み取ります
- 適切なキーワードを含めることでSEO効果が期待できます
3. 読みやすさ・アクセシビリティの向上
- スクリーンリーダーは見出しを基に読み上げます
- 長文の中でも見出しがあることで情報が整理されます
よくある質問（FAQ）
Q. <h1>は複数使ってもいいですか？
A. 通常は1ページに1つが基本です。WordPressのテーマが自動で<h1>をタイトルに割り当てる場合が多いので、本文中では<h2>以下を使いましょう。
Q. 見出しブロックで装飾はできますか？
A. はい。テーマやプラグインによっては、見出しの色・背景・アイコン付き装飾などが可能です。
まとめ
WordPressの見出しブロックは、HTMLの見出しタグに対応し、コンテンツ構造を整理するために欠かせない機能です。正しい階層で使用することで、SEOや読みやすさ、ユーザー体験が大きく向上します。記事を書く際は、「読者が内容をすぐに理解できる構造」を意識して、見出しブロックを効果的に活用していきましょう。
