当サイトではアフィリエイトプログラムを利用して商品を紹介しています。
「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%;
}
今後、別パターンも追記していく予定です。
