« 思ったような見た目にするのは難しいですね | トップページ | ココログレスポンス問題・究極の選択……なのかなぁ? »

2006/06/23

【Web】リンク画像が無いときNo Image画像を代わりに表示する方法

Amazonに商品の画像が無いとき、代わりに『No Image』画像が表示されたらいいと思いません?

蔵書リンクMAKERを使っているときに気になるのが、Amazonに(まだ)画像が存在しない場合には、何も表示されないこと。
本当に無いのか、それともネットが重くてロードが出来ていないだけなのか、区別が付きにくいし……。
また、自分でいちいち代替画像を作ってリンクを張り替えるのも面倒だし、新刊なんかは今は未登録でもそのうち登録されることも考えられます。
今回、きまぐれブックテーマを作っていて、ますますその思いが強くなりました(レイアウトを固定化しようとすると、画像部分が間抜けにあいてしまうのです……)。 画像がないときには、リンク先に『No Image』画像なりを置いておいてくれればよいのに……。

そのときふと思いついたのが、<img>タグの背景画像として『No Image』画像を設定しておけば、Amazonに画像が無いときには背景が表示され、画像が有る/後から登録された場合は背景の代わりにその画像が表示されるようになるかも……ということ。

で、試してみたら実際そうなりました。
ブックテーマの設置用スクリプトで、
.rbsResultWindow .rbsImgTable .imgWin img {
height: 160px;
background: url('https://furyu.tea-nifty.com/image/NoImage.png') no-repeat;
}
のような箇所がそれ。

蔵書リンクMAKERの方もやりかけてましたが、作成当時にCSSというものをほとんど知らずclass設定をしていなかったツケで、どうやってもAmazon以外の画像リンクにも影響してしまうため、断念

ポイントは、「height: 160px;」で画像の高さを揃えてやっていることと、「background: ~;」で背景画像を指定していること。
実は、リンク画像が無いときにAmazonは代わりに1px×1pxの透過GIFを返してくるようなのです。
なので、これをCSSの指定で適当に拡大し(height:160px;)、背景画像を設定してやると、背景画像が透けてみえるわけです。
一方で、リンク画像があれば、それはJPEG形式でもともと透過機能がないフォーマットのため、今度は背景画像が隠される、という寸法。

留意点として、

  • リンク画像が存在する場合でも、その表示の直前に一瞬背景画像(No Image)が見える。
  • リンク画像が存在しない場合に送られてくる透過GIFは1×1の正方形。なので、拡大しても正方形。一方、大概の本は長方形。→レイアウトを考える必要有り
    height:だけではなくwidthも変える、という手もあるけど、この場合リンク画像が歪んでしまう可能性が有る
  • リンク画像が背景が透けてみえる画像(透過GIF・PNG等)の場合には適しないので、応用時は注意。

テーマは……『スタイルシート』スタイルシートにしとこう。

« 思ったような見た目にするのは難しいですね | トップページ | ココログレスポンス問題・究極の選択……なのかなぁ? »

パソコン・インターネット」カテゴリの記事

おもいつき」カテゴリの記事

覚書」カテゴリの記事

コメント

風柳さん おはようございます(≧∇≦)/
この問題についてふと思ったんですが・・・僕も本の紹介をしようとして画像がないや~って思ったことは何度かあるんですね。で、この例えば本やCD、DVDなんかの紹介やアフィリエイトの場合、画像があるのと無いのではインパクトに大きな差があると思うんですよね。
その時この記事のように「No Image」画像をつけるのも一つの手だと思います。が、他から(本の場合だったらe-honとか本やタウンとか)当該画像を持ってきて、万が一無ければ自分の蔵書をデジカメで撮ってとかして(手間はメッチャかかりますが・・・)入れ替えるってのはアフィリエイトの契約違反とかになるんでしょうかね?
結構 本の表紙とかジャケットとかって訴求力があるんで出来れば載せたいですよね。きまぐれブックマークの場合はちょっと無理かもしれませんが( ̄▽ ̄;)

hibikiさん、どうもです。

画像を入れ替えて使用することに関しては、特に規定は無かったように思いますけれど……自信はないです(^^;。

ちなみにこのブログを始めてしばらくは、Amazonに加入していなかったため、自力でキャプチャした画像でリンクを作っていました。もう面倒くさいのなんのって(笑)。

その後、Amazonに結構画像が無いことに気づいて、その場合は自力キャプチャ画像に代える……ということもやってましたが、すぐ気力が尽きてしまいました(苦笑)。
#それにもしかすると著作権がらみで問題がある?という懸念もあったり

コメントを書く

(ウェブ上には掲載しません)

トラックバック


この記事へのトラックバック一覧です: 【Web】リンク画像が無いときNo Image画像を代わりに表示する方法:

« 思ったような見た目にするのは難しいですね | トップページ | ココログレスポンス問題・究極の選択……なのかなぁ? »

戻るリンク追加

カレンダー

2020年3月
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31        

ココログカレンダーPlus(旧2)

検索


    • Web全体 サイト内
    • 蔵書のISBNを入力して下さい
    • はじめる前
      初級者向け
      上級者向け
      ブログ紹介
      結果を表示

コメントリストツリー化

無料ブログはココログ