WordPressのグループブロックは、見出し・文章・画像・ボタンなど複数のブロックを一つにまとめる機能です。まとめた範囲へ背景色や余白を一度に設定でき、案内枠や申込み欄を整えやすくなります。この記事では、既存ブロックをグループ化する手順、選択方法、解除、スマートフォン確認まで説明します。
グループブロックとは
グループブロックは、複数のブロックを入れるための親ブロックです。たとえば「料金案内」という見出し、説明文、申込みボタンを一つのグループに入れると、そのまとまりを一度に移動したり、背景色を付けたりできます。
グループ内の見出しや段落は子ブロックとして残ります。文章を修正するときは子ブロックを選び、全体の背景や余白を変えるときは親のグループを選びます。この親子関係を理解すると、設定が見つからないときの原因を判断できます。
既存ブロックをグループ化する手順
- 投稿または固定ページの編集画面を開きます。
- まとめたい最初のブロックをクリックします。
- Shiftキーを押しながら、最後のブロックをクリックします。
- 選択した範囲のツールバーにある三点メニューを開きます。
- 「グループ化」を選びます。
- 左上のリスト表示を開き、選んだブロックが「グループ」の中へ入ったことを確認します。
- 右上の「下書き保存」または「更新」を押します。
離れた場所にあるブロックを一度にまとめるのではなく、連続した範囲を選びます。選択中の青い枠が目的の見出しからボタンまでを囲んでいるか確認してからグループ化してください。
新しいグループを先に追加する方法
内容をこれから作る場合は、空のグループを先に追加できます。追加したい場所の「＋」を押し、「グループ」と検索して選択します。グループ内に表示される「＋」から、見出し、段落、画像、ボタンなどを順番に入れます。
挿入時に「グループ」「横並び」「縦並び」などの選択肢が表示される場合は、通常の案内枠ならグループを選びます。横並びは要素を左右へ並べたいとき、縦並びは配置方向を明示して管理したいときに使います。初めてなら通常のグループが扱いやすいです。
親のグループを確実に選ぶ
文章をクリックすると、内側の段落ブロックが選ばれます。その状態では、グループ全体の背景や余白が設定欄へ表示されないことがあります。左上のリスト表示を開き、段落の一段上にある「グループ」を選択してください。
正しく選べると、編集画面の青い枠が見出し・文章・ボタンの全体を囲みます。ツールバーの「親ブロックを選択」アイコンから外側へ移る方法もありますが、階層が複雑なページではリスト表示の方が対象を確かめやすいです。
背景色を探していたのに、文字色しか表示されなくて困っていました。
文章を選んだままだったから、グループの設定が出なかったんですね。
そのとおりです。
リスト表示で親のグループを選び、青い枠が案内全体を囲んだことを確認してください。
外側の箱を選ぶイメージなら分かりやすいです。
設定が見つからないときは、まず選んでいる階層を確認してみます！
それが一番安全です。
親を選べたら、次は背景色と余白を少しずつ設定しましょう。
背景色と文字色を設定する
- リスト表示から親のグループを選びます。
- 右側の設定欄で「スタイル」を開きます。
- 「色」または「カラー」の項目を開きます。
- 背景に使う色を選びます。
- 文字が読みにくくなった場合だけ文字色も変更します。
- プレビューでリンクやボタンを含めて読みやすさを確認します。
薄い背景には濃い文字、濃い背景には十分に明るい文字を使います。装飾を目立たせることより、文章が無理なく読めることを優先します。テーマに用意された色を使うと、サイト全体の統一感を保ちやすくなります。
内側の余白を付ける
背景色だけを付けると、文字が枠の端へ寄って窮屈に見えることがあります。親のグループを選び、右側の「寸法」「スペーシング」などからパディングを設定します。上下左右を同じ値で始め、公開画面を見て必要な方向だけ調整してください。
外側の別要素との距離はマージン、背景色の内側と内容の距離はパディングです。名称はテーマによって異なります。数値を大きくしすぎると、スマートフォンで本文の幅が狭くなるため、段階的に変えます。
グループ全体を移動・複製する
親のグループを選択すると、見出しやボタンをまとめたまま上下へ移動できます。リスト表示でグループをドラッグするか、ツールバーの上下移動を使います。移動後は前後の見出し順と文章の流れを読み直してください。
似た案内枠を作る場合は、三点メニューから「複製」を選べます。複製後は見出し、本文、リンク先、ボタン文言をすべて変更します。リンクだけ前の内容が残る事故があるため、公開前に実際にクリックします。
グループ化を解除する方法
- リスト表示で解除したい親グループを選びます。
- ツールバーの三点メニューを開きます。
- 「グループ解除」を選びます。
- 内側のブロックが一段外へ戻ったことをリスト表示で確認します。
- 背景色や余白が不要になったことをプレビューで確認します。
解除しても通常は中の文章や画像は残ります。ただし、親グループに設定していた背景色、余白、枠線は外れます。操作直後に意図と違う状態になったら、上部の「元に戻す」を押してください。
スマホ表示で確認する項目
グループに大きな左右余白を付けると、スマートフォンで1行が短くなります。プレビューのモバイル表示で、文章が1文字ずつ折り返していないか、ボタンが枠から出ていないか、画像が横にはみ出していないか確認します。
背景色の付いたグループが連続する場合は、枠同士の間隔も見ます。どこからどこまでが一つの案内か分からないときは、色を増やすより、見出しと適度な外側余白で区切ります。最後に実際のスマートフォンでも上から下まで読みます。
うまくグループ化できないとき
グループ化がメニューにない
一つのブロックしか選べていない可能性があります。リスト表示で複数の連続したブロックを選ぶか、空のグループを先に作って中へ移動します。
意図しないブロックまで入った
操作直後なら「元に戻す」を使います。すでに保存した場合はリスト表示を開き、不要な子ブロックをグループの外へドラッグします。
背景色が一部分にしか付かない
親グループではなく内側の段落やボタンを選んでいないか確認します。青い枠が案内全体を囲む状態で背景を設定してください。
編集画面と公開画面が違う
更新ボタンを押したか、古いキャッシュを見ていないか確認します。別のブラウザやシークレット表示で公開URLを開き、最新内容と比較します。
グループにすると、背景だけでなく移動や複製もまとめてできるんですね。
ボタンのリンクだけ古いまま残さないように気を付けます！
はい。
複製は便利ですが、見出し・説明・リンクの組み合わせを公開前に一組ずつ確認することが大切です。
スマホでは余白を広げすぎないようにして、実際の公開ページも最後まで読みます。
もし崩れたら、リスト表示で親子関係を確認して戻せば安心ですね！
その進め方で大丈夫です。
グループは装飾より、内容のまとまりを分かりやすくするために使いましょう。
WordPressをこれから始める方へ
グループブロックを使った記事作成を試すには、WordPressを動かす環境が必要です。これから新しくサイトを用意する方や、現在の管理環境を見直したい方は、導入手順がまとまったサーバーを候補にできます。すでに現在のサーバーで安定して運用できている方は、この記事を理由に契約を変える必要はありません。
エックスサーバー
WordPressクイックスタートに対応し、契約とWordPressの初期設定をまとめて進められます。料金、契約期間、キャンペーン条件は申込み前に公式ページで最新情報を確認してください。
エックスサーバーの公式ページを確認するまとめ
グループブロックは、複数のブロックを一つのまとまりとして管理する機能です。既存ブロックを選んでグループ化し、リスト表示で親のグループを選べば、背景色、余白、移動をまとめて設定できます。解除するときは親の三点メニューを使い、意図と違えば元に戻します。更新後はスマホ幅と公開ページを確認してください。
よくある質問
グループ内の文章だけ編集できますか？
できます。リスト表示または編集画面から内側の段落を選び、通常どおり文章を変更します。
グループを解除すると中身も消えますか？
通常は中のブロックが外へ戻ります。親へ設定した背景や余白は外れるため、解除後の見た目を確認してください。
グループを何重にも入れてよいですか？
可能ですが、階層が深いほど選択やスマホ調整が難しくなります。初心者は必要最小限にし、リスト表示で構造を確認できる範囲にします。