レスポンシブブレークポイント設定

ZenBlocks では、ブロックごとのレスポンシブ表示に使う基準幅を Site Settings > Responsive で管理します。これは WordPress の通常設定画面ではなく、ブロックエディタ内の ZenBlocks サイドパネルにあるサイト共通設定です。

結論

デフォルトでは PC / MD / TB / SP の4段階で運用されます。PC は常に有効で、MD・TB・SP は必要に応じて ON/OFF しながら、各上限幅を保存します。保存後は ページ再読み込み が必要です。

初期値

ラベル初期値
PC常に有効
MD1140px
TB840px
SP540px

開き方

  1. 任意の投稿または固定ページをブロックエディタで開く
  2. ヘッダーの ZenBlocks ボタン(共通設定ボタン)をクリック
  3. Site Settings 内の Responsive パネルを選ぶ
ヘッダーの ZenBlocks ボタン(共通設定ボタン)をクリック
ヘッダーの ZenBlocks ボタン(共通設定ボタン)をクリック
Responsive タブで各ブレークポイントを変更可能
Responsive タブで各ブレークポイントを変更可能

設定手順

  1. MD / TB / SP のうち必要なブレークポイントを有効化する
  2. 各入力欄に上限幅を px で入力する
  3. 画面下の Breakpoint Ranges で適用範囲を確認する
  4. Save を押す
  5. 保存完了モーダルが出たら、未保存の編集がないことを確認して Reload する
変更後 Save ボタンをクリックでブレークポイント変更を保存
変更後 Save ボタンをクリックでブレークポイント変更を保存

確認ポイント

  • PC は常に有効で固定になっているか
  • MD の最小値が TB より大きく保たれているか
  • TB の最大値が MD より小さく、SP より大きいか
  • 保存後にページ再読み込みまで実施できているか

注意点

  • リロード前の未保存編集は失われるため、ブロック編集中なら先に保存します
  • 幅の関係が崩れる値は入力できても、保存時にデフォルトへ補正される場合があります
  • ブレークポイントはサイト共通設定です。特定ページだけ変える用途ではありません

こんな時に見直します

タブレット幅だけ表示が崩れる

  • TB の上限値が実際のデザイン対象とずれていないか確認します
  • 必要なら MD / TB / SP の有効状態も含めて再整理します

エディタで変更したのに反映されない

  • Save 実行後に Reload していないケースが多いです
  • 他の未保存編集がある場合は先に保存してから再読み込みします

関連設定