アマゾン画像を自動でリサイズしてくれる仕組み+ランダムで表示する仕組み

まとめブログでよく見る、サイドバーに張られているフィギュアの画像。
Amazonのリンクになっているケースがほとんどなのですが、あれを簡単に実装できないかなと思い、探してみたところ良い方法がありましたので、ご紹介です。
このサイトのサイドバーにも使われています。
Amazonのリンクは、画像+リンクで構成されているので、
動的に画像を自由にリサイズできれば、問題は解決というわけです。
参考にしたサイト
CSSのOverflowを応用して画像を綺麗にリサイズ表示するサンプル
やり方
- 画像を用意する
- CSSを適用
AmazonJS で画像を用意します。
表示したい箇所より大きいサイズになるように、画像を選択します。
<!-- 適用前のソース --> <p><a href="http://www.amazon.co.jp/%E7%A9%BA%E3%81%AE%E5%A2%83%E7%95%8C-Garden-sinners-extra-chorus/dp/4062186977%3FSubscriptionId%3DAKIAIJNVDAI3AWG5UMRA%26tag%3Dwbird3-22%26linkCode%3Dxm2%26camp%3D2025%26creative%3D165953%26creativeASIN%3D4062186977" title="空の境界 the Garden of sinners 全画集+未来福音 extra chorus" target="_blank"><img src="http://ecx.images-amazon.com/images/I/51cXn0YJwoL.jpg" alt="空の境界 the Garden of sinners 全画集+未来福音 extra chorus" height="500" width="353"></a></p>
つづいて、以下のCSSを適用します。
/*サイドバー用*/ p.thumb{ float:left; border:0px solid #999; padding:2px; } p.thumb a{ display:block; float:left; width:255px; height:300px; line-height:100px; overflow:hidden; position:relative; z-index:1; border-bottom:2px solid transparent; } p.thumb a img{ float:left; position:absolute; top:-20px; left:-80px; }
画像の比率を維持したまま、切り取ったようにリサイズできました。
<!-- 適用後のソース --> <p class="thumb"> <a href="http://www.amazon.co.jp/%E7%A9%BA%E3%81%AE%E5%A2%83%E7%95%8C-Garden-sinners-extra-chorus/dp/4062186977%3FSubscriptionId%3DAKIAIJNVDAI3AWG5UMRA%26tag%3Dwbird3-22%26linkCode%3Dxm2%26camp%3D2025%26creative%3D165953%26creativeASIN%3D4062186977" title="空の境界 the Garden of sinners 全画集+未来福音 extra chorus" target="_blank"><img src="http://ecx.images-amazon.com/images/I/51cXn0YJwoL.jpg" alt="空の境界 the Garden of sinners 全画集+未来福音 extra chorus" height="500" width="353"></a></p> <p style="clear:both"></p><!-- ←は、float:leftの回り込みを解除するためのものです。 -->
この方法の欠点
- 商品の全容が表示できない
- 画像の商品を中央ピッタリにそろえられない
切り取る形になるため、全容が把握できません。
この方法の最大の欠点です。
縦長、横長と画像のサイズはまちまちなため、最大公約でCSSの値を決めています。
そのため、センターに商品を持ってくることが、ほぼ出来ません。
【おまけ】JavaScriptでランダムで表示する
下記のスクリプトの『内容』の部分に先ほど作ったAmazonリンクを入れれば、
12個の中からランダムで6個表示してくれます。
サイドバーに貼り付ける用(下のスクリプトをリンクさせるためのもの。http://hogehoge/sample.jsは適宜修正)
<script type="text/javascript" src="http://hogehoge/sample.js"></script>
ランダム表示サンプル(sample.js)
var URL = new Array(12); URL[0] ='内容1'; URL[1] ='内容2'; URL[2] ='内容3'; URL[3] ='内容4'; URL[4] ='内容5'; URL[5] ='内容6'; URL[6] ='内容7'; URL[7] ='内容8'; URL[8] ='内容9'; URL[9] ='内容10'; URL[10] ='内容11'; URL[11] ='内容12'; for (j = 0; j < 6 ; j++) { x = Math.floor(Math.random()*URL.length); temp = URL[x]; URL[x] = URL[j]; URL[j] = temp; } for (i = 0; i < 6; i++){ document.write(URL[i]); document.write('<br>'); }
アマゾン画像を自動でリサイズしてくれる仕組み+ランダムで表示する仕組み http://t.co/e1fHBauUE0