GeneretePressを使うなら、同じ開発チームによるGenerateBlocksは必ず併用したいプラグインです。GeneratePressとのマッチングが最高であるのは言うまでもありませんが、WordPress標準のGutenbergブロックよりもはるかに自由度の高いレイアウトが可能です。しかも、CSSの出力が最低限になるように開発されており、サイトが重たくなることはほとんどありません。
GenerateBlocks – WordPress plugin | WordPress.org
今日は、当サイトのカテゴリー面でタイトル下に表示しているカテゴリータイトル部分の部品を、GenerateBlocksで作ってみたいと思います。
この部品は、GeneratePressのhook機能を使ってテンプレートに挿入しています。このhookについては別の記事で解説するとして、今日はこのタイトルをブロックエディタでどのように作っているかに焦点を当て、GenerateBlocksにおけるレイアウトの基礎を学んでいきます。
こちらの画像は、当サイトを表示して、ブロックの要素がわかりやすいように各要素に赤枠を付けたものです。今日はヘッダバーの下にある「GeneratePressの基礎」と書かれたブロックを作っていきます。
前提として、サイトバーはなし、コンテンツコンテナは全幅にします。
セクション（Containerブロック）
まずはGenerateBlocksのContainerブロックで、「セクション（Section）」要素による全幅の枠を作ります。このブロックのプロパティ（右ペイン）を見てください。
右ペインで設定があるプロパティには、オレンジのドットが表示されています。このドットがないものに、設定はありません。
ここでは、Spacing（間隔）とBackground（背景）をこのセクションブロックに設定します。
Spacingは上下にPadding（内側の余白）を付けています。
またバックグラウンドには真っ白な背景を指定しています。もし、グレーにしたければここで背景をグレーに設定すればいい、というわけです。
セクションの背景を変えることでページにリズムを出すことは、とてもよく使われる手法です。
グリッド（Gridブロック）
セクションの中には、GeneratePressテーマで設定しているコンテナの幅でGridブロック（div要素）を設定し、グリッドレイアウトを設定します。そしてそのグリッドの中に他の要素を配置していきます。
このグリッドレイアウトの設定が、今回の記事の焦点であるGenerateBlocksにおけるレイアウトで、核となる部分です。
こちらの画面、右ペインにLayout設定のパネルがあります。この中の「Grid Template Columns」には以下のコードが書いてあります。
1fr 1frこれはグリッドレイアウトの最も基本的な事例で、利用可能なスペースを2等分する、という意味になります。
このfrは、長さの単位ではなく「利用可能なスペースを分割するための比率」を表す、特殊な単位です。
frの意味
fr= fraction（割合）の略- グリッドコンテナの中で 余ったスペースを何等分するかを指定する単位です
- 例えば
1fr 1frと書いた場合、余白を2等分して、それぞれの列に均等に割り当てます - 各列は同じ幅になります
- 画面幅が変わっても、両方の列が常に均等に広がります
他の単位との違い
| 単位 | 意味 | 例 |
|---|---|---|
px | 絶対的なピクセル数 | 200px → 常に200px |
% | 親要素に対する割合 | 50% → 親幅の半分 |
fr | 余白の比率 | 1fr 2fr → 余白を3等分し、1列目に1、2列目に2の割合で割り当て |
frのポイント
frは「残りのスペース」に対して働くので、pxやautoと組み合わせると柔軟なレイアウトが可能になります。- 例えば
200px 1fr 2frとすると、最初の列は固定200px、残りのスペースを3等分して2列目に1、3列目に2の割合で割り当てます。
グリッドをコンテナ幅に設定
このGridブロックには、GeneratePressテーマで設定しているコンテナの幅を設定し、中央寄せになるように設定します。
GridブロックのSizing（大きさ）プロパティで、MAX WIDTHを「地球アイコン」に指定すると、自動的にGeneratePressのCSS変数「var(–gb-container-width)」が設定されます。そしてmargin（外側の余白）を左右ともautoに設定することで画面の中央に配置され、テーマの他のページと幅がぴったり揃います。
さらに、GeneratePressと同じように、コンテナの内側にパディングを設定します。これは一般的に、PC画面で40px、モバイル画面で30pxです。
このGeneratePressにおける内側パディングの考え方については、別に記事を執筆する予定です。
レスポンシブ対応
これだけで左右2分割の基本のレイアウトが完成しました。
後はモバイルのときの振る舞い、つまりレスポンシブ対応の設定を追加していきます。GenerateBlocksにおけるレスポンシブ対応の考え方についても、別記事で解説する予定です。
まとめ
今回は、GeneratePressとGenerateBlocksを組み合わせるときの、レイアウトの基礎（考え方）を学びました。
- Section要素で背景と上下の余白を設定する
- Sectionの中にGridを設定する
- Grid設定に簡単なCSSを記述するだけで基本のレイアウトが完成する
- Gridにテーマと同じ幅と余白を設定して、縦のラインをそろえる
また、ここまででわかるように、GenerateBlocksはCSSのプロパティをGUIで設定できる、というタイプのツールです。ですから、CSSの基礎知識がないとうまく使いこなせないことになります。
今回扱ったCSSグリッドについては、いろいろなチュートリアルがネット上にありますので、興味のある方は探してみてください。ここでは一つだけ紹介します。