2024年7月16日にリリースされたWordPress6.6では、多くの新機能が追加されました。その中でも私が特に注目したのが「グリッドブロック」です。このブロックは、CSSのグリッドレイアウトに基づいており、複雑なデザインを簡単に作成できることが特徴です。複数の要素を整理して配置できることから「Bento Grid」や「Bento Layout」とも呼ばれ、弁当のように区分けされたレイアウトを実現できます。
この記事では、グリッドブロックの使い方を簡単に解説し、その活用例を紹介します。
グリッドブロックのレイアウト設定
グリッドブロックのレイアウト設定では、まずカラムを指定する必要があります。指定方法には、以下の２つの選択肢があります。
- 自動設定：最小列幅を「自動」で設定することで、画面サイズに応じてカラムが調整されます。
- 手動設定：カラム数を「手動」で指定することも可能です。手動で設定することで、より細かい調整が可能となります。
次に、グリッドブロック内に配置した各ブロックのサイズ（列のスパンや行のスパン）を調整します。これにより、柔軟なレイアウトを実現できます。
参考リソース
詳細な使い方や設定方法については、以下の公式ドキュメントを参考にしてください。
グリッドブロックの活用例
画像の配置に関連するよくある質問のひとつに「３つの画像をきれいに配置したい」というものがあります。この質問に対する解決策として、私の提案は「グリッドブロック内にカバーブロックを配置する」という方法です。
カバーブロックを使用すると、画像を背景画像（background-image）として設定できるため、HTML要素にフィットするよう画像が自動的に調整されます。また、カバーブロック内に段落やボタンなどのブロックを配置することも可能です。
以下の例では、グリッドブロック内に３つのカバーブロックを配置し、各カバーブロック内にボタンブロックを追加しています。
ブロックを以下のように設定することで、見た目に美しく、機能的なレイアウトが完成します。特に、異なるサイズの画像を使う場合でも、それぞれの要素が整然と並ぶようになります。
- グリッドブロック
- ［設定］＞［レイアウト］＞［手動］＞［カラム］＞2
- 左側のカバーブロック
- ［スタイル］＞［サイズ］＞［列のスパン］＞2、［最小の高さ］ ＞400px
- 右側のカバーブロック
- ［スタイル］＞［サイズ］＞［最小の高さ］＞200px
- カバーブロック
- ［ツールバー］＞［コンテンツ位置］＞中央下
- ボタンブロック
- ［設定］＞［レイアウト］＞［配置］＞中央揃え
参考記事
その他の例ついては、以下の記事もご覧ください。VK Blocks がインストールされていると、グループブロック（縦積み）全体にリンクを設定することができるそうです。
まとめ
WordPress 6.6で新たに追加されたグリッドブロックは、複雑なレイアウトを簡単に作成できる強力なツールです。グリッドブロックのカラムや、グリッドブロック内に配置したブロックのサイズ（列や行のスパン）の調整を行うことで、自由自在なデザインが可能になり、特に画像の配置や要素の整理が必要な場面でその力を発揮します。この記事で紹介したような使い方を参考に、グリッドブロックを活用してみてください。
