アマゾン商品リンク公式プラグインの使い方＆サンプル一覧とテンプレートカスタマイズ

{{#Items}}
  {{#Item}} 
    {{#aalb}}
      <div class="temp_btn">
        <div class="temp_btn_image">
          <a class="temp_btn_image-link" href="{{DetailPageURL}}" title="{{Title}}" target="_blank" rel="nofollow">
            <img src="{{MediumImageURL}}" alt="{{Title}}" />
          </a>
        </div>
        <div class="temp_btn_details">
          <div class="temp_btn_title">
            <a href="{{DetailPageURL}}" title="{{Title}}" target="_blank" rel="nofollow">
               {{Title}}
             </a>
          </div>
    {{#By}}<div class="amzn-product-brand">{{By}}</div>{{/By}}
    <div class="amzn-product-price">
      {{#StrikePrice}}<div class="amzn-product-strike-price">参考価格：<span class="strike-price">{{StrikePrice}}</span></div>{{/StrikePrice}}
      {{#SavingPercent}}<div class="amzn-product-saving">OFF: <span class="saving-percent">{{SavingPercent}}%</span></div>{{/SavingPercent}}
      <span class="amzn-product-current-price">{{CurrentPrice}}<span> {{#Prime}}<span class="amzn-product-prime-icon"><i class="icon-prime"></i></span>{{/Prime}}
    </div>
          <div class="temp_btn_btn">
            <a href="{{DetailPageURL}}" title="{{Title}}" target="_blank" rel="nofollow">Amazonで探す</a>
          </div>
        </div>
      </div>
　　　　{{/aalb}}
　　{{/Item}}
{{/Items}}

.temp_btn {
  display:block;
  padding:1rem;
  border: 1px solid #ddd;
  border-radius:8px;
  box-shadow: 1px 1px 2px rgba(0,0,0,.05);
}
.temp_btn_image {
  text-align:center;
  display: block;
  margin-right:10px;
}
.temp_btn_details {
  margin: 0.5rem;
}
.temp_btn_price {
  font-size: .8rem;
  color: #666;
}
.temp_btn_btn {
  margin: 1rem 0 0;
}
.temp_btn_btn a {
  display:block;
  padding: .25rem 2rem;
  border:1px solid #ff9900;
  border-radius:4px;
  background-color: #ff9900;
  color: #fff;
  font-size:12px;
  text-decoration: none;
  text-align:center;
  transition:all .3s;
}
.temp_btn_btn a:hover {
  border:1px solid #ff9900;
  background-color: #fff;
  color: #ff9900;
}
/* 商品名 */
.amzn-product-title {
  margin: 0 0 1rem;
}
/* メーカー・価格・販売元 */
.amzn-product-brand,
.amzn-product-price,
.amzn-product-seller {
  font-size: .8rem;
}
/* 現在価格 */
.amzn-product-current-price {
  color: #ab1700;
  font-weight: bold;
}
/* 参考価格 */
.strike-price {  text-decoration: line-through;}
/* プライムアイコン */
.amzn-product-prime-icon .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;
}
.amzn-product-prime-icon {
  display: inline-block;
  margin-right: 2px;
}
@media only screen and (min-width: 600px) {
  .temp_btn {
    display:flex;
  }
  .temp_btn_details {
    margin: 0 0 0 1rem;
  }
  .temp_btn_btn a {
    display:inline-block;
  }
}