ブロックエディターの「グループ」ブロックは、複数のブロックを1つの箱にまとめるためのブロックです。まとめた箱に背景色や余白を付けて囲み枠を作ったり、中のブロックを横に並べたり、まとめて移動・複製したりできます。この記事では、グループの作り方、「グループ」「横並び」「縦積み」の違い、レイアウト（内側の幅・配置）や背景色・余白の設定、よくあるつまずきを説明します。
グループブロックでできること
グループブロックの主な使い道は次のとおりです。
- 注意書きや補足を、背景色と余白の付いた囲み枠にする
- 見出し・本文・ボタンを1つのまとまりとして扱い、まとめて移動や複製をする
- 画像やボタンを横一列に並べる
- 特定の範囲だけ、文字の色や背景色を変える
グループ自体は見た目を持たない透明な箱です。背景色や枠線を設定して初めて、読者に「囲み」として見えるようになります。
グループの作り方
新しく挿入する
- 投稿の編集画面で、画面左上の「＋」（ブロック挿入ツール）をクリックし、「グループ」と検索して選びます。
- 空の段落で「/グループ」または「/group」と入力して選ぶ方法もあります。
- 挿入すると、どのレイアウトで使うかを選ぶ表示が出ることがあります。用途に合わせて選び、中の「＋」から段落や画像などを追加します。
すでにあるブロックをグループにまとめる
あとから囲みたくなった場合は、既存のブロックをまとめてグループに変換できます。
- まとめたいブロックを選択します。複数の場合は、最初のブロックをクリックし、Shift キーを押しながら最後のブロックをクリックするか、リスト表示で範囲を選びます。
- ブロックツールバーのオプション（縦三点）メニューから「グループ化」を選びます。ツールバーのブロックアイコンから変換先として「グループ」を選ぶこともできます。
グループを解除したいときは、グループを選択し、オプションメニューの「グループ解除」を選びます。中のブロックは残り、外側の箱だけが外れます。
グループ・横並び・縦積みの違い
グループブロックには、並べ方の違う種類（バリエーション）があります。
- グループ：中のブロックを通常どおり上から順に並べます。囲み枠や、範囲の幅をそろえる用途に向いています。
- 横並び（Row）：中のブロックを横一列に並べます。ボタンとアイコン、小さな画像を並べる用途に向いています。
- 縦積み（Stack）：中のブロックを縦に積み、ブロック同士の間隔をまとめて調整できます。
新しいバージョンでは、中のブロックをタイル状に並べる「グリッド」も選べます（2026年10月現在）。これらは別々のブロックではなく同じグループブロックの設定違いなので、あとから設定サイドバーやブロックツールバーで切り替えられます。名前や切り替え方法はバージョンやテーマによって異なる場合があります。
横並びで画面幅が足りなくなった場合の扱いは、設定サイドバーの「レイアウト」で、複数行への折り返しを許可するかどうかで決まります。折り返しを許可しないと、スマートフォンで要素がはみ出したり極端に縮んだりすることがあるため、プレビューの「モバイル」表示で確認してください。
レイアウトの設定
グループを選択すると、設定サイドバーに「レイアウト」の項目が表示されます。ここが分かりにくい部分なので、順に説明します。
内側のブロックの幅
通常のグループには「内側のブロックはコンテンツ幅を使用」という切り替えがあります。
- オン：中のブロックが、テーマで決められた本文の幅（コンテンツ幅）に収まります。グループの背景色は広く、文章は読みやすい幅、という形を作れます。
- オフ：中のブロックがグループの幅いっぱいに広がります。
オンにすると、コンテンツ幅と幅広の幅を数値で上書きする欄も表示されます。ここに値を入れると、そのグループの中だけ本文の幅を変えられます。テーマが幅の設定に対応していない場合は、これらの項目が表示されないことがあります。
配置（両端揃え）
横並びや縦積みでは、中のブロックを左・中央・右のどこに寄せるか、両端に広げるかを選べます。横並びでは上下方向の配置（上揃え・中央揃えなど）も選べるため、高さの違う画像と文章を並べたときにそろえやすくなります。
グループ自体の配置は、ブロックツールバーの配置ボタンで変更できます。テーマが対応していれば「幅広」や「全幅」を選べ、全幅にすると背景色が画面の端から端まで広がります。
背景色・余白・枠線で囲み枠を作る
注意書きの囲み枠を作る手順の例です。
- 囲みたい段落をグループにまとめます。
- 設定サイドバーの「色」で背景色を選びます。濃い背景色にする場合は、テキストの色も読みやすい色に変更します。
- 「寸法」の「パディング」で内側の余白を設定し、文字が枠の端に詰まらないようにします。
- 必要に応じて「枠線」で線の色・太さ、角の丸みを設定します。
内側の余白を設定しないと、背景色の端ぎりぎりに文字が並び、窮屈に見えます。背景色を付けたら、パディングもセットで設定すると覚えておくと便利です。
同じ囲み枠を何度も使う場合は、設定済みのグループを選択し、オプションメニューの「パターンを作成」から保存しておくと、次回から挿入するだけで使えます。
高度な設定では、グループを出力するHTMLの要素を div から section や aside などに変更できます。見た目は変わりませんが、ページの構造を正しく伝えたい場合に使います。迷う場合は初期値の div のままで問題ありません。
うまくいかないときの確認点
背景色を付けたのに中の段落にしか色が付かない
グループではなく、中の段落を選択した状態で色を変えている可能性があります。画面下部のパンくず表示やリスト表示で、グループ自体を選択してから設定してください。中の段落を選んでいる状態からは、ブロックツールバーの「親ブロックを選択」でグループに移れます。
全幅にしたのに画面いっぱいに広がらない
使っているテーマが幅広・全幅の配置に対応していない場合や、グループがカラムなど別のブロックの中に入っている場合は、全幅になりません。グループを本文の直下に置いて試してみてください。
横並びにしたら画像が小さくなった
横並びでは、中のブロックが横幅を分け合うため、画像が縮むことがあります。画像の幅を指定するか、折り返しを許可する設定に切り替えて確認します。
まとめ
- グループは複数のブロックをまとめる透明な箱で、背景色や余白を付けると囲み枠になります。
- 既存のブロックはオプションメニューの「グループ化」でまとめられ、「グループ解除」で元に戻せます。
- グループ・横並び・縦積みは同じブロックの設定違いで、あとから切り替えられます。
- 「内側のブロックはコンテンツ幅を使用」で、背景は広く文章は読みやすい幅、という配置が作れます。
- 背景色を付けたらパディングもセットで設定し、繰り返し使う形はパターンとして保存します。