画像ブロックでギャラリーを作る

画像ブロックでギャラリーを作る

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

横並びの数はCSSで制御出来るらしいんですけど、どうしても上手くいかなかったので、普通の画像ブロックでも対応出来ないか試したいと思います。

下が3つ画像ブロックをグループ化し、横並びにしてみたものです。

1カラム1枚目
2枚目
3枚目
2カラム1枚目
2枚目
3枚目

1枚目

2枚目

3枚目

1枚目

2枚目

3枚目

スマホの画面サイズだと勝手に2列になってしまうギャラリーと違って、3列が維持されています。

1.キャプションを中に入れる

ただ、画像ブロックはギャラリーと違い、キャプションが外に出てしまいます。それにスマホで見てる方はわかるのですが、キャプションの文が長いと改行してしまって画像の高さがズレてしまいますね。

普通の画像ブロックだと
キャプションは外に
出てきてしまう

そこで次のようなcssを書いてみました。

キャプションの位置を内側に入れたのと、文字を改行しないようにしています。

cssで
キャプションを
中に入れました

上手くいきました。

2レスポンシブ化する

次に、これをレスポンシブデザインにもしたいので、pcでは6列、スマホは3列の形にしたいと思います。

下はとりあえず2カラムのブロックに上の画像グループを一つずつ入れたものです。

1カラム1枚目
2枚目
3枚目
2カラム1枚目
2枚目
3枚目

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

キャプションを
中に入れました
cssで
キャプションを
中に入れました
cssで
キャプションを
中に入れました
cssで
キャプションを
中に入れました

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA