大きい写真を貼る サンプル

大きめの写真を<img>タグだけで貼ろうと思うと、本文エリアから写真がはみ出したり、ずれたり、端が切れたりします。
これをさけるためには、<img>タグのsrc属性で指定する値をサムネイル画像（小さな画像）にして、<img>タグを<a>タグで挟んでリンク先を大きな写真にすればよいのです。

1. 大きい写真をそのまま貼った場合

●本文欄の内容（１行）
<img src="/user_image/7d/0f/d72ee05e431f864dc4cdb89db31b96ac.jpg"> <img src="/user_image/12/27/d88538ca3fb9089d77e4cd70c5a3c4bd.jpg"> [改行]

●表示される内容

（ブラウザの横幅を変更すると、分かり易いかも知れません）

2. サムネイル画像を貼った場合

●本文欄の内容（１行）
<img src="/thumbnail/7d/0f/d72ee05e431f864dc4cdb89db31b96ac_s.jpg"> <img src="/thumbnail/12/27/d88538ca3fb9089d77e4cd70c5a3c4bd_s.jpg"> [改行]

●表示される内容

3. サムネイル画像を貼りつけ、大きい写真にリンクする場合

●本文欄の内容（１行）
<a href="/user_image/7d/0f/d72ee05e431f864dc4cdb89db31b96ac.jpg"><img src="/thumbnail/7d/0f/d72ee05e431f864dc4cdb89db31b96ac_s.jpg"></a> <a href="/user_image/12/27/d88538ca3fb9089d77e4cd70c5a3c4bd.jpg"><img src="/thumbnail/12/27/d88538ca3fb9089d77e4cd70c5a3c4bd_s.jpg"></a> [改行]

●表示される内容

4. サムネイルの（リンクを意味する）枠線を消したい場合

●本文欄の内容（１行）
<a href="/user_image/7d/0f/d72ee05e431f864dc4cdb89db31b96ac.jpg"><img src="/thumbnail/7d/0f/d72ee05e431f864dc4cdb89db31b96ac_s.jpg" border="0"></a> <a href="/user_image/12/27/d88538ca3fb9089d77e4cd70c5a3c4bd.jpg"><img src="/thumbnail/12/27/d88538ca3fb9089d77e4cd70c5a3c4bd_s.jpg" border="0"></a> [改行]

●表示される内容

（個人的には、リンクしていることが明示されるので枠線は消さない方が好みなんですが、「枠線を消したい」って質問も多いようなので…）

因みに、このサンプルで出てくる "/thumbnail/xx/xx/～_s.jpg" というサムネイル画像は、このサンプルのために特別に作った画像ではなくて、gooブログの画像フォルダにアップロードしたときに自動的に作られるものです。
また、GIF形式やPNG形式の画像をアップロードした場合であっても、サムネイル画像のURLは常に "_s.jpg" で終わるJPEG形式です。

● 質問 写真の添付について - gooブログサークル
● [IMG]ボタン サンプル