元画像の大きさを変えた写真を活用したブログ集

ここでは、width　や　heightを使って写真の大きさを変えたブログの例を紹介していきます。



○なせば成る　トップーページ
320×240の元画像を160×120に変換して載せています。

○画像の貼り付けかた＠三輪裕子のBLOG　▼ 紅蓮の日常 ▲　紅蓮さん　-2004/9/26　
文章の廻り込みと高さ指定を使って、文章中に絵をうまくレイアウトされています。

○規定以上のサイズ＠kobou'sの雑記帳　　kobou10kenさん　-2004/9/23　
写真を長く伸ばすと．．．　アイディア勝ちですね。




随時更新していきます。

画像を大きくしたり、小さくしたりしようにを読んでみてね。

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

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

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


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

写真のサイズは３２０(横）×２４０（縦）ドットです。
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ランキング）をクリックして見てね。

記事に複数の写真を活用したブログ集

このブログでは、みなさん記事を紹介しています。
どのような記事を紹介しているかというと、あなたのブログにもたくさんの写真をのせてみよう！　を読んで、元画像を載せたり、複数の写真を載せた人たちを紹介しています、。


○家具の組み立て　ニッセンの通販品　　　-2004/8/29
写真を配置して、家具の組立てを順番に紹介しています。この、記事自体も同じ作り方です。

○なせば成る＠風と友達　　風さん　　　-2004/9/20
ランタナという７変化する花について紹介されています。

○石けんサラダ＠猫のいる風景　cocoさん　　　-2004/9/21
この記事を参考に写真を掲載された例です。石鹸で何ができるか？　

○おいしい落花生ができました＠小さいことからコツコツと　ピーナッツさん　　-2004/9/22
落花生が育ってピーナッツができる様子を写真でみることができます。

○似てる？＠はっちゃけ育児日記　　　りんださん　-2004/9/23
写真を並べてみれば、似ているか似ていないか．．．一目瞭然？

○グリーンな手作りソーセージ＠猫のいる風景　cocoさん　　　-2004/9/23
手作りソーセージ（グリーン！！）の作り方を写真入で説明されています。

○やっと…！＠チハルにしてきみをおもう　　チハルさん　-2004/9/22
この記事のリンク先　お盆の旅行で、３枚の写真が貼られています。

○ヒマワリの おじぎ＠３６５日の空　　みみずさん　-2004/9/30
絵本のように写真と話が連動して、物語になっています。

○だめマスター＠スローライフスタッフ日誌　ひろたさん　-2004/8/16
ひろたさんご本人のコメント「ちなみに、わたしのテンプレートだと本文スペースの横幅が395ピクセルなので、うまく画像を作ると、本文の横幅ぴったりに写真を入れたりも出来ます。」


○ただいまＢＬＯＧ実験中です。＠みるくてぃーをひとくち　　みるくてぃーさん　-2004/10/6
ご自作の絵を並べて貼っています。ブログ初心者さんです。

○あっ！！！＠Ｍａｈａｌｏ　ｎｕｉ　ｌｏａ． 　 utaさん　-2004/10/7
かわいい”ことねちゃん”の顔が．．大変！　写真を２枚並べることでアニメのような効果が素敵です。

○はまってるの♪＠＊なないろのゆめ＊　ななママさん　-2004/11/24　”ヒーくん”のかわいい姿が．．．あらら、ママが大変だよぅ！

○和と洋の対決@かえるのちゃぶ台日記　　かえるさん　－2005/1/31
　ボリューム満点！

○和と洋の対決@チャカチャカしよう　　チャカさん　－2005/3/22
　素敵な押し花、でも残念



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