このページでは他サイトを見ていて”このレイアウトデザイン、導入してみたい”と思ったデザインをブロックエディターで再現するやり方を考えてみました。
原則としてワードプレステーマ《SWELL》での再現・検証となります。それゆえ設定方法やサイドバーの設定画面等はSWELLオリジナルのものも出てきます。
利用ブロックがワードプレス標準搭載の汎用ブロックのみの場合は他社テーマでも運用可能かもしれません。ただし動作検証はしてないので保証は致しかねます。
レイアウトは原則として1カラムページを前提としてます。サイドバー等がある2カラムページではうまく表示されない場合もあります。
やり方は一例ですのでもっといい方法があるかもしれません。そのあたりは大目に見てやってください。
今回の再現レイアウトデザインはTCDの「QUALIA」というワードプレステーマのデモサイト・トップページ内にある下のレイアウトデザインです。
これをできるだけ手間をかけずにブロックエディターで表示する方法を考えてみます。
- 画像エリアとテキストリアは半々の割合幅で表示。
- 全体はフルワイド（ブラウザ幅いっぱい）表示。
- 画像エリアはテキストエリアの高さに応じて自動伸縮。（どちらも常に同じ高さ）
作成手順
| 使い勝手 | 設置レベル |
|---|---|
| かなり便利 | 作業工程・お手軽 |
＜メディアとテキスト＞ブロックを挿入します。
画像選択画面が出るので好きな方法で画像を指定します。
デフォルトでは左側に画像が挿入されます。続いて右側にテキストを入れ込んでみます。
（＜メディアとテキスト＞ブロックを選択した状態で）『配置』アイコンから「全幅」を選択します。
これでフルワイド（ブラウザ幅いっぱい）での表示に変わります。（※サイドバーなしの1カラムでないとわかりません）
また編集画面上でも表示幅が若干広がります。
テキストの背景に色を付けたいときは、＜メディアとテキスト＞ブロックを選択した状態で右サイドのブロック設定画面の『スタイル』タブ→『色』の「背景」から好きな色を指定します。
カスタマイズ
画像とテキストの位置を入れ替えたい時は、「メディアを右に（左に）表示」アイコンをクリックします。
テキストの左右（上下）に余白を持たせたい時は、（標準機能にはないようなので）独自のスタイルを付与してあげます。
サンプルでは1個の＜段落（テキスト）＞ブロックを選択した状態で、ブロック設定画面の【高度な設定】→『追加CSS』に「padding: 4em;」（上下左右に4文字分の余白）を打ち込んでみました。
その結果、左右（＆上下）に余白ができてます。
『追加CSS』に入力した独自スタイルはそのブロックのみに適用されるスタイルとなり、スタイルの管理という意味ではとてもわかりにくくなりがちです。
そのため『追加CSS』ではなくすぐ上にある『追加CSSクラス』の方に独自のクラス名を加筆して、管理画面の【外観】→【カスタマイズ】→『追加CSS』もしくは子テーマの『style.css』内に当該スタイルを加筆する方がスタイルの管理はしやすいです。
独自スタイルを追加する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》に書き込むことで他ページへの余計な干渉を防ぐことができます。
テキスト段落が複数あってなおかつすべてのブロックに共通したスタイルを付けたい場合、上記のやり方だとすべてのブロックに同じスタイルをコピー＆ペーストする必要があります。しかしながらそれは非効率であるしなにより修正が生じたい時の手間が大変です。
そこでテキスト側の余白を一括で指定できるスタイルも用意してみました。
先の「独自スタイルを追加する5つのやり方」を参考に以下のスタイルを加筆します。
.wp-block-media-text__content {
padding:4em!important;
}上の設定は「テキスト全体の上下左右に4文字分の余白を付ける」という意味です。数値を増減すれば余白も増減します。
もしも上下と左右を別々に指定したい場合は「padding:2em 4em!important;」と書き換えます。意味は「上下に2文字分の余白、左右に4文字分の余白」です。適当に数値を増減します。
ただし（上の設定だと）ページ内に＜メディアとテキスト＞ブロックが複数ある場合はそのすべてに適用されてしまうのでご注意ください。
【ワードプレス 7.0.2＆SWELL 2.17で動作検証済】
コメント