HTML&CSS WEBデザイン WORDPRESS

【WordPress】カラムブロックのカスタマイズ方法

レスポンシブの縦並びブレイクポイントを変更する

赤いブロック
青いブロック

カラム（wp-block-columns）のクラス名をblockに設定しています。好きなブレイクポイントを設定してカラム全体にflex-direction:column;を設定するだけ縦並びに変更出来ます。レスポンシブで縦並びになった際、画像サイズを横幅いっぱいにしたい時はいimgに対して100%にします。

@media screen and (max-width:1000px){
	.block{
		flex-direction:column;
	}
  .block .wp-block-image img{
    width:100%;
  }
}

左右の余白、縦の余白を調整する

長方形赤
長方形青
長方形黄色
長方形ピンク

余白をなくす場合
カラム（wp-block-columns）のクラス名をblock2に設定しています。
カラムに対して、デォルトではgap:2emという余白が上下左右に入っています。
横の余白がcolumn-gap:2em;
縦の余白がrow-gap:2em;

.block2{
column-gap:0em!important;
row-gap:0em!important;
margin-bottom:0!important;
}

縦並びの時、上下逆順にする

左右対称にしたいカラム（wp-block-columns）にflex-direction: row-reverse;を設定します。左右対称にしたいwp-block-columns＝reverseのクラス名にしています。

ホームページ作成の時、横並びを左右反対でブロックを配置する方法になります。これだとスマホ対応時は縦並びの順番が揃います。


.reverse{
flex-direction: column-reverse; 
}

4個並びからレスポンシブで2個並びに変更

wordpressのデフォルトではスマホ対応は縦1列でしか並ばない為、2個並びで作成する時のカスタム方法です。

PC並び　↓

スマホ並び　↓

ブロック赤
ブロック赤

カラムブロックのブレイクポイントは@media (min-width: 782px)なので私は@media (max-width: 781px)でレスポンシブの設定しています。

@media (max-width: 781px)｛
.block4{
flex-wrap:wrap!important;
}
.block4 .wp-block-column{
flex-basis: 46%!important;
}
｝

-HTML&CSS, WEBデザイン, WORDPRESS