みんなの練習帳 - サムネイル画像の重要性と作成方法について

ここWikiでも、ブログでも、いえいえ一般のホームページでもサムネイル画像の貼り付けって大変重要です。

* オリジナル画像のサイズを小さくして表示すれば簡単ジャン

 いえいえ、そうではないのです。見かけは小さな画像でも、オリジナルの大容量のデーターを受信しているのです。1枚位なら、それでも許されるかもしれませんが・・・複数のオリジナル大容量サイズの画像を、サイズを小さく指定しても、これは「大変重いページ」となってしまって、人気が出れば出る程に、ページの表示に長時間必要となります。
※ ですから、絶対に「オリジナル大容量・大サイズ」の画像は貼らないこと。
* 小さな画像を貼ればいいじゃん

 小さな小さな画像を貼るのは良いのです。よく見掛けるのは、「小さなリンク画像をクリックすると、全く同じ小さな小さな画像しか表示されない」ページがあります。貼るのは小さな画像で良いわけです。ところが訪問者にとっては「興味が湧いた小さな画像をクリックできたなら、大きな画像を表示してくれよ!」って思っている、願っているのです。それなのに、全く同じ小さな小さな画像を繰り返し再度、表示させるだけなら、「わざわざリンクするなよ!!」って不満なのです。

 例えば次の左側の画像をクリックしてみてください。結果は同じ小さな画像を表示するだけですね。クリックする意味がありませんよね。
 それに対して、右側の小さな画像をクリックしてみてください。ある意味、期待の通りの大き目の画像を表示します。

* 携帯電話で作成するしー

 携帯電話の画像だって、新機種ならデジカメ以上の高密度・高精彩な画像を作成できます。携帯電話だからと言うのは、どうかと。
* 携帯電話専用のサイトだから

 携帯電話専用のサイトなら、小さな小さな画像での運用となるのでしょうね。
* ジャアアー、どうすればよいのさっ?

1. ページには小さな容量で小さなサイズの画像を貼る。
2. 大きなオリジナルサイズの画像がある場合は、リンクで表示させる。
3. 同じ画像、同じ小さな画像へのリンクは意味が無いので絶対にしない!

サムネイル画像の作成方法:

* ブログ機能を利用する

 各社のFREEブログには「サムネイル画像の自動作成機能」がある。それを利用する。
* Windows用のFREEソフトを利用する

 トップページの、「 解説ページに進む 」で紹介しています。
作成したサムネイル画像とオリジナル画像を、公開できる「あなたのホームページ」にアップロードします。
※ 中には他のサイトからの利用を拒絶しているところもありますので注意は必要です。例えば、FC2さんのブログのアップローダーがそうですね。参照できないようになっています。

サムネイル画像とオリジナル画像を Livedoor Wiki に貼り付ける方法:


1. 両方の画像のURLを知りましょう。

【Livedoorブログのファイルのアップロード】を利用する場合:
画像のアップロードが済んだら、 をクリックしますよね。すると以下の画面を表示します。

imgタグのURLがサムネイル画像ですね。aタグのURLがオリジナル画像です。
どちらのURLも、マウスで反転させて、Ctrl+Cでコピーできますね。(って、MS-Windowsの場合ですが ^^;)

【Seesaaブログのファイルマネージャー】を利用する場合:
画像のアップロードが済んだら、をクリックしますよね。すると以下の画面を表示します。

imgタグのURLがサムネイル画像ですね。aタグのURLがオリジナル画像です。
どちらのURLも、マウスで反転させて、Ctrl+Cでコピーできますね。(って、MS-Windowsの場合ですが ^^;)

2. Livedoor Wiki 専用の文法に置き換えて書き込みますね。

a. [[]]でリンク指定します。それでは中身ですね。
b. &ref()でサムネイル画像を指定します。
それだけですよ。&ref()には、画像のピクセルサイズを指定した方がブラウザーに対するストレスが軽減されます。逆に「 100% 」と指定する場合も応用としてありです。


【例題】:
<a href=""
target="_blank"><img
src=""
width="160" height="120" border="0" alt="サンプル画像をあっぷするのだ"
hspace="5" class="pict" align="left" /></a><br />
だったと仮定しますか。

と、Wiki文法にしますか。


※ 本ページは、Using only Java Script for ALBUM - livedoor Wiki(ウィキ)からの転載です