グループ化で複数のブロックをまとめてstyleを適応させる方法

ワードプレス

今回は、WordPress(ワードプレス )のブロックエディタ「Gutenberg(グーテンベルグ)」の標準機能であるグループを使い特定エリアに背景色や枠線などのstyleを付け加える方法を紹介します。

このグループを使う事で、ブロック全体を『div』要素で囲むのと同じ事が出来るので、Gutenberg(グーテンベルグ)で作成するページのデザインやレイアウトの幅が大きく広がります。

通常のブログ投稿では中々使う場面は無さそうだが、ホームページやランディングページ作成時に使える技術なので是非使ってみてください。

グループの基本的な使い方

まずはグループの基本的な操作の仕方を説明致します。

下記のようにグループ化したいブロックを全選択して左上のグループを押したら完了です。(グループのメニューが出ない場合は右上の『…』を押しグループ化を押します。)

作成したグループを選択し、右側の色設定からグループブロックのみに背景色を追加出来ます。

実際の見た目は下記のようになりました。

グループ毎にスタイルを付ける方法

次にグループ毎にスタイル(CSS)を反映される方法を紹介します。

まずは、スタイルを付けたいブロックを選択してCSSクラスを作成して下さい。(任意の文字列でOK)

ブロックエディタの下の方にある追加ヘッダーに先程追加したCSSクラスに対してstyleを記述します。

すると下記のように緑グループには枠線は無く青グループには枠線が有り、といったように特定のエリアにのみstyleが適応する方ができます。

CSSの記述の仕方については以下から

また、グループを連続で並べると、隙間が一切なくグループ同士がくっ付いてしまいダサいので下記のようにスペーサーをグループ間に置き調整しましょう。

最後に、グループの中にグループを作成可能で、それぞれのグループに違ったCSSクラスを追加出来ます。これを応用する事で複雑なデザインも作成可能となっています。(下記の実際の見た目はこのページの見本4です。)

動画で見る

グループの見本

下記の見本は全て色別でグループ分けしています。

見本1

グループ1

この様にしてグループ化します。

 見本2

 グループ2

 たくさんの背景色を一つのページに。

見本3

グループ3

グループの中にも個別でスタイルを付けれます。

見本4

グループの中にグループを入れると、こんなのも作れます。


以上が「グループ化で複数のブロックをまとめてstyleを適応させる方法」でした。

このグループを応用すればGutenberg(グーテンベルグ)だけで躍動感のあるページを作成する事が可能になるかと思います。

是非、活用していってください。

ワードプレスcss,Gutenberg,WP使い方

Posted by KT