結論から言うと、WordPress 7.1のレスポンシブスタイルは、スマホやタブレットの調整を編集画面から行える便利な機能です。ただし、案件で使う前に、ブレークポイント、設定を保存する場所、既存CSSとの優先関係、公開後に誰が変更するかを決めます。これらを曖昧にしたまま使うと、見た目は直っても、次の担当者が調整箇所を見つけにくくなります。
WordPress 7.1で変わった範囲
WordPress 7.1では、コアのブロックサポートを使うブロックに対して、タブレットとモバイルのスタイルを設定できます。文字、色、背景、枠線、寸法、余白、レイアウトなどが対象です。デスクトップ専用のキーはなく、通常のスタイルが基本値となり、タブレットとモバイルで必要な項目だけを上書きします。
公式の初期値は、モバイルが480px以下、タブレットが480pxより大きく782px以下です。テーマはtheme.jsonのsettings.viewportで値を変更できます。単位や大小関係に条件があり、無効な値は使われません。制作データの想定幅とWordPress側の区切りが違う場合は、実装前にどちらを基準とするかを確認します。
設定の保存場所を一つずつ整理する
同じ余白や文字サイズでも、テーマのtheme.json、グローバルスタイル、個別ブロック、追加CSS、子テーマのCSSなど、複数の場所から指定できます。短時間で直せる場所を選ぶだけではなく、サイト全体の共通ルールなのか、そのページだけの例外なのかで保存場所を決めます。
- 全ページで共通する基本値とブレークポイントはテーマ側で管理する
- 編集者が変更してよい範囲はグローバルスタイルやブロック設定へ寄せる
- 独自コンポーネントや複雑な条件は子テーマのCSS・実装側で管理する
- 一時的な上書きには理由と対象ページを記録する
個別ブロックの設定とCSSが同じプロパティを扱うと、表示幅や読み込み順によって意図しない側が優先されることがあります。既存サイトでは、すでにメディアクエリやテーマ固有のレスポンシブ機能が入っている場合があります。新機能を追加する前に、現在のHTML、クラス、生成CSS、子テーマの指定を確認します。
デザイン支給時は幅ごとの判断を言葉にする
Illustrator、Figma、Adobe XD、画像などの支給デザインでは、PC版とスマホ版の間をどのように変化させるかが資料だけでは確定しないことがあります。二つの完成図を受け取ったら、要素の並び順、折り返し、余白、文字サイズ、画像の切り抜き、非表示要素を項目ごとに確認します。
WordPressの端末プレビューは編集時の確認に使えますが、実際のブラウザ幅、文字量、長い見出し、画像比率まで保証するものではありません。320px前後の狭い幅、標準的なスマホ、タブレット、デスクトップを実ブラウザで開き、横スクロール、単語途中の改行、一文字だけ残る行、ボタンの押しやすさを確認します。
公開後の編集権限と戻し方を決める
公開後に担当者がブロック設定を変更できる設計にする場合は、変更してよい項目と触らない項目を簡潔に残します。反対に、ブランド共通の余白や見出しサイズを固定したい場合は、編集画面で変更できる範囲を絞る判断も必要です。WordPress 7.1にはレスポンシブ編集を無効化する設定もありますが、無効化しても保存済みのレスポンシブスタイルが消えるわけではありません。
変更前の画面、対象ブロック、設定値、CSSの差分を残し、問題が出たときに戻せるようにします。大きなページを一度に変更せず、一つのパターンやセクションで確認してから展開すると、テーマやプラグインとの競合を見つけやすくなります。
制作案件での確認チェックリスト
- PC・タブレット・スマホの基準幅を共有した
- 基本値と端末別上書きの保存場所を決めた
- 既存テーマ、ブロック、追加CSSの指定を確認した
- 支給デザインの中間幅での変化を確認した
- 狭い幅、長い文章、画像比率を実ブラウザで確認した
- 公開後に変更できる担当者と項目を決めた
- 変更前状態と戻し方を記録した
GreenCodingでは、編集画面で扱いやすい範囲と、コーディング側で固定したほうが安全な範囲を分けて実装します。支給デザインとWordPress運用の両方を踏まえた実装が必要な場合は、制作会社様・デザイン事務所様向けコーディング支援をご確認ください。
最終確認日: 2026年8月26日。WordPressの機能やテーマ・プラグインの対応状況は変わるため、案件で利用するバージョンと実装環境で再確認します。