このページでは他サイトを見ていて”このレイアウトデザイン、導入してみたい”と思ったデザインをブロックエディターで再現するやり方をご紹介します。
ブログサイト向けというよりは主に1カラムの企業サイト（コーポレートサイト）向け”部品”の作り方になってます。
なお原則としてワードプレステーマ《SWELL》での再現・検証となります。それゆえ設定方法やサイドバーの設定画面等は《SWELL》オリジナルのものも出てきます。
利用ブロックがワードプレス標準搭載の汎用ブロックのみの場合は他社テーマでも運用可能かもしれません。ただし動作検証はしてないので保証は致しかねます。
レイアウトは1カラムページを前提としてます。それゆえサイドバー等がある2カラムページではうまく表示されない場合もあります。
やり方は一例ですのでもっといい方法があるかもしれません。そのあたりは大目に見てやってください。
今回の再現レイアウトデザインはTCDの「QUALIA」というワードプレステーマのデモサイト・トップページ内にある下のレイアウトデザインです。
これをできるだけ手間をかけずにブロックエディターで表示する方法を考えてみます。
- 画像エリアとテキストリアは半々の割合幅で表示。
- 全体はフルワイド（ブラウザ幅いっぱい）表示。
- 画像エリアはテキストエリアの高さに応じて自動伸縮。（どちらも常に同じ高さ）
ベース作成
| 使い勝手 | 設置レベル |
|---|---|
| そこそこ便利 | オリジナルファィルやコードをいじるので 作業工程・難 |
まずは＜カラム＞ブロックを置きます。
レイアウトは「50/50」を選択。
＜カラム＞ブロックを選択状態にしたまま”全幅”に変更します。これでフルワイドになります。
左側のカラムをクリック→＜画像＞ブロックを選択→表示させたい画像を指定します。
画像を配置したらそのカラム（左カラム）を選択状態にして幅に「50」単位は「%」を指定します。
（※画像をクリックしただけでは選択状態にはなりません）
簡単な親ブロックの選択方法
下のような＜リスト＞ブロックと、その背景に色をつけるべく＜グループ＞ブロックで周りを囲んだ二重ブロックがあるとします。
この時＜リスト＞ブロック全体を選択するにはリスト内を適当にクリックしてサイドバーから『親のリストブロックを選択』をクリックします。
さらに＜リスト＞ブロックを囲んでる＜グループ＞ブロックを選択するには＜グループ＞ブロックの境界線をクリックすれば＜グループ＞ブロック全体を選択状態にできます。
ただし上の画像のように境界線がはっきりしているものはクリックしやすいですが、境界線がわかりにくいブロック（点線だけなど）に関しては”クリックして選択”という方法がとりにくいです。
こういう時はツールバーを活用すると時短になります。
ツールバーを使ったやり方
たとえば＜リスト＞ブロックであればリスト内を適当にクリックしてツールバーの『親ブロックを選択』アイコンをクリックするだけで＜リスト＞ブロック全体が選択状態になります。
さらにもう1回クリックすると＜リスト＞ブロックを囲ってる＜グループ＞ブロックを一気に選択状態にできます。
親ブロックの選択が難しい時はこのやり方であれば即座に選択状態にできます。
続いて右カラムにテキストを配置します。
（サンプルでダミーテキストを入れてあります）
テキストエリア側（右カラム）の幅は指定しません。テーマによっては（残りのカラムは）自動計算にしておいた方がレイアウト崩れ防止になる場合があります。
テキストエリア側の＜カラム＞ブロックを選択状態にして色を付けます。
（色付けは任意です）
これでいったんプレビューしてみます。
フルワイドでの表示にはなりましたが、画像とテキストエリアの間に余白が残ってます。
今度はブラウザ幅を狭くしてみます。
レイアウト崩れはないですね。
次はテキスト量を増やしてみます。
しかしながら画像の高さは変わらず高さが揃いません。
スタイル調整
ということでブロックエディターだけの機能では再現は難しいようです。
そこでスタイル調整を追加してみます。
（親となる）＜カラム＞ブロックを選択状態にし、サイドバーの【高度な設定】の『追加CSSクラス』に「column2-fullwide」と追加入力します。
これでほかの＜カラム＞ブロックには影響が出ないようにします。
「column2-fullwide」というクラス名はこちらで勝手につけたものなので、変更したい場合はこのあとご紹介するCSS内のクラス名も変更したクラス名で統一する必要があります。
【カスタムCSS＆JS】の『CSS用コード』内に下のスタイルをコピー＆ペーストします。
（こちらはテーマ《SWELL》での設定画面です）
テーマによっては『追加CSS』と呼ばれる項目になってることも。要はオリジナルのCSSを追加する場所です。
そういった設定項目がない場合は子テーマを作成してそちらのstyle.cssに追記する手もあります。ただしその場合はすべてのページで下記スタイルが読み込まれることになります。
.column2-fullwide {
display: flex;
column-gap: 0!important;
}
.column2-fullwide .wp-block-column {
display: flex;
flex-direction: column;
justify-content: center;
}
.column2-fullwide .wp-block-column:not(:has(.wp-block-image)) {
padding: 2em 4em!important;
}
.column2-fullwide .wp-block-column figure {
height: 100%;
width: 100%;
}
.column2-fullwide .wp-block-column img {
height: 100%;
width: 100%;
object-fit: cover;
}
@media (max-width: 1025px) {
.column2-fullwide {
display: block;
}
}これでPCではテキスト量に応じて画像の高さが自動伸縮し、画像とテキストエリア間の余白はなしで表示されるようになります。（スマホ＆タブレットでは画像とテキストエリアは縦並びになります）
テキストとカラム間の（上下左右の）余白調整は11行目の数値を変更します。
※テーマによってはサイドバーで余白設定が可能なものもありますが、こちらの追加スタイルが優先されると思われます。
最後に画像とテキストを削除した状態でパターンに登録しておけば、幅や色などが設定済みのベース部分だけを一発で呼び出すことができます。
（追加スタイルはページごとに追加記入する必要あり）
画像とテキスト入れ替え
画像を右にテキストエリアを左に配置しても同じレイアウトでの表示になるようにしてあるので、交互に見せるやり方も可能です。
《SWELL》であれば＜カラム＞ブロックではなく＜リッチカラム＞ブロックでも同じようなことはできます。
その場合、余白はブロックエディター側の設定で指定できますが、背景色は追加スタイルでの指定になります。
なお＜リッチカラム＞ブロックでのやり方は割愛します。
［ワードプレス6.8.3＆SWELL2.15.0で動作検証済み］
コメント