無名子のよしなしごと・別館
おもいつくままに
| 複数画像のレイアウトについて−−サムネイル画像の利用−− | ||
 |
||
| ウェブリブログもずいぶん進化して、複数画像の掲載やレイアウトも作業しやすくなってきましたね。 それでも、私の「胸を張って 冬桜」の様な、自由なレイアウトには充分とは言えないようです。 そこで、私が行っているＴＡＢＬＥタグとサムネイル画像を用いたレイアウトについて説明したいと思います。今回は、「サムネイル画像（縮小画像）の利用」と「ＴＡＢＬＥタグの利用」の２部に分かれています。レイアウトに付いては「ＴＡＢＬＥタグの利用」の方を参照して下さい。 |
|
| サムネイル画像とは、元の画像サイズを小さくし見本のように表示した物で、 クリックして本来の大きさの画像を表示させます。 狭い画面の中で、幾つもの画像を表示するときに良く使われていますよね。 ２つの方法が有ります。ここでは、画像表示の<IMG>タグとリンクの<A>タグを使います |
|
|
| その１． 画像を縮小表示させる（同一の画像を大小に使い分ける）） | ||
|
||
 上の元画像 A_sora_s01.JPG を縮小表示させます。 |
| 元画像 A_sora_s01.JPG （４８０×３６０）を小さく（２６６×２０２）表示するには <IMG SRC="★" WIDTH="▲1" HEIGHT="▲2" ALIGN="▼" ALT="●画像名" BORDER="■"> SRC="★"を A_sora_s01.JPG、WIDTH="▲1を266、HEIGHT="▲2を202、BORDER="■"を0 にして <IMG SRC="A_sora_s01.JPG" WIDTH="266" HEIGHT="202" BORDER="0"> と成ります。 これに <A HREF="★リンク先" TARGET="▼">●リンク元(リンクスイッチ)</A> を組み合わせます。 ★リンク先に A_sora_s01.JPG を ●リンク元(リンクスイッチ)に、先ほどの <IMG SRC="A_sora_s01.JPG" WIDTH="266" HEIGHT="202" BORDER="0">を書き込んで <A HREF="A_sora_s01.JPG" TARGET="_blank"><IMG SRC="A_sora_s01.JPG" WIDTH="266" HEIGHT="202" BORDER="0"></A> とします。 TARGET="▼" は、TARGET="_blank" にした方が無難です。 <A HREF=・・・ から・・・</A>の間は改行せず、一行に書いて下さい。
結果は・・・ サムネイル表示された画像をクリックしてみて下さい。 元の４８０×３６０の画像を別ウインドウに表示したはずです。 |
|
| その２． 縮小した画像を別に用意する | ||
|
||
| その１．の用に画像を縮小表示させるのではなく、 予め画像サイズを小さくしておいた、別の画像を用意しておきます。 |
|
 元画像の A_kesiki_tooyama_s01.JPG （４８０×３６０） |
 縮小しておいた画像 （少し加工して影を付けています） A_kesiki_tooyama_2ss01.JPG （２６６×２０２） |
| 右の小画像をクリックしたら、左の大きい画像を表示させるようにします。 | |
| 小さい画像を表示させるためには下記のように <IMG SRC="★" WIDTH="▲1" HEIGHT="▲2" ALIGN="▼" ALT="●画像名" BORDER="■"> SRC="★"を A_kesiki_tooyama_2ss01.JPG 、BORDER="■"を0 、にして （ WIDTH="▲1"とHEIGHT="▲2"は指定する必要はありません。） <IMG SRC="A_kesiki_tooyama_2ss01.JPG" BORDER="0"> そして、クリックして本来の大きさの画像を表示させるためには <A HREF="★リンク先" TARGET="▼">●リンク元(リンクスイッチ)</A> ★リンク先は A_kesiki_tooyama_s01.JPG ●リンク元(リンクスイッチ)に縮小画像、<IMG SRC="A_kesiki_tooyama_2ss01.JPG" BORDER="0"> を書き込んで <A HREF="A_kesiki_tooyama_s01.JPG" TARGET="_blank"><IMG SRC="A_kesiki_tooyama_2ss01.JPG" BORDER="0"></A> とします。 TARGET="▼" は、TARGET="_blank" にした方が無難です。 <A HREF=・・・ から・・・</A>の間は改行せず、一行に書いて下さい。
結果は・・・ サムネイル表示された画像をクリックしてみて下さい。 元の４８０×３６０の画像を別ウインドウに表示したはずです。 |
|
||||||
| その３． 両者のメリット、デメリット | ||
|
||
| その１．の場合、用意する画像が１つですみますが、ナローバンド（低速回線）の場合、表示に時間が掛かります。そのためホームページの作成などではあまり使われていません。 その２．の場合、画像を二つ用意し、縮小画像を作成する手間が掛かりますが、表示が早句成ります。また、私のように縮小画像に影を付けておくなどの加工した物を使うことが出来ます。 どちらが良くて、どちらが悪いと言うことも無いようなので、好みに応じて使い分けても良さそうですね。 |
| その４．画像サイズと用途 | ||
|
||
| 参考のため、画像サイズと用途を下記のような表に纏めてみました。 画像をＵＰする際の目安にでもして頂ければと思います。 |
| 画素数 | 画像サイズ （横×縦） |
用途（目安） | 150dpi (mm) |
|
| 16× 16 | アイコン(小） | 3× 3 | ||
| 32× 32 | アイコン(大） | 5× 5 | ||
| 64× 64 | アイコン(特大） | 11× 11 | ||
| 96× 72 | サムネイル画像、携帯 | 16× 12 | ||
| 128× 96 | サムネイル画像、携帯 | 22× 16 | ||
| 160× 120 | ＨＰ（小）、携帯 | 27× 20 | ||
| 約 8万画素 | 320× 240 | ＨＰ（中）メール添付 | 54× 41 | |
| 約 31万画素 | 640× 480 | VGA | ＨＰ（大）、サービスサイズ | 108× 81 |
| 約 48万画素 | 800× 600 | SVGA | 135× 102 | |
| 約 79万画素 | 1024× 768 | XGA | ポストカード | 173× 130 |
| 約131万画素 | 1280×1024 | SXGA | A5判 | 217× 173 |
| 約192万画素 | 1600×1200 | UXGA | A4判 | 271× 203 |
| 約321万画素 | 2048×1568 | SUXGA | 四切判 | 347× 266 |
| 約376万画素 | 2240×1680 | 379× 284 | ||
| 約492万画素 | 2560×1920 | A3判 | 433× 325 |
| より綺麗な状態にするため、写真を印刷する場合は約３２１万画素（縦横サイズ２０４８×１５６８）、３００
dpi 以上、をお薦めしますが、パソコン上で表示するだけなら約７９万画素（縦横サイズ１０２４×７６８）以下をお薦めします。 今のパソコンのディスプレイ、概ね１０２４×７６８のＸＧＡサイズだと思うんです。 それ以上の縦横サイズだと一度に表示しきれないか、自動で縮小表示してしまうんですよね。 それならば最初から、そのサイズ以下にしておけば、表示も早いし、容量も食わずに済みます。 以上の事から、インターネット（ホームページやブログ）、メールに使う場合、縦横サイズ１０２４×７６８以下にした方が良いようです。印刷を前提にＵＰするのなら「その２．」で説明したサムネイル画像を用いる方が、閲覧者にとって都合が良さそうです。 |
| 注意事項、その他 |
| ★．ここでは「http://www5e.biglobe.ne.jp/~tanuma/Blog_Photo_2/・・・」の様に ＵＲＬを書き込んで居ませんが、ウェブリブログに挿入して使う場合は、 ＵＲＬも指定して下さい。 ★．ＵＲＬやタグ、画像のファイル名など、半角の英数記号以外は使えません。 また、大文字、小文字も判別しますので、要注意です。 http://www7a.biglobe.ne.jp/~x１/IMG_7767.JPG とすべき所を下記のように書くと http://www7a.biglobe.ne.jp/~x１/Img_7767.JPG （ ファイル名が違う ×） http://www7a.biglobe.ne.jp/~x１/ＩＭＧ＿７７６７．ＪＰＧ （全角文字 ×） ★．この方法は、ホームページ作成、公開の方法の簡略版です。 タグの使用、ホームページ作成、公開については、下記のサイトが詳しいですよ。 「とほほのＷＷＷ入門 （ http://www.tohoho-web.com/www.htm ）」 ★．画像の縮小について 専用ソフトも有りますが、デジカメの付属ＣＤ等にある閲覧用ソフト等で 出来ると思いますので、確認してみて下さい。 また、オンラインソフトを探すのも良いですね、 無料から有料の物までいろんな物が揃っているようです。 下記の所で探してみて下さい。 Vector http://www.vector.co.jp/ |
今回は、時間不足のため、概要だけになってます。
必要に応じて書き足したいと思ってますので、質問、ご要望等はメールして下さい。
無名子のアドレスは mumeisi@with.biglobe.ne.jp です。
