画像を大きくしたり、小さくしたり してみよう！

写真を記事に直接貼ったり、複数貼ったりできるようになった人も増えてきたと思います。
今回は、画像の大きさを変えるおまじない（タグ）の使い方です。


例えばこんな写真があるとします。

写真のサイズは３２０(横）×２４０（縦）ドットです。
gooBLOGの標準サイズですね。


注意この後の記事中に"＜","＞"が登場しますが、全て半角"<>"です。

■ステップ１：　こんなことができるようになります！

①この写真を小さくしたり

写真のサイズは１６０(幅）×２４０（高さ）画素数です。

②この写真を大きくしたり

写真のサイズは６４０(幅）×４８０（高さ）画素数です。

できるようになります。


■ステップ２：　どうやったらできるのかな？

使うおまじない（タグ）は、width="幅の画素数"です。

これまでに、あなたのブログにもたくさんの写真をのせてみよう！　で写真の貼り方は習得できたと思います。
このとき、gooBLOGの記事編集のIMGボタンを使うと、次のような文字の塊ができたと思います。
＜a＞＜img src="http://×××.×××.jpg"＞＜/a＞
＃この中で本当に必要な塊は
＜img src="http://×××.×××.jpg"＞です。
＜a＞　　　　＜/a＞は、リンクのために必要なおまじない（タグ）で、不要です。
coco様、はじめま略様　教えて頂きありがとうございます。 -2004/9/28 追記



この文字の固まりの途中に例えばwidth="160"を追加すれば、大きさが変わるんです。



このようにします。
＜img src="http://×××.×××.jpg" width="160"＞
ここで、width="160"の意味は、画像の横幅の画素数を160に指定するです。
このとき、画素数は必ず数字（半角）で書きます。

■ステップ３：　実際にやってみましょう

元画像は、
＜img src="https://blogimg.goo.ne.jp/user_image/52/92/05458dedf78fd5ff94c5e0c3264323e2.jpg"＞
です。


①この写真を小さくするには
＜img src="https://blogimg.goo.ne.jp/user_image/52/92/05458dedf78fd5ff94c5e0c3264323e2.jpg" width="160"＞とすれば、

というように、幅が３２０→１６０画素のように半分になります。高さも自動的に２４０→１２０画素（半分）になります。

②この写真を大きくするには
＜img src="https://blogimg.goo.ne.jp/user_image/52/92/05458dedf78fd5ff94c5e0c3264323e2.jpg" width="640"＞とすれば、

というように、幅が３２０→６４０画素のように２倍になります。高さも自動的に２４０→４８０画素（２倍）になります。

どうです。好きなように大きさが変えられるでしょう。
でも、元画像よりも大きくする場合には、荒くなるので気をつけましょう。



■ステップ４：　応用編１　高さで大きさ変えてみよう！
widthの意味は幅ですよね。
では、高さは？

英語でheightですよね。
これまで、幅で大きさを変えて来ましたが、高さでも大きさを変えることができるんです。
おまじないは、height="高さの画素数(半角)"です。

早速やってみましょう。

①この写真を小さくするには
＜img src="https://blogimg.goo.ne.jp/user_image/52/92/05458dedf78fd5ff94c5e0c3264323e2.jpg" height="120"＞とすれば、

というように、高さが２４０→１２０画素のように半分になります。幅も自動的に３２０→１６０画素（半分）になります。

②この写真を大きくするには
＜img src="https://blogimg.goo.ne.jp/user_image/52/92/05458dedf78fd5ff94c5e0c3264323e2.jpg" height="480"＞とすれば、

というように、高さが２４０→４８０画素のように２倍になります。幅も自動的に３２０→６４０画素（２倍）になります。

このように幅でも高さでも大きさを変えることが自由に出来ます。
そして、幅か高さのどちらか一方を指定すれば、もう片方も同じ比で変わります。


■ステップ５：　応用編２　幅と高さで大きさ変えてみよう！

では、幅と高さを元画像と違う比にしたらどうなるのでしょうか？
例えば、
width="320" height="120"というように指定してみます。
すなわち、
＜img src="https://blogimg.goo.ne.jp/user_image/52/92/05458dedf78fd5ff94c5e0c3264323e2.jpg" width="320" height="120"＞


高さが縮んで、横長くなりました。
逆にこんなふうに、縦長にすることができます。

width="160" height="120"


どうです。この方法を使えば、大きさを好きに変えて、レイアウトできます。
試してみてください。

この方法を使って書いた記事を
元画像の大きさを変えた写真を活用したブログ集で紹介していきます。
活用した例を教えて下さいね。



なお、私が大きさを変えられるようになったのは、むっしゅ様の
○【タグ講座】画像表示　＜img＞　　Oui! monsieur!　～むっしゅの戯言～　　-2004/9/7
のお陰です。他にも関連した記事があるのでお奨めです！



みなさんも、いろいろ試してみて下さい。



今の私のブログランキングは、ここ(人気blogランキング）をクリックして見てね。