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