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

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

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


テーマ:
おはようございます。

以前、書いた記事、ちょっと解りにくいかな~と思ったので、少し修正してみました^^;

こんな感じものを設置する方法です。(↓)



ブログ記事内に複数の画像を横一列に並べる方法


下の画像の元のサイズは横:500px;縦:363pxのものです。

Simplog

自分のこのブログの記事幅は現在(2014/01/20)600px(ピクセル)ぐらいです。(左右の余白分が正確にどの位なのか、よく解らないもので・・)

同じ画像を三回、横幅を、それぞれ100px;200px;250px;に指定して、並べてみました。

SimplogSimplogSimplog

画像と画像の間に勝手に隙間が入っちゃいましたが、横一列に表示する事が出来ました。

三番目(右端の横幅を300pxにしたら、段がずれて、このようになってしまいました。

SimplogSimplogSimplog

複数の画像の幅の合計が、その表示させる記事の幅より少なく設定してやれば綺麗に横に並ぶ事が解りました。


タグコードは、このようになります。

<img width="100" src="画像URL"><img width="200" src="画像URL"><img width="250" src="画像URL">


こんどは、三種類の別々の画像URLを、それぞれ入れてみました。


Simplog450x349580x

タグ(山括弧<><>)の間に隙間(スペース)を入れないようにして横に並べれば、記事幅の範囲内で横に並ばせることが出来ますね。

で、上の場合、特に指定してないですが、下端にそろって並びました。

上端に揃える場合はalign="top"を、画像の中心を基準に並べる場合はalign="middle"をそれぞれのタグに入れて下さい。

試しにalign="top"(上端に揃える)を、上の三個のタグにそれぞれ入れてみました。

Simplog450x349580x


タグコードは、このようになります。

<img width="100" src="画像URL"align="top"><img width="200" src="画像URL"align="top"><img width="250" src="画像URL"align="top">



例えば一枚の横幅を100pxにして、5枚並べる場合は、下のタグの画像URLの箇所に、お好みの五つの画像URLを挿入して下さい。

<img width="100" src="画像URL①"align="top"><img width="100" src="画像URL②"align="top"><img width="100" src="画像URL③"align="top"><img width="100" src="画像URL④"align="top"><img width="100" src="画像URL⑤"align="top">



こんな感じになります。


(※上の場合は、画像リンクにしてます。)

拙い説明でご理解いただけましたでしょうか・・??


かえって、解りにくかったりして(汗)。

ワンタンさんをフォロー

ブログの更新情報が受け取れて、アクセスが簡単になります

Ameba人気のブログ