第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)をご参照ください。


"第34回その3(画像の表示サイズを変更しよう!)中級者むけ" へのコメントを書く

お名前
メールアドレス
ホームページアドレス
コメント

※ブログオーナーが承認したコメントのみ表示されます。