ちっちゃな日記――――。

ブログのお友達、tamiさんから、楽天日記での画像クリック拡大の仕方について、コメントがありましたので、記事にしたいと思います。

<IMG border=0 alt="○○○.jpg" src="http://image.space.rakuten.co.jp/d/strg/ctrl/9/838c7b5ddff5fa9990b9cdf491d9c8f585bc3286.88.2.9.2.jpeg" width=480 height=720>

上の画像は、日記をエディターのタブで開き直すと、画像の部分が上のタグになっていることがわかります。

この画像のもともとのサイズは、横が480で、縦が720です。

このまま使ってもいいですが、もうちょっとコンパクトにして、見たい人だけクリックして見るという風に変えてみます。

リンクをする場合は、

<a href="">●●●</a>

の●●●は、クリックする文字列だったり、画像だったりですが、クリックする物のタグがここへ入ります。

今回の場合は、

<a href="もと画像タグ">もと画像の縮小版タグ</a>

となります。

さらに、もと画像の縮小版タグって、どうやって作る？という問題が出てきます。

この画像の場合、横が480で、縦が720ですので、縮小しても縦と横の比のバランスは同じにします。

これが一番やっかいですね。

計算上で求められれば、それが一番手っ取り早いですが、そうも行きません。

なので、今回はMicrosoft Office Picture Managerを使ってみます。

使いたい画像を Microsoft Office Picture Managerで開き、

↓下の図のように縮小したい数字を入れてみます。

↑↑クリック拡大できます。

「新しいサイズ」が出ますので、その数字を使います。

で、完成したタグは、

<a href="http://image.space.rakuten.co.jp/d/strg/ctrl/9/838c7b5ddff5fa9990b9cdf491d9c8f585bc3286.88.2.9.2.jpeg"><IMG border=0 alt="○○○.jpg" src="http://image.space.rakuten.co.jp/d/strg/ctrl/9/838c7b5ddff5fa9990b9cdf491d9c8f585bc3286.88.2.9.2.jpeg" width=450 height=300></a>

width=450←横サイズ

height=300←縦サイズ

http://image.space.rakuten.co.jp/d/strg/ctrl/9/838c7b5ddff5fa9990b9cdf491d9c8f585bc3286.88.2.9.2.jpeg

↑画像のURLはタグ内では、２回使っています。

これで完成！

できそうですか？

他には、こんなサイトもありました。⇒画像縮小サイト