ブロックエディターを使いこなそう
WordPress のグループブロックでなにができるのか?
ただグルーピングするだけにとどまらない グループブロックの使いかたを紹介します
こんにちは、スタッフのトリさんこと鳥山です。
WordPress のブロックエディターでグループブロックをよく使います。みなさんはいかがでしょうか?
グループブロックなどブロックをグルーピングするだけのものでしょう、とお思いかもしれませんね。いえ、それだけではもったいない。グループ単体ではもちろんのこと、複数のグループを組み合わせることでさまざまな表現ができるグループブロックの使いどころを紹介します。
ブロックをグループ化する
ブロックをグループ化する、すなわちひとくくりにまとめるのがグループブロックの基本的な役割りです。グループ化には2つの方法があります。
1. グループを設置してから中にブロックを追加していく
![](https://www.vektor-inc.co.jp/wp-content/uploads/2024/03/group-block-1-1024x149.jpg)
2. すでに設置されたいくつかのブロックをグループ化する
まとめたいブロックを選択し [グループ化]、リストビューから操作するとスムーズです
![](https://www.vektor-inc.co.jp/wp-content/uploads/2024/03/group-block-2-1024x400.jpg)
グループのスタイル
グループのスタイルを設定することができます。
背景や文字色はブロックごとに設定するよりも、グループ単位で設定するほうがシンプルです。
![](https://www.vektor-inc.co.jp/wp-content/uploads/2024/03/group-block-3-1024x438.jpg)
参考パターン: 観光案内 | VK パターンライブラリ
名前をつける
グループブロックに名前をつけることができます。
![](https://www.vektor-inc.co.jp/wp-content/uploads/2024/03/group-block-4-1024x564.jpg)
![](https://www.vektor-inc.co.jp/wp-content/uploads/2024/03/group-block-5-1024x290.jpg)
たとえば会社案内のページ内では、「代表挨拶」「会社概要」「アクセス」のようにグループを分け名前をつけておくと、後から見るときにわかりやすいでしょう。
![](https://www.vektor-inc.co.jp/wp-content/uploads/2024/03/group-block-6-1024x261.jpg)
参考パターン: 会社案内 | VK パターンライブラリ
背景の使い方
グループごとに背景色 (単色 / グラデーション)、背景画像を設定することができます。
全幅と背景色
グループブロックを全幅にし背景色を設定してみます。
セクションの区切りとしてよくあるデザインですね。
![](https://www.vektor-inc.co.jp/wp-content/uploads/2024/03/group-block-7-1024x719.jpg)
コンテンツ幅を超えて背景色を設定するには、いままで自分で CSS を記述していたのではないでしょうか?
全幅グループを使うと思いのままです。
参考パターン: 求人トップページ | VK パターンライブラリ
グラデーション背景
背景色ではグラデーションを使うこともできます。
![](https://www.vektor-inc.co.jp/wp-content/uploads/2024/03/group-block-16-1024x512.jpg)
参考パターン: ヨガイベント_カスタムCSS | VK パターンライブラリ
VK パターンライブラリでは背景の一部だけ色をつけたいときにグラデーションを使うことがあります。グラデーションの境界をくっきりさせる(グラデーション開始位置と終了位置を同じポイントにする)と、あたかもブロークングリッドのように見える効果があります。
![](https://www.vektor-inc.co.jp/wp-content/uploads/2024/03/group-block-9-1024x633.jpg)
他にもグループの角にちょこっと色をつけたりと、
グラデーションの機能でこのような表現ができるのが面白いです。ぜひお試しください。
![](https://www.vektor-inc.co.jp/wp-content/uploads/2024/03/group-block-10-1024x579.jpg)
参考パターン: キャンペーン_バナー・メインビジュアル | VK パターンライブラリ
グラデーションの設定方法
グラデーションの設定方法は、石川リーダーによる動画解説もあリます。
ご覧になってコツを掴んでくださいね。
背景画像
WordPress 6.4よりグループブロックに背景画像を設定できるようになりました。
今月末(2024年3月)リリース予定の WordPress 6.5では、背景画像に焦点ピッカーやサイズが追加されますので、さらに使いやすくなりそうです。背景オプション「︙」をクリックすることで位置とサイズを変更することができます。
※ テーマによります
![](https://www.vektor-inc.co.jp/wp-content/uploads/2024/03/group-block-11-1024x538.jpg)
横並び
複数のグループを横に並べることができます。
カラムブロックに似てます。それでいて幅を指定する必要がないため、適度に並んでくれるのがよいです。配置は [左揃え][中央揃え][右寄せ揃え]のほか[項目の間隔(両端揃え)]を使えるのがポイントです。
隣接するグループとの間隔は [ブロックの間隔] でコントロールします。
見出しの前にアイコンを表示したり、
![](https://www.vektor-inc.co.jp/wp-content/uploads/2024/03/group-block-15-1024x340.jpg)
日付の途中でアイコンを使いたいときにも便利です。
![](https://www.vektor-inc.co.jp/wp-content/uploads/2024/03/group-block-12-1024x691.jpg)
参考パターン: カフェ_クーポン_カスタムCSS| VK パターンライブラリ
タグを並べる
横並びグループを並べ、さらに全体を横並びグループで囲んでみます。
タグのようなインラインブロックの表現ができます。これもよく使います。
![](https://www.vektor-inc.co.jp/wp-content/uploads/2024/03/group-block-13-1024x486.jpg)
枠線と角丸
グループブロックでは枠線と角丸が使えます。
詳しくは下記を参考に
グループブロックを2つ重ねることで、ラフな表現をしてみたり。
![](https://www.vektor-inc.co.jp/wp-content/uploads/2024/03/group-block-14-1024x414.jpg)
参考パターン: 絵画教室_トップページ | VK パターンライブラリ
ブロックエディターを使いこなそう
ただグルーピングするだけにとどまらない グループブロック、
できるだけカスタムCSS を書かずに「どうにかあの表現ができないだろうか?」と悩んだり、あれこれ工夫しながら可能性を探ってみるのも楽しいですよ。
WordPress のがアップグレードされるごとに機能も増えています。今月は WordPress 6.5 のリリースも予定されていますので、楽しみですね!
この記事を書いた人
![TORIYAMA Yuko](https://www.vektor-inc.co.jp/wp-content/uploads/2022/12/sysbird-2022-150x150.jpg)
- Webデザイナーでカメラマン。Vektorチームでは、VK パターンライブラリと写真係を担当しています。WordCamp Tokyo 撮影班 / 着物屋くるり専属カメラマン
最近の投稿
WordPress2024年5月31日画像の設置あれこれ -WordPressのブロックエディター
WordPress2024年4月19日余白をコントロールするには? -WordPressのブロックエディター
WordPress2024年3月25日グループブロックを使い倒せ -WordPressのブロックエディター
WordPress2024年2月29日リストビューでまるわかり -WordPressのブロックエディター
![](https://demo.dev3.biz/architect/wp-content/uploads/2022/10/vk-pattern-library-logo.png)
パターンを使って
よりクオリティの高いサイトに
パターンとは、WordPressのブロックを組み合わせて作ったデザインテンプレートのようなもの。プロのデザイナーが制作したパターンを300以上公開中!コピペしながら高品質なサイトを簡単に作れます。
ブロックエディターで
ABテストを
自由に作成できる VK AB Testing
![](https://www.vektor-inc.co.jp/wp-content/uploads/2024/02/vk-ab-testing-key-visual-list.png)
VK AB Testing は、ABテストを実施するための WordPress 用プラグインです。ブロックエディターでテストパターンを自由に作成でき、ランダム表示とクリック計測が可能です。Webサイトや広告などの施策の改善にぜひご活用ください。