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


amazon-184064_640

まとめブログでよく見る、サイドバーに張られているフィギュアの画像。
Amazonのリンクになっているケースがほとんどなのですが、あれを簡単に実装できないかなと思い、探してみたところ良い方法がありましたので、ご紹介です。 このサイトのサイドバーにも使われています。


Amazonのリンクは、画像+リンクで構成されているので、
動的に画像を自由にリサイズできれば、問題は解決というわけです。


参考にしたサイト

CSSのOverflowを応用して画像を綺麗にリサイズ表示するサンプル



やり方

  1. 画像を用意する
  2. AmazonJS で画像を用意します。
    表示したい箇所より大きいサイズになるように、画像を選択します。

    空の境界 the Garden of sinners 全画集+未来福音 extra chorus

    <!-- 適用前のソース -->
    <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>
    
    


  3. CSSを適用
  4. つづいて、以下の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;
    } 
    
    


    画像の比率を維持したまま、切り取ったようにリサイズできました。

    空の境界 the Garden of sinners 全画集+未来福音 extra chorus

    <!-- 適用後のソース -->
    <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の回り込みを解除するためのものです。 -->
    
    

この方法の欠点

  1. 商品の全容が表示できない
  2. 切り取る形になるため、全容が把握できません。



  3. 画像の商品を中央ピッタリにそろえられない
  4. この方法の最大の欠点です。
    縦長、横長と画像のサイズはまちまちなため、最大公約でCSSの値を決めています。
    そのため、センターに商品を持ってくることが、ほぼ出来ません。


    フィギュアーツZERO プリンセスピース

【おまけ】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>');
}