第34回その3(画像の表示サイズを変更しよう!)中級者むけ

まーさ と一緒にお勉強しましょ♪「ブログの使い方」
さて、いよいよ画像の表示サイズの変更よ。

複数の画像を掲載する方法(初心者むけ)
  → http://lesson.at.webry.info/200701/article_3.html
文字のまわりこみを防ぐ方法(中級者むけ)
  → http://lesson.at.webry.info/200701/article_4.html
画像の表示サイズの変更方法 →→このページをご覧ください。

・*:・─────────────────────────・:*・
    その3(画像の表示サイズを変更しよう!)…中級者向け
・*:・─────────────────────────・:*・


まーさ:画像の扱いに慣れてきたら、表示サイズも自分好みに変えて
    みてもいいかもね。

 Q :サイズは、どうしたら変更できますか?

まーさ:<img>タグの、幅と高さ(width/height)を指定するか、
    画像を縮小してアップロードしなおすことで
    サイズを変えることができるわよ。

 Q :幅と高さを変えるって、むずかしくないですか?

まーさ:そんなことはないわよ。
    じゃあ、画像を貼り付けた後のタグを見てみましょう。
<a href="https://userdisk.webry.biglobe.ne.jp/004/955/38/1/blog1.jpg" target="_blank"><img src="https://userdisk.webry.biglobe.ne.jp/004/955/38/1/blog1.jpg" width="320" height="240" align="left" class="up-image" alt="画像" title="画像を等倍で表示します" /></a>

    この中の「width="320" height="240"」が表示のサイズなの。
    
    これを目安にして、たとえば「width="200" height="160"」など
    縦横の比率を変えないように注意して変更してみてね。
<a href="https://userdisk.webry.biglobe.ne.jp/004/955/38/1/blog1.jpg" target="_blank"><img src="https://userdisk.webry.biglobe.ne.jp/004/955/38/1/blog1.jpg" width="200" height="140" align="left" class="up-image" alt="画像" title="画像を等倍で表示します" /></a>

画像


    「width="450" height="360"」の場合、
画像


    ただし、縦横の比率が変わると、写真の印象がかなり変わっちゃうので
    気をつけて。例えば、「width="450" height="100"」にしてしまうと、
    こんなふうになっちゃう。
画像


    もうひとつ注意してほしいのは、ブログ記事が表示される場所の幅。
    あなたが使っているのは、2カラムのデザインかしら?
    それとも、3カラム?

 Q :3カラムのデザインです。

まーさ:そう、2カラムと3カラムでは、記事幅が違うので、気をつけてね。

    【2カラム】の場合は、記事幅は500ピクセル。
    【3カラム】の場合は、記事幅は440ピクセル。

    特に、複数の画像を並べて配置するときは、
    範囲内におさまるように考慮しながら、上手に配置してね。




本「ブログの使い方」でとりあげてもらいたいテーマなどが
ありましたら、このブログにトラックバックもしくはコメントしてくださいね。
みなさまのご意見お待ちしております。

※個別のお問い合わせについては、
  よくある質問と答え(FAQ)をご参照ください。


ブログ気持玉

クリックして気持ちを伝えよう!

ログインしてクリックすれば、自分のブログへのリンクが付きます。

→ログインへ

なるほど(納得、参考になった、ヘー)
驚いた
面白い
ナイス
ガッツ(がんばれ!)
かわいい

気持玉数 : 12

なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー)
面白い
ナイス

この記事へのコメント

2007年01月28日 11:04
画像を横に並べるにはどうするの・・?
誰か教えて~・・**!!
2007年02月20日 12:19
「テーマ」って10までしか表示できないんですねえ。1年半も続けてると完結したテーマをそのままにせて別テーマを立ち上げたくなるもんなんですが、もっと表示数を増やせませんか。
2007年05月02日 12:09
写真サイズの変更、大変良く解りました。
有難うございました。
2010年12月23日 17:39
先ほど問い合わせしましたことですが、さっぱりわかりません、申し訳ありませんがもう一度お願いします。問い合わせは、写真のサムネールどうしたらいいかですが、どの項目で問い合わせたかも忘れてしまいました
2011年02月18日 20:01
スタッフの皆様、ご指導ありがとうございました。
2013年04月02日 15:20
個々の写真の大きさを変えるのは理解できましたが、本文中に貼り付ける複数の全ての写真の大きさを一定の大きさにしたいのですが、その方法が分かりません
教えてください。
2013年04月02日 15:22
個々の写真大きさを変えるのは理解できましたが、
本文に貼り付ける写真全てをある程度の大きさに変えるのにはどうしたらいいですか??
2016年07月26日 11:28
文字、画像をスクロールする方法を教えてください

この記事へのトラックバック