スマートフォンでは見出しが窮屈なのに、PCでは余白が足りない。そんな画面幅ごとの調整は、ブロックテーマの設計で悩みやすいところです。WordPress 7.1以降では、サイトエディターで対応するブロックのスタイルを画面サイズ別に設定できます。今回は、設定を増やしすぎずに使いこなす方法を紹介します。
JAKSON氏の動画では、ブロックエディターでモバイルの余白や文字、画像比率を調整する様子が紹介されています。設定の操作感をつかむ参考になります。
まずは標準スタイルを基準にする
画面幅ごとの設定は、通常のスタイルを基本に、モバイルやタブレットで必要な値だけを上書きする考え方です。標準の区分はモバイルが幅480px以下、タブレットが480px超から782pxまでです。文字、色、背景、余白、寸法、レイアウトなど、対応する項目をブロック全体または個別のブロックに設定できます。
実務では、最初に通常表示を整え、次にスマートフォンで問題になる箇所だけを確認します。たとえば見出しの文字サイズやセクションの余白を小さくし、横並びの要素が窮屈ならレイアウトを調整します。すべての値を各画面幅で指定するのではなく、差が必要な部分に絞ると、後から変更する箇所を把握しやすくなります。
theme.jsonと流体設計を使い分ける
テーマ全体の区分は、theme.jsonのsettings.viewportで変更できます。たとえばモバイルを30rem、タブレットを45remにする設定が可能です。ただし、ブレークポイントは個別ブロックごとには変えられません。また、画面幅別に対応しない設定項目もあり、ブロック自体を隠す機能とは別です。意図した表示になるか、サイトエディターと実際の画面幅の両方で確認しましょう。
画面ごとの指定だけに頼らず、流体タイポグラフィや自動で折り返すグリッドを組み合わせるのも有効です。画面幅に応じて自然に変化する部分は流体設計に任せ、特定の幅で明確に切り替えたい箇所にレスポンシブ指定を使うと、設定を整理しやすくなります。
まとめ
画面幅別スタイルは、細かな調整をエディターから行える便利な機能ですが、何でも個別指定すればよいわけではありません。通常スタイルを軸に、必要な上書きだけを加え、流体設計も併用することが、見やすさと保守性を両立するコツです。
参考
WordPress 7.1 “Mary Lou”WordPress 7.1, “Mary Lou,” is here—celebrating the pioneering jazz pianist, composer, and arranger Mary Lou Williams and her spirit of rein…WordPress News
Responsive block styles and configurable viewports in WordPress 7.1WordPress 7.1 introduces responsive style states for blocks. Styles can now be defined for Tablet and Mobile viewports both through Global …Make WordPress Core
Responsive stylesResponsive styles let you give a block different settings depending on the screen size it’s viewed on. For example, you can change the font…Documentation
WordPress 7.1 Responsive Block Styles Land in Global Styles | The WP ClanWordPress 7.1 adds responsive block styles and configurable viewports to Global Styles and theme.json. Here is what shipped and how I would…The WP Clan
WordPress Responsive Styling: 6 Simple Wins, No BuilderWordPress responsive styling in 7.1 is mostly theme.json, not CSS. Six simple wins without a page builder, and where a builder still wins.Dotance- JAKSON・ブロックエディターのレスポンシブ編集動画
＼ 最新情報をチェック ／
