アメブロに複数の画像を横、並列に並べるには | ちょっとした「Webお役立ち情報」とかを主に書いてます。

ちょっとした「Webお役立ち情報」とかを主に書いてます。

ネットで調べて、「わかったこと」を備忘録の代わりのメモ帳のようにして使ってます。

こんばんワ。

晩秋の富士:河口湖より

アメブロでは連続して画像を投稿すると
通常は縦に並びます。

これを横に並べる方法を御案内してみます。

アメブロに複数の画像を横、並列に並べる方法

以前ご案内したこちらの方法を使います。

アメブロで画像を横に並べるには

こんな感じで上に大きめの画像を一枚、
その下に小さい画像を横に3枚並べて
みました。



HTMLタグはこちらになります(↓)。

<div align="center"><img width="600" src="画像URL①"align="top"><img width="180" src="画像URL②"align="top"><img width="180" src="画像URL③"align="top"><img width="180" src="画像URL④"align="top"></div>


*いちばん上に表示させる画像の横幅
を600PX(ピクセル)(*このブログ
の記事幅は600PXです。)
にして、
下の3枚の画像の横幅はそれぞれ180PXに
しました。
(*どうしても実際の表示では画像の間に
スペースが入ってしまい200PXにすると
下の右端の画像が一段下がって表示されて
しまいました。)



こんなタグを使って画像を横に並べるのも、
何かを説明する時に便利かな~と思います。

ちなみに上の画像の鳥はオオルリ です。
綺麗ですね^^;

アメブロで画像を横に並べるには


☆ブィブィ  ('-^*)/

ねぇ、ちょっと、チョットってばぁ~~!!