「Amazon Associates Link Builder」を利用するために、カスタマイズしてみました。
アクセスキーとシークレットキーは取得しているという状態から進めていきます。
カスタマイズの手順
Setteingsで必要事項を入力する
プラグインをインストールした後、「Associates Link Builder」→「Settings」。
上の画像の赤囲み部分に必要事項を入力して「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: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%;
}
今後、別パターンも追記していく予定です。
