今回は、WordPress（ワードプレス ）のブロックエディタ「Gutenberg（グーテンベルグ）」の標準機能であるグループを使い一つにまとめたグループブロックに背景色や枠線などのstyleを付け加える方法を紹介します。
このグループを使う事で、ブロック全体を『div』要素で囲むのと同じ事が出来るので、Gutenberg（グーテンベルグ）で作成するページのデザインやレイアウトの幅が大きく広がります。
通常のブログ投稿では中々使う場面は無さそうだが、ホームページやランディングページ作成時に使える技術なので是非使ってみてください。
グループの基本的な使い方
まずはグループの基本的な操作の仕方を説明致します。
下記のようにグループ化したいブロックを全選択して左上のグループを押したら完了です。（グループのメニューが出ない場合は右上の『…』を押しグループ化を押します。）
作成したグループを選択し、右側の色設定からグループブロックのみに背景色を追加出来ます。
実際の見た目は下記のようになりました。
グループ毎にスタイルを付ける方法
次にグループ毎にスタイル（CSS）を反映される方法を紹介します。
まずは、スタイルを付けたいブロックを選択してCSSクラスを作成して下さい。（任意の文字列でOK）
各記事の追加ヘッダー（追加CSSのフィールド）に先程追加したCSSクラスに対してstyleを記述します。
すると下記のように緑グループには枠線は無く、青グループには枠線が有り、といったように特定のエリアにのみstyleが適応する方ができます。
CSSの記述の仕方については以下から
また、グループを連続で並べると、隙間が一切なくグループ同士がくっ付いてしまいダサいので下記のようにスペーサーをグループ間に置き調整しましょう。
最後に、グループの中にグループを作成可能で、それぞれのグループに違ったCSSクラスを追加出来ます。これを応用する事で複雑なデザインも作成可能となっています。（下記の実際の見た目はこのページの見本4です。）
グループの見本
下記の見本は全て色別でグループ分けしています。
見本1
グループ1
この様にしてグループ化します。
見本2
グループ2
たくさんの背景色を一つのページに。
見本3
グループ3
グループの中にも個別でスタイルを付けれます。
見本4
グループの中にグループを入れると、こんなのも作れます。
以上が「ワードプレスのブロックをグループ化してstyleを適応させる方法」でした。
このグループを応用すればGutenberg（グーテンベルグ）だけで躍動感のあるページを作成する事が可能になるかと思います。
是非、活用していってください。
下記の記事では基本的なGutenbergの使い方をまとめています。合わせてどうぞ。
