当ページは別サイトからの移行記事で、本来の投稿日時は2025年10月23日になります。
このページでは他サイトを見ていて”このレイアウトデザイン、導入してみたい”と思ったデザインをブロックエディターで再現するやり方を考えてみました。
原則としてワードプレステーマ《SWELL》での再現・検証となります。それゆえ設定方法やサイドバーの設定画面等はSWELLオリジナルのものも出てきます。
利用ブロックがワードプレス標準搭載の汎用ブロックのみの場合は他社テーマでも運用可能かもしれません。ただし動作検証はしてないので保証は致しかねます。
レイアウトは原則として1カラムページを前提としてます。サイドバー等がある2カラムページではうまく表示されない場合もあります。
やり方は一例ですのでもっといい方法があるかもしれません。そのあたりは大目に見てやってください。
今回の再現レイアウトデザインはTCDの「QUALIA」というワードプレステーマのデモサイト・トップページ内にある下のレイアウトデザインです。
これをできるだけ手間をかけずにブロックエディターで表示する方法を考えてみます。
- 画像エリアとテキストリアは半々の割合幅で表示。
- 全体はフルワイド（ブラウザ幅いっぱい）表示。
- 画像エリアはテキストエリアの高さに応じて自動伸縮。（どちらも常に同じ高さ）
＜メディアとテキスト＞ブロックを使えばもっと簡単に構築できることに気づきました。改訂版をアップしたのでそちらをご覧ください。
なお筆者自身の勉強用にこのページは残しておきます。
ベース作成
| 使い勝手 | 設置レベル |
|---|---|
| そこそこ便利 | オリジナルファィルやコードをいじるので 作業工程・難 |
まずは＜カラム＞ブロックを置きます。レイアウトは「50/50」を選択。
＜カラム＞ブロックを選択状態にしたまま”全幅”に変更します。これでフルワイドになります。
左側のカラムをクリック→＜画像＞ブロックを選択→表示させたい画像を指定します。
画像を配置したらそのカラム（左カラム）を選択状態にして幅に「50」単位は「%」を指定します。
（※画像をクリックしただけでは選択状態にはなりません）
簡単な親ブロックの選択方法
下のような＜リスト＞ブロックと、その背景に色をつけるべく＜グループ＞ブロックで周りを囲んだ二重ブロックがあるとします。
この時＜リスト＞ブロック全体を選択するにはリスト内を適当にクリックしてサイドバーから『親のリストブロックを選択』をクリックします。
さらに＜リスト＞ブロックを囲んでる＜グループ＞ブロックを選択するには＜グループ＞ブロックの境界線をクリックすれば＜グループ＞ブロック全体を選択状態にできます。
ただし上の画像のように境界線がはっきりしているものはクリックしやすいですが、境界線がわかりにくいブロック（点線だけなど）に関しては”クリックして選択”という方法がとりにくいです。
こういう時はツールバーを活用すると時短になります。
ツールバーを使ったやり方
たとえば＜リスト＞ブロックであればリスト内を適当にクリックしてツールバーの『親ブロックを選択』アイコンをクリックするだけで＜リスト＞ブロック全体が選択状態になります。
さらにもう1回クリックすると＜リスト＞ブロックを囲ってる＜グループ＞ブロックを一気に選択状態にできます。
親ブロックの選択が難しい時はこのやり方であれば即座に選択状態にできます。
続いて右カラムにテキストを配置します。
（サンプルでダミーテキストを入れてあります）
テキストエリア側（右カラム）の幅は指定しません。テーマによっては（残りのカラムは）自動計算にしておいた方がレイアウト崩れ防止になる場合があります。
テキストエリア側の＜カラム＞ブロックを選択状態にして色を付けます。
（色付けは任意です）
これでいったんプレビューしてみます。
フルワイドでの表示にはなりましたが、画像とテキストエリアの間に余白が残ってます。
今度はブラウザ幅を狭くしてみます。レイアウト崩れはありません。
次はテキスト量を増やしてみます。しかしながら画像の高さは変わらず高さが揃いません。
スタイル調整
ということでブロックエディターだけの機能では再現は難しいようです。そこでスタイル調整を追加してみます。
（親となる）＜カラム＞ブロックを選択状態にし、サイドバーの【高度な設定】の『追加CSSクラス』に「column2-fullwide」と追加入力します。
これでほかの＜カラム＞ブロックには影響が出ないようにします。
「column2-fullwide」というクラス名はこちらで勝手につけたものなので、変更したい場合はこのあとご紹介する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;
}
}独自スタイルを追加する5つのやり方
独自スタイルを追加するには複数のやり方があります。
- 1.テーマ付属のスタイル
-
ワードプレス管理画面の＜外観＞→＜テーマファイルエディター＞で表示される編集画面（style.css）に直接加筆するやり方です。
ただしこのやり方はテーマファイル本体への書き込みになるので危険度は”高”です。コーディングに詳しい方以外は触らない方が無難です。
またテーマがアップデートされると追加した独自スタイルは消去されてしまうため再度書き込む必要もあります。いずれにしてもこのやり方は非推奨です。
- 子テーマのスタイルシート
-
子テーマが用意されてるテーマなら子テーマ内のstyle.cssに書き込むというやり方もあります。こちらは前項と同じstyle.cssですが、テーマのアップデートによって内容が消えることはありません。
もしもテーマ付属のマニュアルを見てもわからないという方はやはり触らない方が無難です。また（独自）スタイルは一文字でも書き方を間違えるとレイアウト崩れが起きたり表示されないなどの弊害が起きる可能性もあるので注意は必要です。
なおそこに加筆したスタイルは全ページに適用されます。
- 3.追加CSS
-
テーマによっては管理画面の＜外観＞→＜カスタマイズ＞を開くと《追加CSS》という項目が表示されます。そこに追加した独自スタイルはテーマのアップデートでも消えることはありません。
また追加スタイルは前項と同じく全ページに適用されるので、広範囲で利用可能な独自スタイルを追記する際に使うと便利です。
- 4.プラグイン
-
《追加CSS》機能がない（or 見つからない）テーマや独自スタイルをわかりやすく管理したいという場合は「Simple Custom CSS and JS」や「Simple Custom CSS」などの無料プラグインを使うというやり方もあります。
Code snippetsという、PHP（function.php）やCSSを子テーマなしに簡単に追加や管理ができる超便利なプラグインもあります。ただし無料版はPHPとHTMLは使えますがスクリプトやCSSなどは有料版でないと使えないという制限があるので使いどころが難しいです。価格もそれなりに高いです。
- 5.カスタムCSS＆JS
-
テーマ《SWELL》であれば《カスタムCSS＆JS》を使うやり方もあります。
通常は編集画面下部にあるのでそこの『CSS用コード』内に書き込みます。
もしも表示されない場合は右上の《縦三点リーダー（オプション）》→『設定』→『一般』タブ→「カスタムCSS & JS」のチェックがOFFになってる可能性があるのでそこをONにします。
なお《カスタムCSS＆JS》に書き込んだ追加スタイルや追加スクリプトはそのページにのみ適用されるものでほかのページは適用外になります。
そのため汎用的に使う独自スタイルであれば2.の子テーマのstyle.cssか3.の《追加CSS》に書き込んだ方が効率的です。
反対に適用したいページが少ない場合は《カスタムCSS＆JS》に書き込むことで他ページへの余計な干渉を防ぐことができます。
これでPCではテキスト量に応じて画像の高さが自動伸縮し、画像とテキストエリア間の余白はなしで表示されるようになります。（スマホ＆タブレットでは画像とテキストエリアは縦並びになります）
テキストとカラム間の（上下左右の）余白調整は11行目の数値を変更します。
※テーマによってはサイドバーで余白設定が可能なものもありますが、こちらの追加スタイルが優先されると思われます。
最後に画像とテキストを削除した状態でパターンに登録しておけば、幅や色などが設定済みのベース部分だけを一発で呼び出すことができます。
（追加スタイルはページごとに追加記入する必要あり）
画像とテキスト入れ替え
画像を右にテキストエリアを左に配置しても同じレイアウトでの表示になるようにしてあるので、交互に見せるやり方も可能です。
《SWELL》であれば＜カラム＞ブロックではなく＜リッチカラム＞ブロックでも同じようなことはできます。
その場合、余白はブロックエディター側の設定で指定できますが、背景色は追加スタイルでの指定になります。
なお＜リッチカラム＞ブロックでのやり方は割愛します。
［ワードプレス6.8.3＆SWELL2.15.0で動作検証済み］
コメント