Blogger：「サムネイル表示」写真を横に並べる

Bloggerで写真(画像)をアップすると、サムネイル表示になり、
大きさは大・中・小で選択できるので、1枚だけだと便利なんですが、
横に2枚並べたい時はどうしたら？
今まで横に並べた事がなかったので、気付きませんでしたが、
〔小〕サイズなら並べられるけど、微妙にズレてしまうんですね。

写真を横に並べるだけなら、
<img src="画像URL" alt="" border="0" /><img src="画像URL" alt="" border="0" />
や、テーブルタグを使えば良いんですが、
これだと「サムネイル表示」になりません。


   　　　

これは上下共に同じ大きさに見えますが、上は見た目そのままです。
下は縮小画像で見せ、クリックすると写真が大きくなります。

こういう写真は、大きくして見なくても別に問題はないと思いますが、
他サイトさんを訪問すると「大きくした写真が見たい、この文字は何て書いてるの？」
とか、時々思う事ってありませんか？
大きくしないと、遠くの小さい建物が見えなかったりする事もありますよね。
かといって、バカデカイ写真をそのまんま載せるのも見栄えが悪い。

そこで、調べてみるとCSSで～とかはあったけど、私には難しいorz
で、私なりに解決しました。

まず、2枚並べたい画像をアップします。
すると、こんな感じに縦に表示されてしまいます。

これを横に並べるために、編集画面の「HTML」を開いて

該当のタグを見ます。

1枚目の画像の</div>を
<div class="separator" style="clear: both; text-align: center;">の後ろに置き換えます。
そして、画像と画像の間の<br />を削除します。

次に、画像と画像の間の<div class="separator" style="clear: both; text-align: center;">と
2枚目の画像の</div>を削除します。

Bloggerのテンプレートの種類によって違うと思うんですが、
私のテンプレートでは、これでもまだ縦になったままでしたのでサイズ調整します。

「height="320" width="240"」を「height="310" width="230"」に変更。

heightとwidthのサイズは、テンプレートの種類、または好みで調整してくださいね。

これで2枚の写真を横に並べて「サムネイル表示」できました。