ブログ記事内に複数の画像を横一列に並べる方法 | ちょっとした「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"/>



以上、HTMLタグコードを使って、ブログ記事内に複数の画像を横一列に並べる方法をご紹介してみました。


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

自分自身、解らなかった事を、いろいろ検索で調べたりして、解ったら、このように記事として上げるようにしてます。

自分の頭の中が整理されるもので^^;




参考になれば、うれしいのですが・・o(^▽^)o