画像と画像の間に出来る隙間をなくす方法

いつもご閲覧ありがとうございます。
WEBマーケティングコンサルタント＠中野です (^O^)/

画像と画像の間に出来る数pxの隙間・・・








一枚の画像で表示させれば、OKなんですが…



解像度が高い画像になれば、表示が重くなります




そんな中、昨日更新した中野のブログ記事を見た読者の方から



スクリーンショット画像をキレイに並べて
表示させるには、どうやったら出来るのでしょうか？



というご質問を頂きました



実はコレ、ちょっとした工夫で隙間をなくす事が出来ます



ほらッ
↓↓↓

まず、「デザインの変更」→「CSS編集」画面から、下記のタグを追加します。




/*■□■画像の隙間を消すタグ■□■/*
#sukima img {
vertical-align: top;　/*←もしくはbottom:/*
display:block;
}
/*■□■画像の隙間を消すタグ■□■*/



そして、ブログ記事内に貼付けられた「imgタグ」に、id="sukima"を追加して下さい。


最後に、htmlタグの改行をなくします。

(例)

<img src="photo1.jpg" />
<img src="photo2.jpg" />
↓
<img src="photo1.jpg" /><img src="photo2.jpg" />

こうすれば、上記のような画像表示がされると思います

☆……☆……☆……☆……☆……☆……☆……☆……☆……☆……☆


記事を読んで頂き、ありがとうございます。





お帰りの際に、応援の一押しお願いします <(_ _)>
↓↓↓

↓初期費用0円、月々4,800円～ホームページを制作致します。↓