TOP

【WordPress】ブロックエディタで画面端まで広がる画像とテキストのカラムレイアウトの作り方

【WordPress】ブロックエディタで画面端まで広がる画像とテキストのカラムレイアウトの作り方

下のような画像とテキストの2カラムのコンテンツで、画像が画面端まで、テキストは固定幅(もしくはコンテンツインナーの幅)になっているようなレイアウトをブロック再現してみようと思います。

こういうやつです(参考:https://www.enpay.co.jp/service/top

実装方法

①カラムブロックを 50/50 で配置し、画像とテキストをそれぞれのカラムに入力します

②テキストはグループブロックでラップしておきます。

③カラムブロックの幅を「全幅」にします。

④テキストをラップしたグループブロックにテキストの最大幅を設定し、配置を左寄せにします。

⑤カラムブロックの横方向のブロックの間隔を「なし」(0)にします。

⑥テキストをラップしたグループブロックの水平方向のパディングを設定します。(コンテンツ幅と揃うようにするときれいかも)

以上の操作をすることで、以下のようなレイアウトが完成です。(上記の手順はどの順番で操作しても問題ありません)

⑤〜⑥でカラムブロックの間隔を0にして、テキストのグループにパディングを設定しているのは、モバイルで縦積みになったときに画面端にテキストがくっついてしまうのを防止するためです。

まとめ

以前、案件で対応したときにがっつりCSSを書いて対応したのですが、今ならブロックだけでできるのでは?と思いついてやってみました。
コーポレートサイトなどでよく見かけるレイアウトなので使い道はありそうかなと思います。

余白や間隔の値や付け方はテーマによって異なるので、同じようにできないテーマもあることは注意が必要です。
(この記事での手順の画面はTwenty Twenty-Fourのものを使用しています)