ブロックエディタ完全活用

ブロックエディタ完全マスター——Gutenbergで自在にページを作る

WordPress 5.0から標準搭載されたブロックエディタ（Gutenberg）は、ドラッグ&ドロップとブロックの組み合わせでリッチなコンテンツを作成できる編集システムです。かつてのクラシックエディタとは根本的に異なる設計思想を持ち、コードを書かずにプロ品質のページレイアウトを実現できます。このレッスンでは、主要ブロック20種の使い方をすべて解説し、カラム・グループ・再利用ブロックの実践的活用法、追加CSSによるカスタマイズ、作業効率を10倍上げるショートカット一覧まで体系的に学びます。

---

ブロックエディタ全体マップ

Gutenbergブロックエディタ — 主要ブロックと活用マップ

ブロックエディタのブロックは「テキスト系・メディア/レイアウト系・動的/高度系」の3カテゴリに大別されます。それぞれの特徴を理解して使い分けることで、表現力と制作効率が格段に向上します。

---

ブロックエディタの基本操作

ブロックの追加方法

ブロックを追加するには主に3つの方法があります。

1. ◆スラッシュコマンド（最速）: テキストエリアで「/」を入力するとブロック検索ボックスが表示されます。ブロック名の一部を入力してEnterで挿入できます
2. ◆プラスボタン: エディタ上部のプラスアイコンまたは各ブロック間に表示されるプラスボタンをクリックしてブロックメニューを開く
3. ◆ドラッグ&ドロップ: ブロックインサーターからブロックをドラッグしてエディタ上の任意の位置にドロップする

ブロックの選択と操作

---

主要ブロック20種 詳細解説

テキスト系ブロック

メディア・レイアウト系ブロック

動的・高度系ブロック

---

カラムブロックの実践活用

カラムブロックはWordPressブロックエディタで最もよく使うレイアウトブロックです。コーディングなしで横並びレイアウトを実現できます。

カラムブロックの設定ポイント

カラム数と幅の設定 2〜6カラムから選択でき、各カラムの幅を個別にパーセントで指定できます。「33% / 67%」「25% / 50% / 25%」など非対称なレイアウトも可能です。

レスポンシブ設定 スマートフォン表示では「モバイルで縦積み」オプションをオンにすることで、自動的に1カラムに切り替えられます。このオプションはカラムブロックのサイドバー（設定パネル）にあります。

カラム内にネスト可能 各カラムの中にさらにカラムブロックを入れることができます（ネスト）。ただし深いネストはパフォーマンスに影響するため、最大2層程度にとどめることを推奨します。

カラムを使ったサービスカードの作り方

1. ◆「/カラム」でカラムブロックを挿入し、3カラムを選択
2. ◆各カラムに「画像」→「見出し（H3）」→「段落」→「ボタン」の順でブロックを追加
3. ◆カラムブロック全体を選択し、背景色や角丸を設定
4. ◆グループブロックでカラム全体を包み、セクション単位のスタイルを適用

💡 カラムのスタック設定: カラムブロックの「設定」→「スタック on mobile」をオンにするとスマートフォンで自動的に縦並びになります。モバイルファーストのデザインでは必ず設定してください。

---

グループブロックの実践活用

グループブロックは複数のブロックをひとつのコンテナにまとめるブロックです。セクション単位でのデザイン管理が可能になります。

グループブロックでできること

背景色の設定 グループブロックに背景色を設定することで、セクション単位での色分けが実現できます。ヒーローセクションを青背景、CTAセクションをオレンジ背景にするといった使い方ができます。

パディングとマージンの制御 グループブロックの「スタイル」タブでパディング（内側の余白）を設定します。これにより各セクションに適切な上下の余白を確保できます。

グループ化のショートカット 複数のブロックを選択した状態で、オプションメニュー（三点メニュー）から「グループ化」を選択するか、Ctrl+G（MacはCommand+G）でグループブロックに変換できます。

⚠️ グループブロックとカバーブロックの使い分け: テキストのみのセクションを背景色付きで表示したい場合はグループブロック、背景に画像を使いたい場合はカバーブロックを使います。カバーブロックは背景画像の上に文字を重ねる用途に特化しています。

---

再利用ブロックの活用

再利用ブロックは「どのページでも同じコンテンツを使い回せる」ブロックです。CTAセクション・問い合わせボタン・免責事項など、複数ページに同一のコンテンツを配置したい場合に活用します。

再利用ブロックの作成と活用手順

作成手順

1. ◆再利用したいブロック（またはグループ）を選択する
2. ◆ブロックツールバーのオプションメニュー（三点メニュー）をクリック
3. ◆「再利用ブロックに追加」を選択し、名前を付けて保存

挿入手順

1. ◆挿入したい場所で「/」を入力
2. ◆保存した再利用ブロックの名前を入力
3. ◆候補が表示されたらEnterで挿入

一括更新の仕組み 再利用ブロックを編集して「更新」すると、そのブロックを使っているすべてのページに変更が即座に反映されます。問い合わせ先の変更・キャンペーン情報の更新などを一箇所で完結できます。

再利用ブロックを「パターン」に変換する

WordPress 6.3以降、再利用ブロックは「同期パターン」に統合されました。同期パターン（同期あり）は再利用ブロックと同じ一括更新の仕組みを持ちます。「同期なし」のパターンは挿入後に独立してカスタマイズできるテンプレートとして機能します。

💡 再利用ブロックの管理画面: すべての再利用ブロック（同期パターン）は、エディタのオプションメニュー（三点メニュー）→「パターンを管理」または管理画面のURLの末尾を「/wp-admin/edit.php?post_type=wp_block」に変更することで一覧管理できます。

---

ブロックへのカスタムCSSの追加

ブロックエディタでは各ブロックに個別にCSSクラスを追加したり、追加CSSプロパティを直接指定したりすることができます。

追加CSSクラスの設定方法

1. ◆CSSを追加したいブロックを選択する
2. ◆右サイドバーの「高度な設定」タブを開く
3. ◆「追加CSSクラス」欄に任意のクラス名を入力（例: feature-card）
4. ◆子テーマのstyle.cssまたはカスタマイザーの追加CSSに該当クラスのスタイルを記述する

style.cssへの記述例

.feature-card {
  border-left: 4px solid #2563eb;
  padding-left: 16px;
  background: #eff6ff;
}

ブロック個別のスタイル設定

WordPress 6.xでは「高度な設定」タブに「追加CSSスタイル」フィールドが追加され、個々のブロックにインラインCSSを直接記述できます。子テーマのCSSを書かずに特定ブロックだけスタイルを変えたい場合に有効です。

⚠️ !importantの使用について: WordPressテーマによってはデフォルトスタイルが強く指定されており、追加CSSが反映されない場合があります。その際は「!important」を付けることで上書きできますが、乱用するとCSSの管理が複雑になるため、必要な箇所にのみ使用してください。

---

ブロックエディタ ショートカット完全一覧

キーボードショートカットを覚えることで、ブロックエディタの作業速度が大幅に向上します。

必須ショートカット（まず覚える10個）

上級ショートカット

💡 ショートカット一覧の確認方法: エディタ内で「Shift + Alt + H」（MacはControl + Option + H）を押すと、利用可能なすべてのショートカット一覧がポップアップ表示されます。いつでも確認できます。

---

ブロックエディタのトラブルシューティング

よくあるエラーと対処法

「このブロックには想定外のコンテンツが含まれています」エラー このエラーはブロックのHTMLが破損している場合に表示されます。「ブロックの回復」をクリックすると自動修正が試みられます。解決しない場合は「HTMLとして編集」でHTMLを直接確認・修正します。

ブロックエディタが重くて動作が遅い 画像ファイルサイズが大きい場合や、ブロック数が非常に多い場合に発生します。画像は事前に圧縮（EWWW Image Optimizer等）し、1ページのブロック数は100以内に抑えることを推奨します。

カスタムCSSが反映されない テーマのスタイルが「!important」で強く指定されている場合に起きます。ブラウザの開発者ツール（F12）でどのCSSが適用されているかを確認し、より詳細なセレクタを使うか「!important」を追記します。

---

🏋️実践ワーク

以下のワークを実施してください。

1. ◆ブロック習熟: テスト投稿を作成し、テキスト系8ブロック（段落・見出し・リスト・引用・コード・テーブル・詳細・整形済みテキスト）をすべて1つずつ挿入して基本操作を確認する
2. ◆カラムレイアウト作成: 3カラムのサービスカードセクションをカラムブロックで作成し、モバイル表示でスタック（縦積み）になることをレスポンシブプレビューで確認する
3. ◆再利用ブロック作成: CTAセクション（見出し+段落+ボタン）を作成して再利用ブロックに登録し、2つの異なる固定ページに挿入したうえで元のブロックを編集して両ページに変更が反映されることを確認する
4. ◆カスタムCSS追加: 段落ブロックに追加CSSクラス「highlight-box」を設定し、子テーマのstyle.cssまたはカスタマイザーの追加CSSに背景色・枠線・余白のスタイルを記述して反映させる

📝まとめ

ブロックエディタはWordPressの「制作の中心」です。20種のブロックの特性を理解し、カラム・グループでレイアウトを構成し、再利用ブロックでコンテンツを効率的に管理することが、プロ品質のWordPressサイトを素早く作る鍵です。ショートカットを積極的に使い、CSSクラスによるカスタマイズで表現力を高めることで、デザイナーやエンジニアに依頼せずに自走できるWordPress運用者として成長できます。