WordPressカラムブロックをスマホで２列にしたい

2025.03.27

WordPressのブロックエディタでコンテンツを２列や３列など横並びにしたいときに使う「カラム」
最大６列まで数字を選ぶだけでflexが設定され横並びにできてとても便利ですね

スマートフォン（781px以下）では何列のカラムでもすべて１列になるというのがデフォルトのようです
しかしコンテンツによっては１列だと大きいし縦長になるので２列にしたい、ということも結構あります

デベロッパーツールでページのソースを確認すると、親のflexボックスにこのようなcssが入っています↓↓↓

@media (max-width: 781px){
    .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column {
        flex-basis: 100% !important;
    }
}

flex-basis…flexアイテムの大きさを指定するプロパティ

なのでまずWordpressの編集画面で、スマホで２列にしたいカラムにclassを設定します
（右側パネルの「高度な設定」から）
ここではclassを「sp2」とします

そしてそのclassを付けたカラムだけflex-basisを変更するようcssを追加します

/*カラムブロックをスマホで２カラムにする*/
@media (max-width: 781px){
   .wp-block-columns.sp2:not(.is-not-stacked-on-mobile)>.wp-block-column {
                 flex-basis: 45% !important;　/*数字は幅を見ながら調整*/
    }
  .wp-block-columns.sp2::after{
		 content: "";
		 width: 45%;
		 height: 0;
	 }
}

これで、例えば６個のアイテムをデスクトップでは３列、スマホでは２列…と横並びにすることができます
※下の::afterはアイテムが奇数だったとき最後の１つを左に寄せるため

コメント