クリック率が上がる!? AmazonJSのデザインをカスタマイズする方法

 WordpressではAmazonの商品を紹介するのに便利なAmazonJSというプラグインがあります。

 ところがこのAmazonJS、デフォルトではとてもそっけないデザインなのでいろいろとカスタマイズして見やすくしたいと思います。

 

カスタマイズ後の見本

 ちょっとカエ◯レバ風なデザインですがこんな感じに仕上がりました。

 カスタマイズのポイントは次の2点です。

AmazonJSカスタマイズのポイント

  • 価格表記をなくす
  • リンクボタンの設置

価格表記をなくす

 商品の価格は人が一番気になるところです。価格が書いてあるとネタバレではないですが、それ以上その商品について興味がなくなってしまうのでクリックされづらくなります。

 ということでカスタマイズ版では価格表記を消してみました。

リンクボタンの設置

 カエレバではAmazonや楽天、Yahooなどいろいろなサイトにリンクを貼るのでボタンも複数設置できるのですが、Amazonだけだとボタンは1つになってしまいます。

 しかしボタンが1つだと少し景気が悪い感じが否めないので、「Amazonでチェック」と「もっと見る」の2パターンを用意して賑やかな感じを出してみました。

編集するファイルは2つ

 カスタマイズにはAmazonJSプラグイン中に含まれる2つのファイルを編集します。

  • amaonjs/js/amazonjs.js
  • amaonjs/css/amazonjs.css

amazonjs.jsの編集

 まずは「amazonjs.js」ファイルの58行目付近で次のコードを探して下さい。

var linkTemplate = linkOpenTag + '${Title}</a>';

コードの追記

 先程のコードが見つかったら下に次の2つのコードを追記してください。

var amazonlink = linkOpenTag +'<div class="amazon-button">Amazonでチェック</div></a>';
var amazonlink2 = linkOpenTag +'<div class="amazon-button2">もっと見る</div></a>';

コードの置き換え

 amazonjs.js中に次のコードが5箇所あります。104行目、124行目、144行目、165行目、184行目あたりを探してみてください。

'<div class="amazonjs_footer"></div>', 

 これらを次のように置き換えます。

 '<div class="amazonjs_footer">',amazonlink,amazonlink2,'</div>',

amazonjs.cssの編集

 続いてCSSの編集です。amazonjs.cssの一番上に次のコードを追記してください。

.amazonjs_price {
 display: none;
}
@media screen and (min-width: 1230px) {
 .amazon-button{
 padding: 3px 45px!important;
 }
}
@media screen and (max-width: 1229px) {
 .amazon-button{
 padding: 3px 45px!important;
 }
}
@media screen and (max-width: 1110px) {
 .amazon-button{
 padding: 3px 45px!important;
 }
}
@media screen and (max-width: 640px) {
 .amazon-button{
 padding: 3px 20px!important;
 }
}
@media screen and (max-width: 330px) {
 .amazon-button{
 padding: 3px 20px!important;
 }
}
.amazon-button{
 background-color:#FF9901;
 color: #FFFFFF;
 border: 1px solid #FF9901!important;
 border-radius: 3px;
 display: inline-block;
 margin: 10px 0 0 0!important;
 text-align: center;
 float: left;
 text-decoration: none;
 font-weight: bold;
 /*text-shadow: 1px 1px 1px #dcdcdc;*/
 font-size: 1em;
}
 .amazon-button2{
 width: 30%;
 background-color:#ff0000;
 color: #FFFFFF;
 border: 1px solid #ff0000!important;
 border-radius: 3px;
 display: inline-block;
 margin: 10px 0 0 10px!important;
 padding: 3px 1px!important;
 text-align: center;
 float: left;
 text-decoration: none;
 font-weight: bold;
 /*text-shadow: 1px 1px 1px #dcdcdc;*/
 font-size: 1em;
}
.amazon-button:hover{
 transition: 0.6s ;
 opacity: 0.7;
}
.amazon-button2:hover{
 transition: 0.6s ;
 opacity: 0.7;
}
.amazonjs_item{
overflow:hidden;
}

まとめ

 これでカスタマイズが完了しました、皆さんのサイトでもきれいに表示されましたか?

 今回はオレンジ色と赤色でデザインしましたが、ボタンの色や大きさなどサイトに合わせたり、好みでいろいろ変えてみてくださいね^-^♪

フォローする