画像を2つ横に並べて表示する

ブログ育成

画像を2つ横に並べて表示する方法をご紹介します。

方法自体は簡単なのですが、使用頻度が多くないのでうっかり忘れがちです。

もものすけ
もものすけ

同じ間違いを繰り返さないために、ついやってしまいがちな方法も含めて、メモを残しました


ADVERTISEMENT

方法1:ブロックのカラムを使う(不採用)


ブロックのカラムを使う方法です。

PC・タブレットでは2つ横に並んでくれるので問題ありません。

しかし、スマホでは縦になってしまっています。

・PC・タブレットの場合


・スマホの場合



そのため、この方法は不採用としました。

方法2:ブロックのギャラリーを使う(採用)


ブロックのギャラリーを使うと、PC・タブレット、スマホのすべてで横に並んで表示されます。

また、画面右側「ギャラリー設定」の「カラム」欄で、数字を1-8に変えることにより、横に並ぶ画像の数を変更することができます。


ギャラリーのカラムを2にした場合


カラムが2の場合の見え方は、PC・タブレットとスマホで相違はありません。

・PC・タブレット


・スマホ


ギャラリーのカラムを3にした場合


カラムが3以上になると、見え方は次のように変わってきます。

見え方を統一させるのであれば、カラムは2までにしておいた方が良さそうです。

・PC・タブレット


・スマホ



ギャラリーのカラムを8(最大)にした場合


・PC・タブレット


・スマホ


さいごに


このように操作自体はとても簡単なのですが、その分、細かい設定を忘れがちな機能です。

もものすけ
もものすけ

メモに残せたので安心です!


タイトルとURLをコピーしました