WordPress│カラムブロックのブレイクポイントを変更する方法

WordPress標準のカラムブロックを、960px未満で縦積み、960px以上で横並びにします。

対象にクラスを付けるため、他のカラムやSWELLのリッチカラムには適用しません。

この例は等幅のカラム専用です。

著者

motoki

WEB制作をしているデジタルノマド
WordPressのカスタマイズが好きで、色々と自作しています。

WordPressのカスタマイズに困ったらご相談ください！

MOTOKI合同会社

カスタマイズの依頼・相談

対象のカラムブロックを設定する

親のカラムブロックを選択し、「モバイルでは縦に並べる」を有効にします。

「高度な設定 → 追加CSSクラス」に waza-breakpoint-960 を入力してください。

各カラムに設定した個別の幅は、この例では上書きされます。

30％・70％などの幅の比率を維持したい場合は、この等幅用CSSをそのまま適用しないでください。

CSSを追加する

子テーマのstyle.cssなど、サイトで管理しているCSSの末尾へ追加します。

変更前のCSSを保存し、旧記事の全カラム対象の上書きは併用しないでください。

このCSSは対象カラムの間隔もgap: 2emを指定します。

テーマなどのCSSが優先される場合もあるため、実際の間隔は公開画面の計算後スタイルで確認します。

間隔を変えたくない場合は、この指定を除くか利用中の値に合わせ、縦並びと横並びの両方で余白を確認してください。

.wp-block-columns.waza-breakpoint-960:not(.is-not-stacked-on-mobile) {
  display: flex;
  gap: 2em;
  flex-wrap: wrap !important;
}
.wp-block-columns.waza-breakpoint-960:not(.is-not-stacked-on-mobile) > .wp-block-column {
  flex-basis: 100% !important;
}
@media (min-width: 960px) {
  .wp-block-columns.waza-breakpoint-960:not(.is-not-stacked-on-mobile) {
    flex-wrap: nowrap !important;
  }
  .wp-block-columns.waza-breakpoint-960:not(.is-not-stacked-on-mobile) > .wp-block-column {
    flex-basis: 0 !important;
    flex-grow: 1;
  }
}

表示例

境界と対象外を確認する

781px・782px・959pxでは縦並び、960px・1280pxでは横並びになることを確認します。

「モバイルでは縦に並べる」を無効にしたブロックと、追加クラスのないブロックは今回のCSSの対象外です。

入れ子の見本は次の節で比較できます。

個別に幅を指定したカラムは、この等幅用CSSでは指定を維持しません。

戻すときは追加クラスと今回のCSSを外します。

自作HTMLのレイアウトはGridによるカラム例で扱っています。

公開画面の表示確認と、編集画面での保存・再編集の確認は別です。

既存の検証記録では編集画面での再保存・再編集は未検証のため、導入先でクラスとカラム構成が保存後も維持されるか確認してください。

入れ子と対象外の表示を比べる

外側だけに追加クラスを付けた例です。

内側には付けていないため、外側は960px、内側は標準カラムの782pxを境に横並びになります。

画面幅の判定なので、内側のブロックが置かれた領域の幅とは別です。

次の「対象外A・B」には追加クラスがありません。

標準カラムの動きと比較できます。

次の「横並び維持A・B」は「モバイルでは縦に並べる」を無効にしています。

追加クラスがあっても今回のCSSから除外されます。

標準カラムとリッチカラムの違いは、カラムの切り替え幅の比較で確認できます。