PLP BLOG
ぱちランぺ ブログ

ぱちランペで画像を横に並べる

ぱちランペに掲載する画像は自動的に横幅いっぱい(800px)までリサイズされます。

画像を横並びにしたい場合には、 本文に直接htmlタグを書き込む 必要があります。

いくつか方法がありますが、ここでは2つと3つに分ける場合のそれぞれの例を一つずつご紹介いたします。


使用するタグ

画像を並列に並べるためにフレックスボックス(display:flex)というCSSのプロパティを使います。

また、 justify-content プロパティにて画像の位置を整えます。


HTMLに直接CSSを記述する必要があるので、 div style という書き出しを使います。


HTMLやCSSの詳しい話はここでは割愛いたします。
以下のタグを本文に直接コピペしていただければOKです。



2つの横並びの場合

画像横並び(2つ)


<div style="display:flex;justify-content:center;">

<div style="width:48%;margin:0 5px ;">


[ここに画像のタグ]


</div>

<div style="width:48%;margin:0 5px ;">


[ここに画像のタグ]


</div>

</div>



3つ横並びの場合

画像横並び(3つ)


<div style="display:flex;justify-content:center;">

<div style="width:30%;margin:0 5px ;">


[ここに画像のタグ]


</div>

<div style="width:30%;margin:0 5px ;">


[ここに画像のタグ]


</div>

<div style="width:30%;margin:0 5px ;">


[ここに画像のタグ]


</div>

</div>



widthで画像の大きさを調整しておりますので、例えば4つ以上の画像を並べたい場合はwidthを調整しつつ、要素の数を増やしていけば対応可能です。

ただし、モバイルでのユーザー体験を優先的に考えてページ作成をするべきなので、あまり小さな画像をいくつも並べるのは推奨いたしません。

直観的に理解できるアイコンを並べるなどして、うまくご活用ください。