ベネリックレゴストア楽天市場店で「飛行機<ミニセット>」プレゼントキャンペーン開催中!(2019年1月18日0時0分〜)

「Amazon Associates Link Builder」カスタマイズ例

Amazon Associates Link Builder WordPress
スポンサーリンク

「Amazon Associates Link Builder」を利用するために、カスタマイズしてみました。

アクセスキーとシークレットキーは取得しているという状態から進めていきます。

カスタマイズの手順

Setteingsで必要事項を入力する

プラグインをインストールした後、「Associates Link Builder」→「Settings」。

Associates-Link-Builder

上の画像の赤囲み部分に必要事項を入力して「Save Changes」をクリック。

Templatesを開く

「Create new template」を選択後、テンプレートの名前を決めて入力する。

カスタマイズ事例

商品画像/商品タイトル/商品価格/Primeマーク

表示例

画像なのでクリックはできません

実際は商品画像と商品タイトルをクリックできます。

HTML

{{#Items}}
<div class="amazon-box" id="{{ID}}">
{{#Item}}{{#aalb}}
<div class="amazon-item-image-box">
<figure class="amazon-item-image"><a href="{{DetailPageURL}}"><img alt="{{Title}}" src="{{MediumImageURL}}"></a></figure>
</div>
<div class="amazon-item-list">
<div class="amazon-item-title"><a href="{{DetailPageURL}}">{{Title}}</a></div>
<div class="amazon-item-currentprice"><span class="currentprice">{{CurrentPrice}}</span>{{#Prime}}<span class="amzn-product-prime-icon"><i class="icon-prime"></i></span>{{/Prime}}</div>
<div class="amazon-merchant">{{Merchant}}</div>
</div>
{{/aalb}}{{/Item}}
</div>
{{/Items}}

CSS

.amazon-box {
display: flex;
width: auto;
margin: 1em 0;
padding: 10px;
border: solid 2px #ccc;
}
.amazon-item-image {
padding: 5px;
border: solid 1px #eee;
}
.amazon-item-list {
padding: 5px;
}
.amazon-item-title {
font-weight: bold;
}
.amazon-item-currentprice .currentprice {
color: #c9171e;
font-size: 90%;
margin-right: 5px;
}
.icon-prime {
background: url("https://images-na.ssl-images-amazon.com/images/G/01/AUIClients/AmazonUIBaseCSS-sprite_2x_weblab_AUI_100106_T1-4e9f4ae74b1b576e5f55de370aae7aedaedf390d._V2_.png") no-repeat;
background-position: -192px -911px;
background-size: 560px 938px;
display: inline-block;
height: 15px;
margin-top: -1px;
vertical-align: middle;
width: 52px;
}
.amazon-merchant {
font-size: 80%;
}

リンクカード化する

枠内のどこでもカーソルを合わせると、全体が選択されるカスタマイズ。

HTML

{{#Items}}
<div class="amazon-box" id="{{ID}}">
{{#Item}}{{#aalb}}
<div class="amazon-item-image-box">
<figure class="amazon-item-image"><img alt="{{Title}}" src="{{MediumImageURL}}"></img></figure>
</div>
<div class="amazon-item-list">
<div class="amazon-item-title">{{Title}}</div>
<div class="amazon-item-currentprice"><span class="currentprice">{{CurrentPrice}}</span>{{#Prime}}<span class="amzn-product-prime-icon"><i class="icon-prime"></i></span>{{/Prime}}</div>
<div class="amazon-over"><a href="{{DetailPageURL}}" target="_blank"></a></div>
</div>
{{/aalb}}{{/Item}}
</div>
{{/Items}}

CSS

.amazon-box {
display: flex;
position: relative;
width: auto;
margin: 1em 0;
padding: 10px;
border: solid 2px #ccc;
}
.amazon-box:after {
position: absolute;
content: "\f270";
font-family: fontawesome;
color: #C60;
bottom: 0;
right: 10px;
}
.amazon-box:hover {
opacity: 0.7;
}
.amazon-box a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.amazon-box a .external-icon:before {
display: none;
}
.amazon-item-image {
padding: 5px;
border: solid 1px #eee;
}
.amazon-item-image-box {
padding: 5px;
}
.amazon-item-list {
padding: 5px;
}
.amazon-item-title {
line-height: 1.4;
font-weight: 600;
color: #03c;
font-size: 95%;
}
.amazon-item-currentprice .currentprice {
font-size: 90%;
color: #B12704;
margin-right: 5px;
}
.icon-prime {
background: url("https://images-na.ssl-images-amazon.com/images/G/01/AUIClients/AmazonUIBaseCSS-sprite_2x_weblab_AUI_100106_T1-4e9f4ae74b1b576e5f55de370aae7aedaedf390d._V2_.png") no-repeat;
background-position: -192px -911px;
background-size: 560px 938px;
display: inline-block;
height: 15px;
margin-top: -1px;
vertical-align: middle;
width: 52px;
}
.amazon-merchant {
font-size: 80%;
}

今後、別パターンも追記していく予定です。

スポンサーリンク
WordPress
この記事を書いた人
ギズモ

198X年生まれのサラリーマン。サッカー、ファッション、インターネットをこよなく愛しています。

ギズモをフォローする
スポンサーリンク
BonDay
タイトルとURLをコピーしました