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の編集のみでは、

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

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

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

以上です

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

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

HTML編集画面での、縦横比そのままでの画像サイズの変更方法

今回は、前回の記事に記載の方法等で、記事の中に画像を挿入した場合の、

挿入画像のサイズ変更の方法について、書いていきたいと思います。

もう既にご存知の方も多いかもしれないのですが、

自分あてのメモの意味も兼ねて、共有させて頂きます。

下記の画像は、記事編集画面の右の方にある画像を、ドラッグ＆ドロップで移動して挿入したものです。

HTMLの編集画面で、この画像のHTMLのソースを見ると、次のようになっています。

<p><img src="https://blogimg.goo.ne.jp/user_image/0e/b0/676c8385cd34f1ee19d013a63e46c149.jpg" alt="" border="0" /></p>

このHTMLのソースを、HTMLの編集画面で、次のように書き換えると、

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

<p><img width="20%" src="https://blogimg.goo.ne.jp/user_image/0e/b0/676c8385cd34f1ee19d013a63e46c149.jpg" alt="" border="0" /></p>

 実際にソースを変えてみたのが下の画像です。

画像が縮小されて表示されています。

上記の20%の部分の数字を変えることで、画像を任意の大きさに拡大したり

縮小したりすることが出来ます。

ちなみに、数字を50%、100%に変えた場合は、下記のようになります。

↓ width="50%"

↓ width="100%"

この方法を使う場合、縮小表示は問題ないのですが、拡大表示の場合、

画像が少し荒くなってしまいます。

ですので、拡大表示される場合には、その点、ご留意ください。

以上、少しでもお役に立てれば幸いです。

もし何かお気付きの点がございましたら、遠慮なくコメントしてくださいね。

ご意見・ご感想等、お待ちしております

HTML編集画面での、記事への画像挿入手順

前回の記事の続きです。

では、実際に、画像の挿入をしてみたいと思います。

この文章の下に画像を表示します。

この文章の上に画像を表示します。

今回は、上の青文字の文章の間に、画像を挿入してみたいと思います。

まず、前回の手順で、挿入したい画像をgooブログ内にアップロードして、

アップロードされた画像をクリックし、必要な情報をコピーします。

<img src="https://blogimg.goo.ne.jp/user_image/0e/b0/676c8385cd34f1ee19d013a63e46c149.jpg">

これが今回挿入したい画像の情報です。

さて、次に、この情報を、HTML編集画面で画像を挿入したい箇所に貼り付けます。

記事編集画面の左上がHTMLエディターになっているのを確認したら、

記事入力画面の上にあるHTMLをクリックします。

そうすれば、上記の青文字の文章の部分は次のように表示されると思います。

<p><span style="color: #0000ff;">この文章の下に画像を表示します。</span></p>

<p><span style="color: #0000ff;">この文章の上に画像を表示します。</span></p>

この真ん中に先ほどの情報を挿入します。

<p><span style="color: #0000ff;">この文章の下に画像を表示します。</span></p>

<img src="https://blogimg.goo.ne.jp/user_image/0e/b0/676c8385cd34f1ee19d013a63e46c149.jpg">

<p><span style="color: #0000ff;">この文章の上に画像を表示します。</span></p>

 すると、下のように表示されると思います。

☆☆☆

この文章の下に画像を表示します。

この文章の上に画像を表示します。

☆☆☆

これで画像挿入の手順は、全て完了です！！

少しでも皆さまのお役に立てる部分があれば幸いです

次回は、この画像の大きさを変える方法について、記事を書きたいと思います

gooブログ記事への画像挿入方法

フォローさせて頂いている皆さまのブログを拝見していると、何枚かの写真を、

綺麗に、記事の中に挿入されていらっしゃるのを、よく拝見します。

私は、その画像の挿入方法が分からなくて、かなりネットで右往左往しました…。

もしかしたら、同じことでお悩みの方もいらっしゃるかもしれませんので、

自分あてのメモの意味も含めて、共有させて頂きます。

☆☆☆

まず、gooブログの編集画面で、左側にある「画像フォルダ」をクリックします。

 次に「画像を選択してアップロード」をクリックして、

記事に載せたい画像を、gooブログ編集画面内にアップロードします。

その際、「画像を選択してアップロード」の上の方にある「画像サイズ」で

画像の大きさを選択することが出来るので、お好みのサイズを選択します。

アップロードされた画像は、画像フォルダ画面の中央の辺りに表示されます。

この画像をクリックすると、拡大された画像の右側に

貼付け用のタグ（オリジナル）と貼付け用のタグ（サムネイル）

という項目が表示されます。

いずれかお好きな方をコピーしてください。

オリジナルの場合は、画像を取り込む際に指定したサイズの画像、

サムネイルの場合は、最小サイズの画像を表示するタグになります。

それぞれの項目の横の<img src="https://…という表示がされている部分をコピーします。

コピーした情報を、記事のhtml編集画面の挿入したい箇所に貼り付けます。

具体的には、記事編集画面を開いた時に、右上が「HTMLエディター」になっているのを確認して、

文章入力部分の上の段の真ん中ほどにあるHTMLボタンをクリックします。

そうすれば、HTMLの編集画面が出てきますので、この画面の中で

挿入したい箇所に<img src="https://…の情報を貼り付けます。

少し長くなりますので、この部分の実際の手順は、

別の記事にて解説させて頂きたいと思います。

これで、最後に、プレビュー画面で確認すると、

自分の表示したい画像が、表示したい箇所に表示されているのが

ご確認頂けるかと思います。

これで、後は記事を投稿すれば、完了です！

☆☆☆

以上、gooブログの記事内への画像挿入の方法についてでした

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

遠慮なくご指摘くださいませ。

間違っている部分があるとか、もっと他にこういうことが知りたいとか、

もっと簡単な方法があるよ～、などなど、

どんな内容でもＯＫです。

ご意見・ご感想等、お待ちしております

この記事が、少しでも何かのお役に立てたなら、幸いです