gooブログでの横並びの２つの画像の上下両端揃えでの表示方法

上の画像は、記事編集画面で、右の方にある画像を

ドラッグ＆ドロップして挿入したものです。

下のラインは、綺麗に揃っていますが、

上端が揃っていなかったり、画像同士がくっついていたりするので、

上の画像をもう少し加工して、より綺麗に見せるための方法を

幾つか探してみました。

まず、左の画像と右の画像の間にスペースを作る方法についてです。

最初に、上の画像のHTMLのソースは、下記のようになっています。

<p><img src="https://blogimg.goo.ne.jp/thumbnail/0e/b0/676c8385cd34f1ee19d013a63e46c149_s.jpg" alt="" /><img src="https://blogimg.goo.ne.jp/thumbnail/5c/29/a2cf282af814929f8dc7c7279a878289_s.jpg" alt="" /></p>

このソースに次の赤字の部分を追加します。

<p><img 

style="margin-right:10px"

src="https://blogimg.goo.ne.jp/thumbnail/0e/b0/676c8385cd34f1ee19d013a63e46c149_s.jpg" alt="" /><img src="https://blogimg.goo.ne.jp/thumbnail/5c/29/a2cf282af814929f8dc7c7279a878289_s.jpg" alt="" /></p>

そうすれば、下のように表示されるようになります。

この style="margin-right:10px" の中の数字を変えることで、

スペースの幅を調整することが出来ます。

↓ style="margin-right:20px"

次に、左の画像の上端と右の画像の上端を揃える方法についてです。

上のソースに、下記の赤字の部分を更に追加します。

ちなみに、画像を拡大表示するようになる関係上、バランス調整のために、

少しだけですが、画像間のスペースの幅を広げています。

<p><img

style="margin-right:15px" 

height="150px" 

src="https://blogimg.goo.ne.jp/thumbnail/0e/b0/676c8385cd34f1ee19d013a63e46c149_s.jpg" alt="" />

<img

height="150px" 

src="https://blogimg.goo.ne.jp/thumbnail/5c/29/a2cf282af814929f8dc7c7279a878289_s.jpg" alt="" /></p> 

そうすれば、下のように表示されます。

こちらの場合も、height="150px" の中の数字を変えることで、

画像の大きさを調整することが出来ます。

↓ height="200px"

ちなみに、どちらの画像も拡大表示しているので、少し画像が荒くなっています。

この問題を解決するには、画像をgooブログ内に取り込む際に、

画像を縮小せずに、そのままの元々の大きさで取り込んでおいて、

HTMLの編集で画像の大きさを変える際に、縮小表示するようにすれば、

綺麗な画像のままで表示できるのではないかと思います。

ちなみに、上記の方法では、横幅までは変わっていないので、

その点が気になるところではありますが、HTMLの編集のみでは、

私の調べたところ、簡単に出来る方法としては、上述の方法が限界のようです。

もし、他に、より良い方法をご存知の方がいらっしゃれば、

ご教授頂ければ、大変、嬉しいです。

以上です

もし、記事内に、何かお気付きの点がございましたら、

遠慮なくコメントくださいませ