パラメトリックJSアルバム
  • カラー画像
更新ページ
カテゴリー
パラメトリックaffiliateエリア
実際には、当ページのヘッダー部分に表示させています。
Lightbox JS v2.0
実装手順はここをクリックしてください。また、prototype.js関数を利用しています。
パラメトリックFLASH
を新設しました。戻って、押してみてください。
×をクリックすれば停止できます。


サムネイル画像の重要性と作成方法について

■ 関連リンク先
wikiでの画像投稿方法 その1〜3 ※ 是非、ご訪問くださいませ。 m(__)m
サムネイル画像作成の手法の例

ここ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="http://image.blog.livedoor.jp/mmj_aos/imgs/3/6/36c8a2a7.jpg"
target="_blank"><img
src="http://image.blog.livedoor.jp/mmj_aos/imgs/3/6/36c8a2a7-s.jpg"
width="160" height="120" border="0" alt="サンプル画像をあっぷするのだ"
hspace="5" class="pict" align="left" /></a><br />
だったと仮定しますか。
[[&ref(http://image.blog.livedoor.jp/mmj_aos/imgs/3/6/36c8a2a7-s.jpg,160,120)>http://image.blog.livedoor.jp/mmj_aos/imgs/3/6/36c8a2a7.jpg]]
と、Wiki文法にしますか。

■ 貼り付けサンプル2 (文字リンクの場合)
キッチンハイター
[[キッチンハイター>http://image.blog.livedoor.jp/mmj_aos/imgs/b/8/b8245188.jpg]]

■ 貼り付けサンプル1 (上記例題の場合)
ちょっと大きいですよ。^^; 


Livedoor Wiki 内リンク
Livedoor Wiki で
Lightbox JS v2.0を使ってみる
Livedoor
FC2
Seesaa
忍者各ブログで
Lightbox Plus を使ってみる
ちょっと試しに Lightbox を利用してみるか
サムネイル画像の重要性と作成方法について
2007年02月05日(月) 15:23:43 Modified by mmj_aos

添付ファイル一覧(全4件)
152a6df25d599b30.gif (1.70KB)
Uploaded by mmj_aos 2007年01月21日(日) 22:27:00
6ff9dad82ef06f69.jpg (94.98KB)
Uploaded by mmj_aos 2007年01月21日(日) 22:24:14
ddaca7700e908661.GIF (10.94KB)
Uploaded by mmj_aos 2007年01月21日(日) 21:49:44
fee236ec606c6d9a.gif (206B)
Uploaded by mmj_aos 2007年01月21日(日) 12:23:12



スマートフォン版で見る

×

この広告は60日間更新がないwikiに表示されております。