WordPressのグループブロックで見出しと文章をまとめる方法

大事なお知らせを、見出しと説明文ごと淡い背景で囲みたい。そんなときは、ブロックを一つずつ飾るより、「グループ」にまとめると簡単です。見出し、文章、ボタンを一組にすると、あとから案内全体を移動しやすくなります。

1. リストビューでまとめたいブロックを選ぶ

1. 編集画面の左上で「ドキュメント概観」を開き、「リストビュー」を表示します。
2. まとめたい最初のブロックをクリックし、Shiftキーを押しながら最後のブロックをクリックします。まずは、隣り合った見出しと段落で試してみてください。
3. 複数選択時のツールバーにある「グループ化」を押します。見つからないときは、ツールバーの「︙」メニューも確認します。
4. リストビューで「グループ」を開き、選んだブロックだけがその下に入ったことを確認します。

新規作成なら、先に「＋」から「グループ」を追加し、その内側に見出し・段落などを足せます。案内を普通の縦並びにしたい場合は、横並びやグリッドではなく通常のグループを選びます。

2. グループ全体の背景と内側の余白を設定する

リストビューで一番外側の「グループ」を選び、右側の「ブロック」設定から「スタイル」を開きます。「色」で背景色を選び、「サイズ」や「寸法」などの項目で内側の余白を調整します。テーマによって表示できる項目や名前が異なります。

左のリストビューでは、内側のParagraph（段落）ではなく、その上のGroup（グループ）を選びます。英語表示のこの画面では、右側のBlock → Background → Colorが背景色です。上にあるTypography → Colorは文字色なので取り違えないようにしましょう。

枠の端と文字が近いときは、枠の内側を広げる「パディング」を使います。前後の本文との間を離したい場合は、外側を調整する「マージン」を確認します。

3. 文字の読みやすさと移動範囲を確かめる

• 淡い背景なら濃い文字を合わせ、スマホで文字が見やすいか確認します。
• リストビューでグループを選ぶと、ひとまとまりで移動できます。個別の見出しだけ動かしたいときは、その見出しを選びます。
• 選ぶ範囲を間違えたら、公開前に「元に戻す」で戻し、選び直します。

この方法でまとめた案内は、別の記事と自動で同期されるわけではありません。複数の記事で同じ案内をまとめて更新したい場合は、同期パターンを使いましょう。

関連記事

• リストビューでブロックを探す方法
• 複数の記事で共通案内を使う同期パターン
• 左右に2列で並べるカラムの使い方

サイトの準備に使えるサービス

これから公開先を用意する方は、ドメインとサーバーの条件を見比べてみてください。