サムネイル

*** 画像をサムネイル式にする ***

今日は、サムネイルに関してのご質問があった為、
画像を小さく表示して、クリックで元の大きさを表示する方法を説明します。
沢山の画像を並べる場合、サイズの大きな画像は、見る人にとっても時間が掛かりますので、
表示サイズを小さくする方が良いですネ♪


↓ココで使うタグはコレ

<a href=" http://~(画像までのURL) ">
<IMG SRC=" http://~(画像までのURL) " width="★" height="☆" alt="●">
</a>

★…表示画像の横幅
☆… 〃 の縦幅
●…画像の説明

<IMG SRC=" http://~(画像までのURL) " width="★" height="☆" alt="●"> 』は、
画像の倉庫からコピーしてきたタグを、そのまま貼り付けます。
ココから、上の『 http://~(画像までのURL) 』の所に
『コピー・貼り付け』すればOK!
ようするに、画像の倉庫からのタグを、<a>と</a>で挟めばいいのです。

★と☆は  表示される大きさ なので、それぞれ比例して小さくして下さい。
通常は、『640×480(480×640)』だと思いますので、
下記を参考にして縮小して下さい。

*2分の1のサイズ…320×240(240×320)
*4分の1のサイズ…160×120(120×160)
*4分の3のサイズ…480×360(360×480)


4分の1サイズにして見てみると…

淡路島にて

…となります。(クリックしたら、ブラウザーの『戻る』で戻って下さい;)


これに、
*枠を取る『 border="0" 』を、『

alt="●"』の後ろへ
*新しいウインドウで開く『 target="_blank" 』を、『a』の中へ入れ、

<a href="http://~(画像までのURL)" target="_blank" >
<IMG SRC="http://~(画像までのURL)" width="★" height="☆" alt="●" border="0" >
</a>

にして見てみると…

淡路島にて

…このようになります。

テーブルを使って画像一覧を作る等、上手くご利用下さいネ♪



© Rakuten Group, Inc.
Design a Mobile Site
スマートフォン版を閲覧 | PC版を閲覧
Share by: