WordPressのGutenbergで記事を書いていると、「段落や見出しを並べただけで、レイアウトが単調に見える…」と感じることはありませんか？
そんなときに役立つのが、レイアウトを整えるための グループブロック・カラムブロック・カバーブロック です。
これらのブロックを使うと、記事をセクションごとに整理したり、画像と文章を横並びにしたり、背景画像を使って印象的な見出しを作ったりできます。
難しいカスタマイズをしなくても、Gutenberg標準の機能だけで「見やすい」「おしゃれ」な記事に仕上げられるのです。
この記事では、Gutenbergでよく使うレイアウト系ブロックの特徴と使い分けを解説します。
基本ブロックから一歩進んで、記事の見栄えをグッと良くするためのヒントにしてください。
スポンサーリンク
記事レイアウトを整えるための3つのブロック
Gutenbergで記事を書いていると、段落や見出しを並べるだけでは単調に感じることがあります。
そこで活躍するのが グループブロック・カラムブロック・カバーブロック です。
これら3つは「レイアウトブロック」とも呼ばれ、記事全体の構成を整理したり、デザイン性を高めたりするための基本ツールです。
- グループブロック：複数の要素をひとまとめにして管理しやすくする
- カラムブロック：文章や画像を横並びに配置して、見やすいレイアウトにする
- カバーブロック：背景に画像や色を設定して、その上に文字やボタンを載せる
この3つを使い分けるだけで、記事の完成度が大きく変わります。
次の章からは、それぞれの特徴と具体的な使い方を見ていきましょう。
グループブロック｜まとめて管理できるコンテナ
グループブロック は、複数のブロックをひとまとめにして管理できる「コンテナ」のような役割を持ちます。
記事をセクションごとに整理したいときや、背景色・余白をまとめて設定したいときにとても便利です。
グループ化した後は、グループのツールバーに出てくる上下ボタンで、記事内の場所もグループの中身をまとめて移動できます。
主な特徴
- 複数の段落や見出し、画像などを1つのまとまりとして扱える
- グループ全体に 背景色や枠線、余白（マージン／パディング） を設定できる
- レイアウトの単位が明確になり、記事の見やすさが向上する
グループブロックの使い方①「ブロックをまとめる」
すでに作成済みの段落や見出しなどをグループ化したい場合は、以下の方法が便利です。
複数のブロックをドラッグして選択します。
グループのアイコン、もしくはツールバーの「︙」メニューから 「グループ化」 を選択します。
これで選択したブロックが1つのグループになります。
グループブロックの使い方②「グループブロックを追加する」
最初からグループを作る前提で枠を作る方法です。
編集画面で「＋」ボタンをクリックし、「グループ」ブロック を選択して追加します。
ない場合は検索欄に「グループ」と入力すると出てきます。
グループのレイアウトを選択し、段落や画像などのブロックを挿入していきます。
グループのデザインを調整する
サイドバーからグループブロック全体に、背景色や余白を設定できます。
- 背景色：セクションを強調したいときに便利
- 余白（マージン／パディング）：文字や画像が詰まりすぎないように調整
- 枠線：囲み枠としてまとめたいときに活用
テーマによって、デザインのカスタマイズ項目は変わります。
カラムブロック｜横並びレイアウトを作る
カラムブロック は、記事内で要素を横並びに配置できる便利なブロックです。
2列や3列に分けてコンテンツを配置できるため、画像とテキストを並べたいときや料金表を作りたいときに役立ちます。
スマホでは、縦並びとなるためPCとの見た目をプレビューとチェックしながら作成すると良いでしょう。
主な特徴
- 複数の要素を横に並べられる
- レスポンシブ対応で、スマホでは自動的に縦並びになる
- 列ごとに背景色や余白を設定できる
1. カラムブロックを追加する
「＋」ボタンをクリックし、「カラム」と検索して追加します。
あらかじめ用意されているレイアウト（例：2列、3列など）から選択します。
2. 各カラムにブロックを入れる
カラムが挿入されると、左右や上下の「枠」が表示されます。
その中に段落、画像、ボタンなどのブロックを追加して自由にレイアウトできます。
デザインを調整する
サイドバーでデザインの調整ができます。
- 各カラムの 幅を調整 して、比率を変更できる（例：左30%／右70%）
- 背景色や余白をカラムごとに設定可能
- 配置の調整で、記事を読みやすく整理できる
<h2>カバーブロック｜背景画像にテキストを重ねる</h2>
カバーブロック は、背景に画像や動画を設定し、その上にテキストやボタンを配置できるブロックです。
トップページや記事冒頭の「ヒーローセクション」に使うと、印象的でデザイン性の高いレイアウトを作れます。
主な特徴
- 背景に画像や動画を設定できる
- 文字やボタンを上に重ねて配置可能
- オーバーレイカラーをかけて文字を見やすく調整できる
- 高さや配置も自由に変更できる
1. カバーブロックを追加する
「＋」ボタンから「カバー」を選択（ない場合は検索する）
画像をアップロードするか、メディアライブラリから選ぶ。
2. テキストを追加する
カバーの中央に「タイトルを追加」という入力欄が表示されるので、見出しやキャッチコピーを入力します。
さらに、必要なら「+」をクリックし、ボタンブロックを追加してリンクを配置できます。
3. デザインを調整する
サイドバーでは色や配置などの調整ができます。
- オーバーレイカラー：背景に半透明の色をかけて文字を読みやすくする
- 高さの調整：画面全体に広げたり、適度な高さに変更可能
- 文字の配置：中央・上・下に揃えられる
使い分けのポイント
グループ・カラム・カバーはいずれも「レイアウトを整える」ためのブロックですが、それぞれの役割には違いがあります。
どの場面で使うと効果的かを理解しておくと、記事作成の自由度が一気に広がります。
✅ グループブロック
- 複数の要素をまとめて管理したいとき
- 背景色や余白をセクション単位で設定したいとき
- 例：導入文をグループ化して強調、まとめ部分を囲み枠にする
✅ カラムブロック
- 要素を横並びに配置したいとき
- 比較や一覧表示をしたいとき
- 例：左に画像、右に説明文／料金プランを並べて比較
✅ カバーブロック
- 視覚的にインパクトを出したいとき
- 背景に画像や動画を使いたいとき
- 例：記事冒頭のヒーローセクション／イベント告知の大見出し
まとめ｜レイアウトブロックで記事の見栄えを整えよう
WordPressのGutenbergでは、文章や画像を配置するだけでも記事は作れますが、レイアウトブロックを活用すると「見やすさ」と「デザイン性」が大きく向上します。
- グループブロック：セクション単位でまとめ、背景色や余白をつけて整理
- カラムブロック：横並びレイアウトを作り、比較や画像＋文章の組み合わせに活用
- カバーブロック：背景画像や動画を使って、記事冒頭やセクションを印象的に演出
この3つを使い分けることで、記事はぐっと引き締まり、読者にとっても読みやすい構成になります。
まずは簡単な場面から導入し、徐々に応用していくことで、Gutenbergを使った記事作成がもっと楽しく、自由度の高いものになるはずです。