カラム・グループブロックでレイアウトを整える基本
WordPressのブロックエディタ(Gutenberg)で記事を作成していると、「文章を左右に並べたい」「複数の要素をまとめて背景色をつけたい」といった、少し凝ったレイアウトを組みたい場面が出てきます。
こうしたレイアウト調整に役立つのが、「カラム」ブロックと**「グループ」ブロック**です。この記事では、この2つのブロックの基本的な使い方と、それぞれどんな場面で使い分ければよいかを解説します。
カラムブロックとグループブロックの違い
まず、この2つのブロックの役割の違いを押さえておきましょう。
| ブロック | 役割 |
|---|---|
| カラムブロック | コンテンツを左右(横方向)に並べるためのブロック |
| グループブロック | 複数のブロックを1つのまとまりとして扱うためのブロック |
カラムは「横に並べること」、グループは「まとめること」が主な目的です。この2つは組み合わせて使うことも多く、例えば「カラムで左右に分けた片方のブロックの中身を、さらにグループでまとめて背景色をつける」といった使い方もできます。
カラムブロックの基本的な使い方
どんな場面で使うか
- 文章と画像を左右に並べて表示したい
- サービス内容やメリットを2〜3列に並べて紹介したい
- 左に目次、右に本文といった構成にしたい
使い方の手順
- ブロックの追加ボタン(+)から「カラム」を選択します
- 「2カラム」「3カラム」など、あらかじめ用意されたレイアウトの候補が表示されるので、近いものを選びます(後から列数の調整も可能です)
- 挿入されたカラムの中に、文章ブロックや画像ブロックなどを追加していきます
レイアウトを調整する際のポイント
- カラムごとの幅の比率は変更できる:カラムブロックを選択すると、各列の境界線をドラッグして幅を調整できます。「左を狭く、右を広く」といった非対称なレイアウトも可能です。
- スマートフォン表示では自動的に縦並びになる:多くのテーマでは、カラムはスマートフォンなどの狭い画面で表示された際、自動的に上下に積み重なる形に切り替わります。パソコンでの見た目だけでなく、スマートフォンでの表示も必ず確認しましょう。
- 列を入れすぎない:列数を増やしすぎると、1列あたりの幅が狭くなり、特にスマートフォンで見づらくなる原因になります。基本は2〜3列程度を目安にするとバランスが取りやすくなります。
グループブロックの基本的な使い方
どんな場面で使うか
- 見出し・文章・ボタンなど、複数のブロックをまとめて背景色をつけたい
- 特定の範囲だけ余白(パディング)を広めに取りたい
- 複数のブロックをまとめて移動・複製したい
使い方の手順
- ブロックの追加ボタン(+)から「グループ」を選択し、その中に必要なブロックを追加していく方法
- 既に配置してある複数のブロックを選択した状態で、ツールバーから「グループ化」を選ぶ方法
の2通りがあります。既存のコンテンツをまとめたい場合は、後者の方法が便利です。
レイアウトを調整する際のポイント
- 背景色・余白は「スタイル」タブから設定する:グループブロックを選択した状態で、画面右側の設定パネルにある「スタイル」タブを開くと、背景色や内側の余白(パディング)を設定できます。
- グループ内の配置(左寄せ・中央寄せ)も設定できる:グループ全体、またはグループ内のコンテンツをページの中央に寄せたい場合、配置に関する設定項目を確認しましょう。
- グループを入れ子(グループの中にグループ)にできる:複雑なレイアウトを組みたい場合、グループの中にさらにカラムやグループを配置することも可能です。ただし、入れ子が深くなりすぎると編集画面が分かりにくくなるため、必要な範囲にとどめましょう。
カラムとグループを組み合わせた例
例えば、「サービス内容を3つ、それぞれ枠で囲んで紹介したい」という場合、次のような組み合わせ方が考えられます。
- まず「カラム」ブロックで3列のレイアウトを作成する
- それぞれの列の中身を「グループ」ブロックでまとめる
- 各グループに背景色や余白を設定し、枠のような見た目に整える
このように、カラムで大枠の配置を決め、グループで装飾やまとまりを加える、という組み合わせ方を覚えておくと、表現の幅がぐっと広がります。
レイアウトを整える際によくあるつまずきポイント
- 列の幅を揃えたつもりが微妙にズレる:数値入力ではなくドラッグで幅を調整している場合、細かい誤差が生じやすいため、可能であれば均等割り付けの初期状態から大きく崩さないようにすると安定します。
- スマートフォンでの見た目を確認せずに公開してしまう:パソコン画面での見た目だけを確認して満足してしまいがちですが、実際の閲覧者の多くはスマートフォンを使っています。プレビュー機能などで、必ずスマートフォン表示も確認しましょう。
- 装飾を詰め込みすぎて読みにくくなる:背景色や余白を多用しすぎると、かえって文章が読みにくくなることがあります。装飾はコンテンツを引き立てる範囲にとどめるのがポイントです。
まとめ
カラムブロックとグループブロックは、それぞれ「横に並べる」「まとめる」という異なる役割を持つ、レイアウト調整の基本となるブロックです。
- 左右に並べたいときはカラムブロック
- 複数の要素をまとめて装飾したいときはグループブロック
- 組み合わせることで、より複雑なレイアウトも表現できる
まずはシンプルな2カラムのレイアウトから試してみて、慣れてきたらグループブロックでの装飾も組み合わせていくと、無理なくレイアウト表現の幅を広げていけます。
「デザインに沿ったレイアウトの組み方を相談したい」「オリジナルのデザインテンプレートを作りたい」という場合は、お気軽にお問い合わせください。
2026.09.13