画像ブロックでギャラリーを作る
画像ブロックでギャラリーを作る
ギャラリーブロックは使うのが簡単で良いのですが、スマホだと勝手に2列になるのが難点で、画像の枚数が3枚など奇数の場合、最後の画像が勝手にデカくなって表示が崩れるんですよね。
下のような感じです。



横並びの数はCSSで制御出来るらしいんですけど、どうしても上手くいかなかったので、普通の画像ブロックでも対応出来ないか試したいと思います。
下が3つ画像ブロックをグループ化し、横並びにしてみたものです。






1枚目
2枚目
3枚目
1枚目
2枚目
3枚目
スマホの画面サイズだと勝手に2列になってしまうギャラリーと違って、3列が維持されています。
1.キャプションを中に入れる
ただ、画像ブロックはギャラリーと違い、キャプションが外に出てしまいます。それにスマホで見てる方はわかるのですが、キャプションの文が長いと改行してしまって画像の高さがズレてしまいますね。



そこで次のようなcssを書いてみました。
.wp-block-image {
position: relative;
display: inline-block;
}.wp-block-image img {
display: block;
height: auto;
}.wp-block-image figcaption.wp-element-caption {
position: absolute;
bottom: 11%;
left: 50%;
transform: translateX(-50%) translateY(50%);
color: #fff;
white-space: nowrap;
box-sizing: border-box;
margin: 0;
}
キャプションの位置を内側に入れたのと、文字を改行しないようにしています。



上手くいきました。
2レスポンシブ化する
次に、これをレスポンシブデザインにもしたいので、pcでは6列、スマホは3列の形にしたいと思います。
下はとりあえず2カラムのブロックに上の画像グループを一つずつ入れたものです。






カラム間の隙間が大きいのでなんとかしたいですね。











