WordPress カラムのブレークポイント（782px）とテーマのブレイクポイント（ 768px）のズレを調整する

  • WordPress
  • Gutenberg
  • SCSS
  • Sass
  • CSS
  • レスポンシブ

自作テーマで 768px 前後 を境にレイアウトを切り替えている一方、ブロックエディタの カラム（columns） はコア CSS が 782px / 781px 付近を境にしている、という組み合わせは珍しくありません。この記事では、その すき間（だいたい 768〜781px） で起きることと、本文まわりだけ コアを上書きするやり方を整理します。

前提は次のようなイメージです（数値は一例）。

  • テーマ: 767px 以下 を狭い画面、768px 以上でリキッドや余白の切り替え
  • コア: min-width: 782px あたりで flex-wrap: nowrap、max-width: 781px で子カラムに flex-basis: 100% !important（モバイル向けの縦積み）

公式のブレークポイントは Gutenberg のスタイル定義に依存します。コア側の意図は Columns block のスタイル（Gutenberg リポジトリ） の break-medium 周辺を参照すると把握しやすいです。

何が起きるか

768〜781px のビューポートでは、たとえば次の両方が成立し得ます。

  • テーマ上はすでに「広い画面」用のインナー幅やタイポの切り替えに入っている
  • コアのカラムはまだ 折り返し可 かつ flex-basis: 100% !important が効いていて、意図した横並び・列幅にならない

サイト全体のブレークポイントを 782px に寄せる 選択もありますが、既に 768 / 767 で設計が固まっている 場合は、カラム周りだけ 寄せた方が影響範囲が小さいことが多いです。

方針: 本文ラッパーにスコープする

フロントでは the_content() の出力を包むクラス（例: .p-content）の内側だけ、コアのメディアクエリを打ち消します。ヘッダーやウィジェット全域には広げないのが安全です。

1. 782px より前から横並びにする

コアより手前の幅から flex-wrap: nowrap を当てます（テーマの「768 以上」を合わせるなら min-width: 768px）。

@media screen and (min-width: 768px) {
  .p-content .wp-block-columns {
    flex-wrap: nowrap !important;
  }
}

!important はコア側も使うため、上書きには付けた方が確実なことが多いです。

2. flex-basis: 100% !important を忘れない

nowrap だけでは、768〜781px の間はコアの max-width: 781px 向けルールが残り、子の .wp-block-column に flex-basis: 100% !important が載ったままになることがあります。横並びにしても 各列が 100% 扱い になり、エディタで指定した列幅が効きません。

インラインの style="flex-basis:55%" は、通常の詳細度では !important に勝てない ため、同じ割合をテーマ側でも !important で明示する必要があります。

flex-basis: auto !important は危険

「とりあえず 100% を消す」ために flex-basis: auto !important を [style*="flex-basis"] 全列に当てると、インラインの 55% なども潰れて 意図しない幅になります（開発者ツールで element.style が打ち消され、auto が勝っている状態になる）。

整数 1〜100% は Sass で生成する

列幅が パーセントの整数 であれば、属性の部分一致と @for で機械的にルールを出せます。

@media screen and (min-width: 768px) and (max-width: 781px) {
  @for $i from 1 through 100 {
    $fb-tight: "flex-basis:#{$i}%";
    $fb-space: "flex-basis: #{$i}%";

    .p-content .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column[style*="#{$fb-tight}"],
    .p-content .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column[style*="#{$fb-space}"] {
      flex-basis: $i * 1% !important;
      flex-grow: 0 !important;
    }
  }
}

次の2点はハマりどころです。

  1. flex-basis: #{$i}% !important と書かない
    Sass では } の直後の % が 剰余演算子 と解釈されることがあり、意図しない式になるため、$i * 1% のように パーセント単位の数値 にするのが安全です。

  2. 属性セレクタ内の :
    環境によってはパーサが誤解するので、比較文字列は 変数に切り出してから [style*="#{$fb-tight}"] のように書くと安定します。

等分カラムなど インラインに flex-basis が無い列 は、コアの 782px 以上側の考え方に寄せて flex-basis: 0 + flex-grow: 1 を min-width: 768px のメディアで別セレクタに分ける、という分担にするとよいです（:not([style*="flex-basis"]) など）。

3. 小数パーセントは「プリセットだけ」手書きする

33.33% / 66.66% / 66.67% のような、コアのバリエーションでよく出る値は、部分一致用のセレクタを別ルールで足す形が現実的です。ここを「小数第2位まで一般対応」と誤解しないことが大切で、任意の小数（例: 55.12%）までは CSS だけでは列挙しきれない 場合があります。

782px 以上はどうするか

max-width: 781px で区切った上書きにしておけば、782px 以上 はコアの既定に任せ、テーマの上書きは すき間の帯だけ に限定できます。

動作確認とビルド

  • ブラウザの開発者ツールで、該当幅帯のとき flex-basis: ○○% !important がテーマ由来で有効になり、コアの 100% !important が打ち消されているか確認する
  • SCSS を直したら メイン CSS の再コンパイル と、ブラウザの ハードリロード を忘れない

エディタ側

フロントだけ直すと、ブロックエディタのプレビュー はコアの 782px 基準のままズレることがあります。プレビューまで揃えるなら、エディタ用スタイルに 同趣旨のルール を載せる必要があります（プロジェクトの構成に依存）。

まとめ

  • テーマの 768/767 とコアの 782/781 がずれると、狭い「タブレット幅帯」 でカラムだけ挙動が浮きやすい
  • サイト全体より .p-content など本文スコープ で flex-wrap と flex-basis の !important 対決を解くのが扱いやすい
  • flex-basis: auto !important の一括指定は、インラインの列幅を壊しやすいので避ける
  • 整数 % は @for + $i * 1%、小数は必要なプリセットだけ と割り切ると運用しやすい