業務連絡 to dekirukana58 | ちょっとした「Webお役立ち情報」とかを主に書いてます。

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

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

画像を横方向に二枚並べて表示させる方法


もしかすると冬かもしれない

参考になるかどうか、わっからへんすけど、一応書いてみますた^^;

こんなんです(↓)。

綾瀬はるか北川景子



アメブロの「画像フォルダー」から二枚連続で、「オリジナル表示」にして投稿してみます。

01/05



綾瀬はるか
北川景子

写真が縦方向に並んじゃいました(↑)。



このコードはこんなふうになってます(↓)。
(※自分の場合、「記事の編集」で「タグ編集エディタ」を使ってます。「標準エディタ」や「新エディタ」を採用されてる方は、「HTML表示」にすると、同じコードが表示されると思います。)

<a href="http://stat.ameba.jp/user_images/20150114/16/wantan-52/ce/cc/j/o0492064013189285534.jpg"><img src="http://stat.ameba.jp/user_images/20150114/16/wantan-52/ce/cc/j/o0492064013189285534.jpg" alt="綾瀬はるか" border="0" /></a>
<a href="http://stat.ameba.jp/user_images/20150114/16/wantan-52/8b/b3/j/o0220038513189285533.jpg"><img src="http://stat.ameba.jp/user_images/20150114/16/wantan-52/8b/b3/j/o0220038513189285533.jpg" alt="北川景子" border="0" /></a>


上のコードに新たに2種類のコードを、それぞれ指定の位置に追記します。

align="top"というコードと、width="~半角数字~"の2種類です。

※1.align="top"は、複数の画像を上側に揃える時に使うコードです。
今回、二枚の画像コードの”画像URL”のすぐ後ろに追記しました。

※2.width="~半角数字~"は画像が表示される大きさ(横幅)を指定するコードです。
二枚の画像を横方向に並列に並べる場合、この二枚の画像の横幅を足したものが記事幅より少なく設定してやらないと、横に並びません。
今回2枚とも、その数字を半角数字の200にして、imgの後ろに「半角スペース」を入れて追記しました。


<a href="http://stat.ameba.jp/user_images/20150114/16/wantan-52/ce/cc/j/o0492064013189285534.jpg"><img width="200" src="http://stat.ameba.jp/user_images/20150114/16/wantan-52/ce/cc/j/o0492064013189285534.jpg"align="top" alt="綾瀬はるか" border="0" /></a><a href="http://stat.ameba.jp/user_images/20150114/16/wantan-52/8b/b3/j/o0220038513189285533.jpg"><img width="200" src="http://stat.ameba.jp/user_images/20150114/16/wantan-52/8b/b3/j/o0220038513189285533.jpg"align="top" alt="北川景子" border="0" /></a>




綾瀬はるか北川景子

※2枚の画像の間に改行タグ(br)が入ったりすると並列に並びませんので、その際は、改行タグを削除して下さい。
また、自分のように「タグ編集エディタ」の場合、改行タグが入ったのは見えなくても、改行されてる場合は、画像タグの間を詰めて、2枚の画像コードを、くっつけるようにして下さい。


こちらに、以前書いた「画像を横に並べる方法」を書いた記事があります。

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


参考になると、良いのですが・・


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


ニャン圧トレーニングが開発されました。