【革命】はじめ式AmazonJSカスタマイズを自分流にデザインするための補助覚書

/*--------------------------------

はじめ式AmazonJSカスタマイズデザインの追加CSS（初期型）

---------------------------------*/
.amazonjs-link1 div {
  float: left; /* 左詰め */
  width: 49.5%; /* ボタン幅 */
  margin-top: 1%; /* 上余白 */
  margin-bottom: -2%; /* 下余白 */
  font-size: 0.875rem; /* 文字サイズ */
  font-weight: bold; /* 太字 */
  text-align: center; /* 中央寄せ */
  box-sizing: border-box;
}
.amazonjs-link1 div:nth-child(even) {
  margin-left: 1%;
}
.amazonjs-link1 div a {
  display:block;
  padding:3px 0;
  text-decoration:none;
}
.amazon-button a, .rakuten-button a, .yahoo-button a { /* ボタンを追加するごとにクラス名と aを併記しよう。,を忘れず。 */
  display:block; /* 並び */
  text-decoration:none; /* リンク線消し */
  margin: 4% 1% 0%; /* 余白 */
}

/* アマゾン */
.amazon-button a {
  color:#444444!important; /* 文字色（最優先にする1文付き） */
  background: #ffcb5b; /* ボタン色 */
  border-radius: 3px;
  box-shadow: 0 3px 0 #efbd51; /* 立体ボタン風にする場合の影色（いらなければこの1行を消す） */
}
.amazon-button a:hover {
  color: #4f4f4f!important; /* マウスオーバー時の文字色（最優先にする1文付き） */
  background: #efbd51; /* マウスオーバー時のボタン色 */
  transform: translate(0px,1px); /* 立体ボタン風モーションのキモ（いらなければこの1行を消す） */
  box-shadow: 0 2px 0 #efbd51; /* 立体ボタン風マウスオーバー時の影色（いらなければこの1行を消す） */
}
.amazon-button a:before {
  content: "\f270"; /* 先頭につくWEBアイコン */
  font-family: "fontawesome";
  padding:10px 4px; /* 余白 */
  font-size:14px; /* サイズ */
}

/* 楽天 */
.rakuten-button a {
  color: #fcfcfc; /* 文字色 */
  background: #f2abc3; /* ボタン色 */
  border-radius: 3px;
  border: 1px solid #f2abc3; /* フチ色 */
}
.rakuten-button a:hover {
  color: #fff; /* マウスオーバー時の文字色 */
  background: #db8aa5; /* マウスオーバー時のボタン色 */
  border: 1px solid #db8aa5; /* マウスオーバー時のフチ色 */
  transition: 0.5s ; /* マウスオーバー時の時間差（いらないなら消す） */
}
.rakuten-button a:before {
  content: "\f25d"; /* 先頭につくWEBアイコン */
  font-family: "fontawesome";
  padding:10px 4px; /* 余白 */
  font-size:14px; /* サイズ */
}

/* ヤフー */
.yahoo-button a {
  color: #fcfcfc; /* 文字色 */
  background: #c8aaf1; /* ボタン色 */
  border-radius: 3px;
  border: 1px solid #c8aaf1; /* フチ色 */
}
.yahoo-button a:hover {
  color: #fff; /* マウスオーバー時の文字色 */
  background: #b89ae0; /* マウスオーバー時のボタン色 */
  border: 1px solid #b89ae0; /* マウスオーバー時のフチ色 */
  transition: 0.5s ; /* マウスオーバー時の時間差（いらないなら消す） */
}
.yahoo-button a:before {
  content: "\f07a"; /* 先頭につくアイコン */
  font-family: "fontawesome";
  padding:10px 4px; /* 余白 */
  font-size:14px; /* サイズ */
}

/*--------------------------------
以下追記（いらなければ消す）
---------------------------------*/

/* 全体のボックスデザイン（いらなければ消す） */
.post .amazonjs_item { /* 右下のA画像マークは消えるので留意 */
  border: 1px solid #e8e8e8; /* ボックスの枠色 */
  background: #fcfcfc; /* ボックスの中の色 */
}

/* タイトル文字上書き用（いらなければ消す） */
.post .amazonjs_item h4,
.post .amazonjs_item h4 a {
  font-size:15px; /* タイトル文字のサイズ（つまり商品名） */
  color: #444444!important; /* 文字色（最優先にする1文付き） */
}
.post .amazonjs_item h4,
.post .amazonjs_item h4 a:hover {
  color: #4f4f4f!important; /* マウスオーバー時の文字色（最優先にする1文付き） */
}

/* ボックス内の文字色上書き用（いらなければ消す） */
.post .amazonjs_item ul li {
  font-size:12px; /* アマゾンJSボックス内の中の文字サイズ（価格など） */
  color: #444444!important; /* アマゾンJSボックス内の中の文字色（価格など） */
}

/* ボタンの文字色上書き用（いらなければ消す） */
.post .amazonjs_item a { /* リンク部分 */
  color: #444444; /* リンクボタン色 */
}
.post .amazonjs_item a:hover { /* マウスオーバー時リンク部分 */
  color: #4f4f4f; /* マウスオーバー時のリンクボタン色 */
}

/*--------------------------------
フツーなAmazonJSデザインカスタマイズ
---------------------------------*/

/* 全体のボックスデザイン */
.post .amazonjs_item { /* 右下のA画像マークは消えるので留意 */
  border: 1px solid #e8e8e8; /* ボックスの枠色 */
  background: #fff; /* ボックスの中の色 */
}

/* タイトル文字上書き用 */
.post .amazonjs_item h4,
.post .amazonjs_item h4 a {
  font-size:15px; /* タイトル文字のサイズ（つまり商品名） */
  color: #59503d!important; /* 文字色（最優先にする1文付き） */
}
.post .amazonjs_item h4,
.post .amazonjs_item h4 a:hover {
  color: #4f4f4f!important; /* マウスオーバー時の文字色（最優先にする1文付き） */
}

/* ボックス内の文字色上書き用 */
.post .amazonjs_item ul li {
  font-size:12px; /* アマゾンJSボックス内の中の文字サイズ（価格など） */
  color: #59503d!important; /* アマゾンJSボックス内の中の文字色（価格など） */
}

/* リンク文字色上書き用（まあ要らないけど一応） */
.post .amazonjs_item a { /* リンク部分 */
  color: #59503d; /* リンクボタン色 */
}
.post .amazonjs_item a:hover { /* マウスオーバー時リンク部分 */
  color: #a59d8c; /* マウスオーバー時のリンクボタン色 */
}

/* あマーク再現に挑戦 */
.post .amazonjs_item:after{
  display: inline-block;
  position: absolute; /* 親要素に対して絶対位置ポジション（詳しくはサルワカ） */
  bottom: 3px; /* アイコンの縦位置 Y軸 */
  right: 1px; /* アイコンの横位置 X軸 */
  width: 40px;
  height: 40px;
  line-height: 40px;
  border-radius: 50%;
  vertical-align: middle;
  text-align: center;
  content: "\f270"; /* アイコン */
  font-family: FontAwesome;
  color: #59503d; /* アイコン色 */
  font-size: 22px; /* アイコンサイズ */
  z-index: 1; /* 上位表示マウント */
}

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

/* 以下、追加ボタンの文字列記載するやで（日本語文字化けするなら文字コードをUTF-8にして保存） */

var amazonlink = linkOpenTag1 + 'Amazon</a></div>';

var rakutenlink = linkOpenTag2 + '楽天市場</a></div>';

var yahoolink = linkOpenTag3 + 'Yahooショッピング<img src="//ad.jp.ap.valuecommerce.com/servlet/gifbanner?sid=自分のID&pid=自分のID" height="1" width="1" border="0"></a></div>';

/* 以上、ボタンの文字列追記したやで */

var priceContentTemplate =
[

var linkOpenTag = '<a href="${DetailPageURL}" class="amazonjs_link" data-role="amazonjs_product" data-asin="${ASIN}" title="${Title}" target="_blank">';

/* 以下、「Amazon」と「楽天」と「Yショッピング」のボタンを呼び出すカスタムするやで */

var linkOpenTag1 = '<div class="amazon-button"><a href="${DetailPageURL}" class="amazonjs_link" data-role="amazonjs_product" data-asin="${ASIN}" title="${Title}" target="_blank" rel="nofollow">';

var linkOpenTag2 = '<div class="rakuten-button"><a href="https://hb.afl.rakuten.co.jp/hgc/自分のID/?pc=http://search.rakuten.co.jp/search/mall/${Title}/-/f.1-p.1-s.1-sf.0-st.A-v.2?x=0&scid=af_ich_link_urltxt&m=http://m.rakuten.co.jp/" target="_blank" rel="nofollow">';

var linkOpenTag3 = '<div class="yahoo-button"><a href="//ck.jp.ap.valuecommerce.com/servlet/referral?sid=自分のID&pid=自分のID&vc_url=http%3A%2F%2Fsearch.shopping.yahoo.co.jp%2Fsearch%3Fp%3D${Title}" target="_blank" rel="nofollow" >';

/* 以上、3つの呼び出し追記カスタムしたやで */

var smallImageTemplate =
[

'</ul>',

'<div class="amazonjs-link1">',amazonlink,rakutenlink,yahoolink,'</div></div>', /* ここのdiv〆をカスタムしたやで */ 

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

width: 99.5%; /* ボタン幅 */

var defaultTemplates = {
Small:[
'<div class="amazonjs_item">',
imageTemplate,

'{{if _ShowDefaultImage}}',mediumImageTemplate,'{{/if}}', /* ここの1文「small」を「medium」に替えて画像（中）にしたやで */ 

'<div class="amazonjs_info" style="{{if _InfoMarginLeft}}margin-left:${_InfoMarginLeft}px;{{/if}}">',
'<h4>',linkTemplate,'</h4>',
'<ul>',

@media (max-width: 720px) {
  .amazonjs_item .amazonjs_info {
  margin-bottom: 10px;
  }
}
@media (max-width: 480px) { /* ここから下をレスポンシブ用にカスタムしたやで */
.amazonjs_item .amazonjs_image {
  float: none;
  width: 100%;
  margin: 0;
  text-align: center;
}
.amazonjs_item .amazonjs_info {
  margin: 0 !important;
}
.amazonjs_item .amazonjs_info h4 a {
  font-size: 0.9em;
}
.amazonjs_item .amazonjs_info ul li {
  font-size: 0.9em;
}
.amazonjs-link1 div {
  float: none;
  width: 100%;
}
.amazonjs-link1 div:nth-child(even) { margin-left: 0; }
}

var amazonlink = linkOpenTag1 + 'Amazon</a></div>';
var rakutenlink = linkOpenTag2 + '楽天市場</a></div>';

var defaultTemplates = {
Small:[
'<div class="amazonjs_item">',
imageTemplate,

'{{if _ShowDefaultImage}}',mediumImageTemplate,'{{/if}}', /* ここの1文「small」を「medium」に替えて画像（中）にしたやで */

'<div class="amazonjs_info" style="{{if _InfoMarginLeft}}margin-left:${_InfoMarginLeft}px;{{/if}}">',
'<h4>',linkTemplate,'</h4>',
'<ul>',

'{{if Creator}}<li>${Creator}</li>{{/if}}',

'{{if Manufacturer}}<li>${Manufacturer}</li>{{/if}}',
priceLiTemplate,

'{{if PublicationDate}}<li><b>' + r.PublicationDate + '</b>${PublicationDate}</li>{{/if}}',

'{{if SalesRank}}<li><b>' + r.SalesRank + '</b>' + r.SalesRankValue + '</li>{{/if}}', /* ここを消せばSalesRank（商品ランキング）が消えるやで */

'</ul>',

/* ここのdiv〆をカスタムしたやで */ '<div class="amazonjs-link1">',amazonlink,rakutenlink,yahoolink,'</div></div>',

'{{if SalesRank}}<li><b>' + r.SalesRank + '</b>' + r.SalesRankValue + '</li>{{/if}}',

Book:[ /* 本のとき */
'<div class="amazonjs_item amazonjs_book">',
imageTemplate,
'{{if _ShowDefaultImage}}',mediumImageTemplate,'{{/if}}',
'<div class="amazonjs_info" style="{{if _InfoMarginLeft}}margin-left:${_InfoMarginLeft}px;{{/if}}">',
'<h4>',linkTemplate,'</h4>',
'<ul>',
'{{if Author}}<li><b>' + r.BookAuthor + '</b>${Author}</li>{{/if}}',
priceLiTemplate,
'<li><b>' + r.BookPublicationDate + '</b>${PublicationDate}</li>',

'{{if SalesRank}}<li><b>' + r.SalesRank + '</b>' + r.SalesRankValue + '</li>{{/if}}', /* ここを消せばSalesRank（商品ランキング）が消えるやで */

'<li><b>${Binding}</b>' + r.NumberOfPagesValue + '</li>',
'<li><b>ISBN-10</b>${ISBN}</li>', /* ここを消せばISBN-10（10桁書籍コード）が消えるやで */

'<li><b>ISBN-13</b>${EAN}</li>', /* ここを消せばISBN-13（13桁書籍コード）が消えるやで */

'<li><b>' + r.BookPublisher + '</b>${Publisher}</li>',
'</ul>',

/* 価格非表示 */
.amazonjs_listprice {
  display:none;
}
/* 参考価格非表示 */
.amazonjs_price {
  display:none;
}