みなさまこんにちは。弊社でもウェブサイト制作によく使用しているCMS、WordPressの使い方を何回かに分けてお伝えしております。
今回は、レイアウトの幅が広がるブロックのグループ化という機能をご紹介します。
![グループブロックアイコン](https://kotatsu.info/blog/wp-content/uploads/2021/08/icon_group.png)
複数のブロックに色をつけたいなら、ブロックを「グループ」化しましょう。
![大きなエリアに背景をつけた例](https://kotatsu.info/blog/wp-content/uploads/2021/08/group-example-749x1024.jpg)
このように、大きなエリアに背景をつけたいときがあるでしょう。
段落ブロックには背景色を設定できます。
![複数のブロックに背景をつけた例](https://kotatsu.info/blog/wp-content/uploads/2021/08/no-group-example-644x1024.jpg)
が、複数のブロックに同じ色を付けると、間に余白ができてしまいます。
こういうときには「グループ」化です。その名の通り、複数のブロックをまとめます。
「グループ」化の方法
![複数のブロックを選択](https://kotatsu.info/blog/wp-content/uploads/2021/08/group-blocks-select-665x1024.jpg)
もしくは、クリックしたままマウスカーソルを移動させ、複数のブロックを選択します。
![ブロックツールバーのオプションメニューから「グループ化」を選択](https://kotatsu.info/blog/wp-content/uploads/2021/08/group-block-tool-select-657x1024.jpg)
![ブロックタイプの変換](https://kotatsu.info/blog/wp-content/uploads/2021/09/block-tool-block-type-change.png)
変換方法はもう一つあります。
ブロックツールの一番左にある、ブロックタイプの変換です。
![複数のブロックを選択](https://kotatsu.info/blog/wp-content/uploads/2021/08/group-blocks-select-665x1024.jpg)
もしくは、クリックしたままマウスカーソルを移動させ、複数のブロックを選択します。
![ブロックのタイプを変換するメニューから「グループ」を選択する](https://kotatsu.info/blog/wp-content/uploads/2021/08/block-tool-group-change.jpg)
![グループ化完了](https://kotatsu.info/blog/wp-content/uploads/2021/08/group-after.jpg)
グループ化できました。
![オプションメニューからのグループ化(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/g0lXUkKnJN-min.gif)
![ブロックタイプ変換ツールからのグループ化(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/09/NOSYGl9VVt-min.gif)
新規グループブロックの追加方法
ちなみに、新規ブロックメニューからでも「グループ」ブロックは作成できます。
![プラスボタンから「グループ」ブロック選択](https://kotatsu.info/blog/wp-content/uploads/2021/08/group-add-1.png)
![左上のプラスボタンからメニューを開いて「グループ」ブロックを選択](https://kotatsu.info/blog/wp-content/uploads/2021/08/group-add-2-867x1024.png)
この場合は、表示された大きな「+」ボタンをクリックして新しいブロックを作成し、その上や下にどんどんブロックを追加します。
![グループブロック](https://kotatsu.info/blog/wp-content/uploads/2021/08/group-block.png)
![新しいグループブロックの作成方法(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/ucaweBZxeF-min.gif)
「グループ」ブロック全体の選択と編集
「グループ」ブロック全体を選択する方法は2つあります。
- 画面一番下のバーから「グループ」をクリックする
- ブロックツールバーから「グループ」を選択する
両方とも、グループの中にあるブロックを選択してから行います。
画面一番下のバーから「グループ」をクリックする
![画面一番下のバー(ブロックのパンくずリスト)](https://kotatsu.info/blog/wp-content/uploads/2021/08/group-bread-crumb.jpg)
画面一番下には、「ブロックのパンくずナビ」というものがあります。
グループ内のブロックを選択した状態で、ブロックのパンくずナビから「グループ」をクリックします。
するとグループ全体を選択した状態に変わります。
![画面一番下のバーからグループ全体を選択する(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/DOfhG8K7Sp-min.gif)
この一番下のツールバーを見れば、今どこの階層で何のブロックを選択しているか分かります。覚えておきましょう。
ブロックツールバーから「グループ」を選択する
![グループの中のブロックを選択後、ブロックツールバーの「グループ」を選択する。](https://kotatsu.info/blog/wp-content/uploads/2021/09/group-block-select-block-tool.jpg)
グループの中のブロックを選択すると、ブロックツールバーの一番左に、「グループを選択」ボタンが表示されます。クリックすると、グループ全体が選択されます。
![ブロックツールバーからグループ全体を選択する(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/09/1UBD4qhsNL-min.gif)
これで、大きなエリアの背景に色をつけたり、一括で文字色の変更もできます。しかも、複数ブロックをスムーズにまとめて移動できます。
![グループブロックの編集(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/7ZZywLELKE-min.gif)
![グループブロックの中にグループブロックを入れたレイアウト例](https://kotatsu.info/blog/wp-content/uploads/2021/08/group-in-group-720x1024.jpg)
また、グループブロックは中にも複数作れます。
このようなレイアウトも可能です。
「グループ」解除方法
![グループブロック全体を選択](https://kotatsu.info/blog/wp-content/uploads/2021/08/group-select-688x1024.jpg)
![ブロックツールからグループ解除を選択](https://kotatsu.info/blog/wp-content/uploads/2021/08/group-block-tool-cancel-733x1024.jpg)
![グループブロック解除後](https://kotatsu.info/blog/wp-content/uploads/2021/08/group-cancel-830x1024.jpg)
![グループ解除方法(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/79YHe5DoY6-min.gif)
以上、ブロックのグループ化機能を解説しました。
その他のブロックについての解説は、WordPressレクチャーからご覧ください。