WordPress 7.1のレスポンシブ設定を徹底解説｜CSSなしでスマホ・タブレット表示を調整する方法

「スマホで見ると余白が広すぎる」「タブレットだけ文字が大きすぎる」。WordPressサイトを運営していると、パソコンでは整っているのにスマートフォンで崩れて見える、という悩みは尽きません。これまでは追加CSSにメディアクエリを書いて直すのが定番でしたが、2026年8月に公開されたWordPress 7.1から、ブロックエディタ上で「スマホ用」「タブレット用」のスタイルを直接設定できるようになりました。

結論から言うと、WordPress 7.1のレスポンシブスタイルは、余白・文字サイズ・色・枠線・寸法・レイアウトといったブロック標準の設定項目を、デスクトップ・タブレット（782px以下）・スマートフォン（480px以下）の3段階で切り替えられる機能です。既存の追加CSSを捨てる必要はなく、「ブロック単位の見た目調整はエディタで、テーマ全体の構造はCSSで」と分担するのが現実的な使い方になります。

WordPress 7.1のレスポンシブ設定で何ができる？

一言でいえば、ブロックの設定パネルにある項目を、画面サイズごとに別の値にできる機能です。対象は、WordPressの「ブロックサポート」と呼ばれる標準機能を使っているブロックで、具体的には次の項目が画面サイズごとに切り替えられます。

• タイポグラフィ（文字サイズ・行間・字間など）
• 色（文字色・背景色・リンク色）
• 背景画像
• 枠線（ボーダー）と角丸
• 寸法（最小高さ・アスペクト比など）
• 余白（パディング・マージン・ブロック間隔）
• レイアウト（横並びの折り返し、配置など）

段落・見出し・グループ・カラム・ボタン・画像といった主要なコアブロックは、ほぼこの仕組みの上に乗っています。画像・アイキャッチ画像・カバーブロックでは、デバイスごとにアスペクト比のプリセットを変えることもできます。

一方で、ブロックが独自に持っている特殊な設定項目はレスポンシブ対応の対象外です。また、プラグインが追加したブロックが標準のブロックサポートを使っていない場合も、画面サイズ別の設定は表示されません。

ブレークポイントは何pxで切り替わる？

WordPress 7.1の既定値は、モバイルが480px以下、タブレットが481px〜782px、それより大きい画面がデスクトップです。ローカルのWordPress 7.1でソースを確認したところ、wp-includes/class-wp-theme-json.php に既定値として mobile 480px・tablet 782px が定義されており、ここから次のようなメディアクエリが生成されます。

ポイントは、デスクトップが基準（既定）で、タブレット・モバイルはその上書きという「デスクトップファースト」の考え方になっていることです。何も設定しなければ、スマホでもデスクトップと同じスタイルが適用され、モバイル用の値を設定したときだけ上書きされます。

ブロックエディタでスマホ・タブレット表示を調整する手順

投稿・固定ページの編集画面での基本的な流れは次のとおりです。

1. エディタ右上の「表示」メニュー（View）にある「レスポンシブスタイル（Responsive styles）」を有効にする
2. プレビューのデバイス切り替えで「タブレット」または「モバイル」を選ぶ
3. 調整したいブロックを選択し、右側の設定パネルで余白や文字サイズなどを変更する
4. デバイスを「デスクトップ」に戻し、通常の表示が変わっていないことを確認する

ビューポートを切り替えた状態では、画面サイズ別に設定できない項目はパネルから隠れるため、「いま触っている値がスマホ専用なのか」を迷いにくい作りになっています。サイト全体に適用したい場合は、サイトエディター（ブロックテーマ）のグローバルスタイルにある状態（States）の切り替えから「ビューポート」を選ぶと、ブロックの種類ごとにタブレット・モバイル用の既定値を設定できます。

追加CSSで書いていた調整は、どこまでエディタで済むのか

私たちはこれまで、お客様のサイトのレスポンシブ調整を追加CSSで数多く実装してきました。よくある依頼を並べて、7.1のレスポンシブスタイルで置き換えられるかを整理すると次のようになります。

実感として、「このブロックだけスマホで余白を詰めたい」「この見出しだけ小さくしたい」という局所的な調整は、ほぼエディタで完結します。逆に、テーブルの横スクロール案内のように、疑似要素を使ったり、既定と違う幅（たとえば500px）で切り替えたりする調整は、これからもCSSの出番です。

スマホだけブロックを非表示にする設定との関係

「スマホではこのバナーを出さない」といったブロックの表示・非表示は、レスポンシブスタイルとは別の機能（ブロックの表示設定）として用意されています。WordPress 7.1では、この非表示の判定にもレスポンシブスタイルと同じブレークポイントが使われるようになりました。

仕組みをソースで確認すると、デバイス別の非表示は wp-block-hidden-mobile のようなクラスが付与され、メディアクエリの中で display:none が指定されるCSSによる非表示です。HTML自体が消えるわけではないため、「スマホでは読み込ませたくない重い要素」の対策にはなりません。ブロックを完全に非表示にした場合だけ、HTMLが出力されなくなります。

theme.jsonでブレークポイントを変更する方法【技術者向け】

ここからはテーマ・プラグイン開発者向けの内容です。既定の480px・782pxは、theme.json の settings.viewport で変更できます。

ソースを読んで分かった仕様上の注意点は次のとおりです。

• 使える単位は px・em・rem のみ。%やcalc()、単位なしの数値は無視され、既定値が使われる
• settings.viewport はトップレベル限定で、ブロックごとに別のブレークポイントは設定できない
• tablet の値が mobile 以下になると tablet は無視され、mobile のブレークポイントだけが使われる

スタイル側は、styles.blocks の各ブロックに @mobile・@tablet キーをネストして書きます。次の例は、グループブロックの余白をモバイルだけ小さくする指定です。

@mobile の中に :hover などの疑似状態をさらにネストすることもでき、「モバイルでホバーしたときの色」のような指定も可能です。

生成されるCSSと既存スタイルとの優先順位

個別ブロックにレスポンシブスタイルを設定すると、そのブロックには自動生成されたクラスが付与され、メディアクエリでスコープされたCSSがページに出力されます。ここで押さえておきたいのは、レイアウト以外の宣言には !important が付くという点です。ブロックのインラインスタイルを確実に上書きするための設計ですが、テーマや追加CSSで同じプロパティを指定していると、エディタ側の値が勝ちます。

これは wp-includes/block-supports/states.php が render_block フィルターでブロック出力に処理を加える仕組みなので、ブロックエディタで作ったコンテンツであれば、クラシックテーマでもブロック単位のレスポンシブスタイルは有効です。一方で、サイト全体のグローバルスタイルやブレークポイントの変更は theme.json を持つテーマが前提になります。

編集UIだけを止めたい場合は次のフィルターを使います。保存済みのレスポンシブスタイルは、無効化後も出力され続けます。

追加CSSのメディアクエリとの使い分け

違いを一言でまとめると、エディタのレスポンシブスタイルは「編集者でも扱える・ブロック単位・2段階のブレークポイント・!importantで強い」、追加CSSは「CSSが書ける人向け・セレクタも幅も自由・疑似要素やアニメーションも可能・1か所に集約できる」という関係です。

おすすめの分担は、「ページ固有の局所的な調整はエディタ、サイト全体に共通する構造やテーマの骨格はCSS」です。編集者がブロックごとに設定を重ねると、後から「なぜここだけ余白が違うのか」を追いにくくなるため、運用ルールを決めておくと安心です。

既存サイトはすぐにアップデートすべきか

レスポンシブスタイルは魅力的な機能ですが、私たちはメジャーアップデートは公開後7週間程度は様子を見る方針をとっており、自社サイトも2026年9月上旬時点ではまだ7.0系のままです（セキュリティ更新は別で、すぐに適用します）。7.1は編集画面の内部構造も変わっているため、テーマやプラグインの対応状況を確認したうえで、バックアップを取ってから更新してください。更新の手順は安全なWordPressアップデート手順にまとめています。

7.1で変わった点の全体像はWordPress 7.1の新機能解説を、クラシックエディタを使い続けている方はクラシックブロックの今後についての記事も合わせてご覧ください。

まとめ｜スマホ表示の調整はエディタとCSSの併用が現実解

WordPress 7.1のレスポンシブスタイルは、余白や文字サイズといったブロック標準の設定を、CSSなしでタブレット・スマホ別に切り替えられる機能です。既定のブレークポイントは480px・782pxで、theme.jsonから変更できます。局所的な調整はエディタで済むようになった一方、独自の幅や疑似要素を使う調整、テーマ全体の構造はこれからも追加CSSの役割です。

「スマホ表示をきれいにしたいが、どこをエディタで直し、どこをCSSで直すべきか判断できない」「テーマを7.1に合わせて整理したい」という場合は、WordPressカスタマイズ・開発サービスで対応しています。制作会社の方で、案件ごとに技術的な相談相手が欲しい場合は顧問エンジニアサービスもご検討ください。まずは無料相談からお気軽にどうぞ。