トリまとめブログ > wordpress > アマゾン画像を自動でリサイズしてくれる仕組み＋ランダムで表示する仕組み

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

2013年9月24日 Category - wordpress, ブログ運営, プログラミング Comment : 1

このエントリーをはてなブックマークに追加

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>


  2. CSSを適用

    3. つづいて、以下の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. 切り取る形になるため、全容が把握できません。



  2. 画像の商品を中央ピッタリにそろえられない

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


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

【おまけ】JavaScriptでランダムで表示する

下記のスクリプトの『内容』の部分に先ほど作ったAmazonリンクを入れれば、
１２個の中からランダムで６個表示してくれます。



サイドバーに貼り付ける用（下のスクリプトをリンクさせるためのもの。http://hogehoge/sample.jsは適宜修正）

<script type="text/javascript" src="http://hogehoge/sample.js"></script>


ランダム表示サンプル(sample.js)


var URL = new Array(12);
URL[0] ='内容１';
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>');
}


Tag : , , , ,