トップバー広告(PC)

ワードプレスブログ 世界貢献的おやくだち情報

【楽天&ヤフーボタン追加!】Amazon Associates Link Builderのカスタマイズ(アマゾンアソシエイツリンクビルダーって長いよね)

2018年10月13日

すぐHTMLとCSSをコピペしてカスタマイズする!!

 

アソシエイツリンクビルダーーーっ!!!!

2020年初頭、「公式プラグインなのにぶっつり稼働停止した魔の迷惑プラグイン」のお話でした!以上解散!

[amazon_link asins='4063959376' template='NEET-the-AAB' store='amenohabakiri-22' marketplace='JP' link_id='6e7afd25-be82-11e8-bc52-6ff12d44bccc']

スマホからとてもきれいに映える点はGOOD

[amazon_link asins='4334075061,4063959376,B0756RY8FQ,4334776841' template='NEET-the-AAB' store='amenohabakiri-22' marketplace='JP' link_id='5b27f05a-be82-11e8-8eb6-e923204b1318']

複数選択するとスライダーが出現

これはちょっとベンリかもマトメたいときなどに※でもコレってJS使ってるんじゃないのかい

[amazon_link asins='B07BK152YT' template='a-card' store='amenohabakiri-22' marketplace='JP' link_id='6e323c14-c33c-11e8-8f6e-17ce0d2d5c6e'] [amazon_link asins='4088908961' template='a-card-solid' store='amenohabakiri-22' marketplace='JP' link_id='1c2747bb-bf08-11e8-8dc6-3f4b6b9a8605'] [amazon_link asins='B07C3Z9RM5' template='movie-card' store='amenohabakiri-22' marketplace='JP' link_id='7963e072-d2f1-11e8-b3e4-55e640e15969']

+ シンプル版のコピペ(クリックでおーぷん)

 

HTML

<!--------------------------------

(HTML)あまリンクビルダー

--------------------------------->
{{#Items}}
<div class="aarb_item" id="{{ID}}">

<!--謎のタイトル無効化中…
<div class="pc-ad-header">{{#AalbHeader}}{{#MarketplaceJP}}Amazon.co.jpで買う{{/MarketplaceJP}}{{/AalbHeader}}</div>
…謎のタイトル無効化中-->

{{#Item}}
{{#aalb}}
<!-- 画像 -->
<div class="aarb_image">
<a href="{{DetailPageURL}}" class="aarb_link" data-role="aarb_product" data-asin="{{ASIN}}" title="{{Title}}" target="_blank">
<img src="{{MediumImageURL}}" srcset="{{LargeImageURL}}" alt="{{Title}}"></a>
</div>

<!-- info開始 --><div class="aarb_info">

<!-- ネーム -->
<span class="aarb_title" ><a href="{{DetailPageURL}}" class="aarb_link" data-role="aarb_product" data-asin="{{ASIN}}" title="{{Title}}" target="_blank">{{Title}}</a></span>

<!-- 備考列 -->
<ul>
<!-- メーカー名が設定されている場合はメーカー名を表示する(書籍の場合は著者となる) -->
{{#By}}
<li>
{{By}}
</li>
{{/By}}
<!-- 在庫が存在する場合は価格・定価・AmazonPrime対象有無を表示 -->
{{#InStock}}
<li>
<b>価格: </b> <span class="aarb_price">{{CurrentPrice}}</span> {{#Saving}} <del>{{StrikePrice}}</del> {{/Saving}} {{#Prime}}<i class="icon-prime-all"></i>{{/Prime}}
</li>
{{/InStock}}
<!-- 販売者が設定されている場合は販売者を表示する -->
{{#Merchant}}
<li>
<b>販売者: </b>{{Merchant}}
</li>
{{/Merchant}}
</ul>

<!--( 全体設定用)ボタン始め--><div class="bottom-00">

<!-- あまリンクボタン-->
<span class="aarb_button_00"><a href="{{DetailPageURL}}" rel="nofollow"> Amazonでチェック</a></span>

<!-- 楽天リンクボタン-->
<!--無効化中…
<span class="rakuten_button_00"><a href="https://hb.afl.rakuten.co.jp/hgc/自分のアフィリエイトID/?pc=https://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=https://m.rakuten.co.jp/" target="_blank" rel="nofollow"> 楽天でチェック </a></span>
…無効化中-->

<!-- ヤフーショッピングリンクボタン-->
<!--無効化中…
<span class="yahoo_button_00"><a href="//ck.jp.ap.valuecommerce.com/servlet/referral?sid=自分のID(sid)&pid=自分のID(pid)&vc_url=http%3A%2F%2Fsearch.shopping.yahoo.co.jp%2Fsearch%3Fp%3D${{Title}}" target="_blank" rel="nofollow" >ヤフーでチェック </a></span>
…無効化中-->

<!-- (※未使用だけど)ボタン閉じ--></div>

<!-- info閉じ --></div>

<div class="aarb_footer"></div>
{{/aalb}}
{{/Item}}
</div>
{{/Items}}

CSS

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

(CSS)あまリンクビルダー

---------------------------------*/
/*aarb Associates Link Builder*/
.aarb_item {
font-size: 14px;
padding: 10px 10px 5px; /* 内の余白 */
margin: 20px 0px; /* 外の余白 */
position: relative;
display: block;
color: #302705; /* (ある場合)謎のタイトル色 */
border: 1px solid #f9b625; /* ボックスの枠色 */
}

.aarb_item a {
color: #f9b625; /* 商品名タイトル色 */
text-decoration: none;
padding-top: 10px;
font-size: 15px;
}
.aarb_item a:hover {
color: #e5ac29; /* オン時-商品名タイトル色 */
}
.aarb_item * {
margin: 0;
padding: 0;
border: 0;
}
.aarb_item .aarb_image {
display: block;
float: left;
margin-right: 10px;
width:112px;
height:160px;
text-align:center;
}
.aarb_item .aarb_image img {
width: auto;
height: auto;
max-width: 100%;
max-height:100%;
}
.aarb_item .aarb_info {
display: block;
overflow: hidden;
margin-left: 122px;
}
.aarb_item amp-img{
display: inline-block;
width: 100%;
height:100%;
}
.aarb_item .aarb_info .aarb_title {
margin: 0 0 5px;
padding: 0;
font-size: 1.2em;
font-weight: bold;
clear: none;
border: none;
}
.aarb_item .aarb_info ul {
list-style: none;
margin: 0;
padding: 0;
font-size: 12px; /* 備考文字サイズ */
color: #635b36; /* 備考文字色 */
}
.aarb_item .aarb_info ul li {
list-style: none;
line-height: 1.5em;
font-size: 1em;
margin: 0;
padding: 0;
font-size: 12px; /* 備考文字サイズ */
color: #635b36; /* 備考文字色 */
}

/* サブ項目 */
.aarb_item .aarb_info ul li b {
margin-right: .5em;
color: #635b36; /* サブ項目タイトル色 */
font-size: 12px; /* 文字サイズ */
font-weight: normal;
}
.aarb_item .aarb_info .aarb_price {
color: #635b36; /* 現在値 */
font-size: 12px; /* 文字サイズ */
}
.aarb_item .aarb_info .aarb_price span {
color: #666;
margin-left: .5em;
}
.aarb_item .aarb_info .aarb_prime {
position: absolute;
}
.aarb_item .aarb_review {
padding: 0;
width: 100%;
height:150px;
}
.aarb_item .aarb_footer {
clear: both;
}
.aarb_footer {
margin-bottom: 20px;
}
.aarb_book .aarb_info ul,
.aarb_music .aarb_info ul {
margin-top: 0.5em;
}
.aarb_book .aarb_info ul li,
.aarb_music .aarb_info ul li {
line-height: 1.6em;
}

/* (a)ぼたんデザイン */
.aarb_button_00 a{
width: auto; /* ボタン幅 */
display: block; /* 並び */
color: #fff; /* 文字色 */
background: #ffc132; /* 背景色 */
font-size: 14px; /* 文字サイズ */
padding: 5px 15px 5px; /* 余白 */
border-radius: 5px; /* 丸くしてる */
margin-top: 20px; /* 上余白 */
margin-bottom: 0px; /* 下余白 */
text-align: center;
font-weight: bold; /* 文字太さ */
text-decoration:none; /* リンク線消し */
}
.aarb_button_00 a:hover { /* マウスオンのとき */
color: #e5ad2b; /* オン時-文字色 */
background: #ffe175; /* オン時-背景色 */
transition: 0.5s; /* マウスオーバー時の時間差 */
}
.aarb_button_00 a:before {
content: "\f270"; /* 先頭につくWEBアイコン */
font-family: "fontawesome";
padding:10px 4px; /* 余白 */
font-size:14px; /* サイズ */
}

/* (楽天)ぼたんデザイン */
.rakuten_button_00 a {
width: auto; /* ボタン幅 */
display: block; /* 並び */
color: #fff; /* 文字色 */
background: #ed687c; /* 背景色 */
font-size: 14px;
padding: 5px 15px 5px;
border-radius: 5px;
margin-top: 10px;
text-align: center;
font-weight: bold; /* 文字太さ */
text-decoration:none; /* リンク線消し */
}
.rakuten_button_00 a:hover {
color: #a8526c; /* ウメモチ */
background: #f79bb6; /* カシワサクラモチ */
transition: 0.5s ; /* マウスオーバー時の時間差 */
}
.rakuten_button_00 a:before {
content: "\f07a"; /* 先頭につくアイコン */
font-family: "fontawesome";
padding:10px 4px; /* 余白 */
font-size:14px; /* サイズ */
}

/* (ヤフー)ぼたん */
.yahoo_button_00 a {
width: auto; /* ボタン幅 */
display: block; /* 並び */
color: #fff; /* 文字色 */
background: #b89ae0; /* 背景色 */
font-size: 14px;
padding: 5px 15px 5px;
border-radius: 5px;
margin-top: 10px;
text-align: center;
font-weight: bold; /* 文字太さ */
text-decoration:none; /* リンク線消し */
}
.yahoo_button_00 a:hover {
color: #402d59; /* オン時-文字色 */
background: #d9c6f2; /* オン時-背景色 */
transition: 0.5s ; /* マウスオーバー時の時間差 */
}
.yahoo_button_00 a:before {
content: "\f19e"; /* 先頭につくアイコン */
font-family: "fontawesome";
padding:10px 4px; /* 余白 */
font-size:14px; /* サイズ */
}

.aarb_info img{
margin-bottom: 5px;
padding: 0;
border: 0;
}
@media (max-width: 720px) {
.aarb_item .aarb_info {
margin-bottom: 10px;
}
.aarb_item .aarb_review {
display: none;
}
}
@media (max-width: 480px) {
.aarb_item img {
width: 60px;
max-width: 60px;
}
.aarb_item .aarb_info {
margin-left: 70px;/* !important;*/
}
.aarb_item .aarb_info .aarb_title a {
font-size: 0.9em;
}
.aarb_item .aarb_info ul li {
font-size: 0.9em;
}
.aarb_item .aarb_review {
display: none;
}
}
.pc-ad-header{
font-size: 16px;
font-weight:bolder;
border-bottom: double 5px #FFC778;
}
.icon-prime-all {
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;
display: inline-block;
margin-top: -1px;
vertical-align: middle;
background-position: -192px -911px;
background-size: 560px 938px;
width: 52px;
height: 15px;
}

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

 

アマゾンJS風のシンプル版も

 

アマゾンリンクビルダー?

アマゾンアソシエイトリンクビルダー?

 

とにかく中途半端に長い名称をもったアマゾンのビルダーさん(?)が尼リンクアフィリプラグイン戦線に名乗りを上げて早2年ということでございます。

 

「AmazonJSより公式プラグインだから安心かも」

 

みたいな需要をがっつし掴んでいそうでいないAmazonの公式プラグイン。

 

シェア的にいうと世間では「リンカー」でありますとか「WPアソシエイトポストR2」でありますとか優秀高機能なプラグインが出ている昨今ですからどうなることやらわかりませんがね。

 

まあつまりアソシエイトリンクを貼るのに有名な「AmazonJS」では「更新されてない」&「AMP対応できないだろう」ということで戦国時代が到来しているとか。

※アマビルの場合テンプレートを豊富に用意できるのが多少のメリットかね。あと公式というところ。デメリットは検索能力がそこまで高くない。公式なのに。

 

自分はめんどくさいので当分JSちゃんにお世話になるけれど(URL検索できるから自転車の細かい規格を紹介するのにいまだ便利)、眺めていると面白かったのでビルディングに勤しむ我らがAmazonの公式プラグをカスタマイズしてみた。

 

Amazonのリンクしか使わない。

(鬼の形相)

 

というスマートなアフィリエイトスタイルには、シンプルに使えて良いかもしれない。カスタマイズやコードの管理は一番ラクだと思うし。初心者にもすぐ扱えるだろう。

 

でも楽天市場のリンクもいれてみた。

ほんでヤフーショッピングのリンクもいれてみた。

いろいろ大丈夫なんだろうか?

 

※ただし楽天などのアフィリを真面目にやるつもりならリンカーやWPアソシエイトポストR2が無難。検索ワードを用いて商品が出せるので精度が違う。

(ヤフーは自前の検索エンジンを動かしていただけあってテキトーなワードでも何かしら紹介してくれるけど)

 

 

アソシエイツリンクビルダー

アマゾンアソシエイトリンクビルダーのカスタマイズ
アマゾンアソシエイトリンクビルダー

プラグイン・「アマゾンアソシエイトリンクビルダー」WordPress公式  

公式説明・「WordPressプラグイン Amazon Link Builder の使い方」アソシエイト・HOW TO ガイド 

アソシエイツリンクビルダーの使い方はサクッと

ご紹介くださるサイトさま

参考・「Amazon Associates Link BuilderでAmazonのアフィリエイト商品リンクを簡単作成!」まほろぐ さま

参考・「Amazon Associates Link Builder プラグインでアソシエイトリンクを出す」デフよん さま

参考・「【Simplicity】Amazon Associates Link Builderをカスタマイズしてみた」Tのジレンマ さま

参考・「コピペでOK!Amazon Link Builderを導入!AmazonJSっぽいデザインを作成した。」俺のデジモノ手記さま さま

参考・「WordPressでAmazon Associates Link Builder Amazonアフィリエイト公式プラグイン」auto-ts.net さま

参考・「【WordPress】【Plugin】Amazon商品リンクをカスタマイズできる「Amazon Associates Link Builder」(Ver.1.4.6)の使い方 その2」Androidアプリの海 さま

 

カスタマイズ自体もお世話に

m(_ _)m

 

カンタン設定の流れ

 

プラグインをインストールして有効化

・そしてワードプレス画面左のメニューに出現する「Associates Link Builder」から各設定を開始する。

 

「Settings(セッティング)」で必要情報登録

「国」「トラッキングID」を登録。
「国」(JPでしょう)と「アソシエイトID」(~22というやつ)を登録
「国」(JPでしょう)と「アソシエイトID」(~22というやつ)を登録
「アクセスキー」「シークレットキー」を登録。
「アクセスキー」と「シークレットキー」を登録
「アクセスキー」と「シークレットキー」を登録

取得方法参考・「AmazonアソシエイトのアクセスキーIDとシークレットキー(シークレットアクセスキー)を取得する方法」WPアソシエイトポストR2 さま

※AmazonJS使ってるならワードプレス内のプラグインの設定画面で全て情報が載ってるからそれをコピペすれば良いね。

 

設定はカンタン過ぎですな。

m(_ _)m

 

テンプレートをカスタムして使う

まずデフォルトテンプレをコピペして土台に使う

「Templates(テンプレート)」から向かおう!

※やらなくてもよい 「ProductCarousel」なるデフォルトテーマから全てコピペや!
プロジェクトメリーゴーランドみたいな愉快な名称のテンプレ。商品が回転するような楽しさ(真顔)

「HTML」(コンテンツ×骨組み)と「CSS」(デザイン×ファッション)の2つがあるから全てコピペでどこかに移しておこう。メモ帳でもいいけど。コードをイジれるサイトがオススメ。

神サイト・「コードペンというサイトがオススメ(原文のページを表示させてから遊ぼう)」codepenn 

キーボードの「ctrl」と「A」で全コピできるぞ

「Create new template(ニューテンプレ)」で新テーマ作成
クリエイトニューテンプレートなどという項目を駆使して新作テーマの用意
テンプレ名は英数字じゃないとエラーでダメ
( ̄ー ̄)bグッ!
※やらなくてもよい あとはさっき奪ったやつをコピペ
( ̄ー ̄)bグッ!

 

コレでカスタマイズの土台は整いました。

m(_ _)m

 

 ※というかこの記事でコピペするコードは全て書いてるのでデフォルトテーマから奪ってくる必要はなにもない

m(_ _)m

 

アソシエイトビルダーのデザインをカスタマイズ

アマゾンリンクをきれいに貼るAmazon公式プラグイン
やはり王道の配色

 

HTMLCSSの2つをコピペ

 

HTML

+ クリックでおーぷん!

HTML

<!-- Ad Template with Carousel Layout-->
{{#Items}} <!--Section tag for iterating through the list of items-->
<div class="aalb-product-carousel-unit" id="{{ID}}">

<!-- ↓この行が謎のタイトル文のはじまり-->

<div class="aalb-pc-ad-header">{{#AalbHeader}}Amazon.co.jp(ここが文字列){{/AalbHeader}}</div> 

<!-- ↑デフォルトはHタグという自己主張の強さだった-->

<div class="aalb-pc-wrapper">
<div class="aalb-pc-product-container">
<ul class="aalb-pc-product-list">
{{#Item}} <!-- Section tag for beginning of information on one item -->
{{#aalb}} <!-- Section tag for picking up information on attributes for the item -->
<li class="aalb-pc-product">
<div class="aalb-pc-product-image">
<div class="aalb-pc-product-image-wrapper">
<a href="{{DetailPageURL}}" title="{{Title}}" target="_blank" rel="nofollow"> <!--Individual attributes are provided as variable tags as {{[[attribute]]}}. Check documentation for list of supported variable tags.-->
<img src="{{MediumImageURL}}" srcset="{{LargeImageURL}}" alt="{{Title}}" />
{{#SavingPercent}} <!-- The section tag ensures that percentage savings is displayed only if it is available -->
<span class="aalb-pc-percent-off">
-{{SavingPercent}}%
</span>
{{/SavingPercent}}
</a>
</div>
</div>

<!-- 商品名とリンク -->
<div class="aalb-pc-product-details">
<div class="aalb-pc-product-title">
<a href="{{DetailPageURL}}" title="{{Title}}" target="_blank" rel="nofollow">
{{Title}}
</a>
</div>

<!-- 追加はじめ (全部機能してるかは不明) -->
 <!-- メーカー --> <span class="sub">{{By}}</span>
 <!-- アーティスト --> <span class="sub">{{Artist}}</span>
 <!-- ラベル --> <span class="sub">{{Label}}</span>
 <!-- クリエイター --> <span class="sub">{{Creator}}</span>
 <!-- ディレクター --> <span class="sub">{{Director}}</span>
 <!-- 発売日 --> <span class="sub">{{ReleaseDate}}</span>
<!-- 追加ここまで (全部機能してるかは不明)-->

<div class="aalb-pc-product-offer-price">
<!-- (価格の項目)The section tag for different marketplaces ensures localization of static text. -->
価格: <span class="aalb-pc-product-offer-price-value">{{CurrentPrice}}</span>
</div>
{{#StrikePrice}} <!-- The section tag ensures that strike price is displayed only if it is available -->
<div class="aalb-pc-product-list-price">
<!-- (参考価格の項目)The section tag for different marketplaces ensures localization of static text. -->
参考価格: <span class="aalb-pc-product-list-price-value">{{StrikePrice}}</span>
</div>
{{/StrikePrice}}
{{#Prime}} <!-- The section tag ensures that prime icon is displayed only if it is available -->
<div class="aalb-pc-product-prime-icon">
<i class="icon-prime-all"></i>
</div>
{{/Prime}}
</div>

<!-- あまリンクボタン-->

<div class="amazon_button"><a href="{{DetailPageURL}}" title="{{Title}}" target="_blank" rel="nofollow"> Amazonレビューを見る </a> </div>

<!-- 楽天リンクボタン-->

<div class="rakuten_button"><a href="https://hb.afl.rakuten.co.jp/hgc/自分のアフィリエイトID/?pc=https://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=https://m.rakuten.co.jp/" target="_blank" rel="nofollow"> 楽天市場 </a></div>

<!-- ヤフーショッピングリンクボタン-->

<!--無効化中…
<span class="yahoo_button"><a href="//ck.jp.ap.valuecommerce.com/servlet/referral?sid=自分のID(sid)&pid=自分のID(pid)&vc_url=http%3A%2F%2Fsearch.shopping.yahoo.co.jp%2Fsearch%3Fp%3D${{Title}}" target="_blank" rel="nofollow" >ヤフーでチェック </a></span>
…無効化中-->

</li>
{{/aalb}}
{{/Item}}
</ul>
</div>
</div>
<a href="javascript:void(0);" class="aalb-pc-btn-prev">‹</a>
<a href="javascript:void(0);" class="aalb-pc-btn-next">›</a>
</div>
{{/Items}}

<script>
jQuery(document).ready(function() {

var CONSTANTS = {
productMinWidth : 185,
productMargin : 20
};

var $adUnits = jQuery('.aalb-product-carousel-unit');
$adUnits.each(function() {
var $adUnit = jQuery(this),
$wrapper = $adUnit.find('.aalb-pc-wrapper'),
$productContainer = $adUnit.find('.aalb-pc-product-container'),
$btnNext = $adUnit.find('.aalb-pc-btn-next'),
$btnPrev = $adUnit.find('.aalb-pc-btn-prev'),
$productList = $productContainer.find('.aalb-pc-product-list'),
$products = $productList.find('.aalb-pc-product'),
productCount = $products.length;

if (!productCount) {
return true;
}

var rows = $adUnit.find('input[name=rows]').length && parseInt($adUnit.find('input[name=rows]').val(), 10);
var columns = $adUnit.find('input[name=columns]').length && parseInt($adUnit.find('input[name=columns]').val(), 10);

if( columns ) {
var productContainerMinWidth = columns * (CONSTANTS.productMinWidth + CONSTANTS.productMargin) + 'px';
$adUnit.css( 'min-width', productContainerMinWidth );
$productContainer.css( 'min-width', productContainerMinWidth );
$products.filter( ':nth-child(' + columns + 'n + 1)' ).css( 'clear', 'both' );
}

if (rows && columns) {
var cutOffIndex = (rows * columns) - 1;
$products.filter(':gt(' + cutOffIndex + ')').remove();
}

function updateLayout() {
var wrapperWidth = $wrapper.width();
var possibleColumns = columns || parseInt( wrapperWidth / (CONSTANTS.productMinWidth + CONSTANTS.productMargin), 10 );
var actualColumns = columns || possibleColumns < productCount ? possibleColumns : productCount;

/**
* The actual columns can be zero when the wraperwidth is less than sum of CONSTANTS.productMinWidth and
* CONSTANTS.productMargin.The parseInt will use floor function and converts any value less than 1 to
* zero.Therefore making actual columns 1 .
**/
if( actualColumns == 0 ) {
actualColumns = 1;
}

var productWidth = parseInt( wrapperWidth / actualColumns, 10 ) - CONSTANTS.productMargin;

$products.css( 'width', productWidth + 'px' );

/**
* Removing the Carousel navigation button when the number of products selected by admin is less
* than the actual columns (the number of products) can be shown on screen
**/
if( productCount > actualColumns ) {
$btnNext.css( 'visibility', 'visible' ).removeClass( 'disabled' ).unbind( 'click' );
$btnPrev.css( 'visibility', 'visible' ).removeClass( 'disabled' ).unbind( 'click' );
}
$productContainer.jCarouselLite( {
btnNext : '#' + $adUnit.attr( 'id' ) + ' .aalb-pc-btn-next',
btnPrev : '#' + $adUnit.attr( 'id' ) + ' .aalb-pc-btn-prev',
visible : actualColumns,
circular: false
} );

}

updateLayout();
jQuery(window).resize(updateLayout);
});
});

/*!
* jCarouselLite - v1.1 - 2014-09-28
* http://www.gmarwaha.com/jquery/jcarousellite/
* Copyright (c) 2014 Ganeshji Marwaha
* Licensed MIT (https://github.com/ganeshmax/jcarousellite/blob/master/LICENSE)
*/

!function(a){a.jCarouselLite={version:"1.1"},a.fn.jCarouselLite=function(b){return b=a.extend({},a.fn.jCarouselLite.options,b||{}),this.each(function(){function c(a){return n||(clearTimeout(A),z=a,b.beforeStart&&b.beforeStart.call(this,i()),b.circular?j(a):k(a),m({start:function(){n=!0},done:function(){b.afterEnd&&b.afterEnd.call(this,i()),b.auto&&h(),n=!1}}),b.circular||l()),!1}function d(){if(n=!1,o=b.vertical?"top":"left",p=b.vertical?"height":"width",q=B.find(">ul"),r=q.find(">li"),x=r.size(),w=x<b.visible?x:b.visible,b.circular){var c=r.slice(x-w).clone(),d=r.slice(0,w).clone();q.prepend(c).append(d),b.start+=w}s=a("li",q),y=s.size(),z=b.start}function e(){B.css("visibility","visible"),s.css({overflow:"hidden","float":b.vertical?"none":"left"}),q.css({margin:"0",padding:"0",position:"relative","list-style":"none","z-index":"1"}),B.css({overflow:"hidden",position:"relative","z-index":"2",left:"0px"}),!b.circular&&b.btnPrev&&0==b.start&&a(b.btnPrev).addClass("disabled")}function f(){t=b.vertical?s.outerHeight(!0):s.outerWidth(!0),u=t*y,v=t*w,s.css({width:s.width(),height:s.height()}),q.css(p,u+"px").css(o,-(z*t)),B.css(p,v+"px")}function g(){b.btnPrev&&a(b.btnPrev).click(function(){return c(z-b.scroll)}),b.btnNext&&a(b.btnNext).click(function(){return c(z+b.scroll)}),b.btnGo&&a.each(b.btnGo,function(d,e){a(e).click(function(){return c(b.circular?w+d:d)})}),b.mouseWheel&&B.mousewheel&&B.mousewheel(function(a,d){return c(d>0?z-b.scroll:z+b.scroll)}),b.auto&&h()}function h(){A=setTimeout(function(){c(z+b.scroll)},b.auto)}function i(){return s.slice(z).slice(0,w)}function j(a){var c;a<=b.start-w-1?(c=a+x+b.scroll,q.css(o,-(c*t)+"px"),z=c-b.scroll):a>=y-w+1&&(c=a-x-b.scroll,q.css(o,-(c*t)+"px"),z=c+b.scroll)}function k(a){0>a?z=0:a>y-w&&(z=y-w)}function l(){a(b.btnPrev+","+b.btnNext).removeClass("disabled"),a(z-b.scroll<0&&b.btnPrev||z+b.scroll>y-w&&b.btnNext||[]).addClass("disabled")}function m(c){n=!0,q.animate("left"==o?{left:-(z*t)}:{top:-(z*t)},a.extend({duration:b.speed,easing:b.easing},c))}var n,o,p,q,r,s,t,u,v,w,x,y,z,A,B=a(this);d(),e(),f(),g()})},a.fn.jCarouselLite.options={btnPrev:null,btnNext:null,btnGo:null,mouseWheel:!1,auto:null,speed:200,easing:null,vertical:!1,circular:!0,visible:3,start:0,scroll:1,beforeStart:null,afterEnd:null}}(jQuery);

</script>

 

これをそのままコピペで「HTML」の部分に貼り付けよう。

ちょっと長くてごめん

 

※【バックアップは取ってからイジろう】…あとは好きにいじってもらってもよいが(説明文を付けてあるからそんなこんなで推察しつつトライ・アンド・エラーしつつ)、HTMLは間違えるとアソシエイトリンクが表示されない状況になる。(このプラグで挿入した全て)PHPのファンクションでミスってサイト全体が白くなるより全然マシな可愛いものだけど一応気をつけてください。いじる前にコピペしてバックアップし、復旧可能な状態でやろう。

 

CSS

+ クリックおーぷん!

CSS

.aalb-product-carousel-unit {
/*(ぼっくすぜんたい)Enable this border property to have a border around the ad unit*/
border: 1px solid #e0e0e0; /* ボックスの枠色 */
background: #fff; /* ボックスの背景色 */
margin-top: 1%; /* 上余白 */
margin-bottom: 2%; /* 下余白 */
}

/* (なかのこと)Actual styles start below */
.aalb-product-carousel-unit {
position: relative; /* コンテンツの位置 */
overflow: hidden; /* はみ出た要素の処遇 */
padding: 22px 40px; /* 余白 */
}

.aalb-product-carousel-unit * {
box-sizing: content-box;
box-shadow: none;
font-family: Arial, Helvetica, sans-serif;
margin: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
margin-top: 0;
outline: 0;
padding: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
}

.aalb-product-carousel-unit.pull-left {
float: left;
}

.aalb-product-carousel-unit.pull-right {
float: right;
}

.aalb-product-carousel-unit.pull-left .aalb-pc-product, .aalb-product-carousel-unit.pull-right .aalb-pc-product {
width: 185px !important;
}

.aalb-product-carousel-unit a {
box-shadow: none !important;
}

.aalb-product-carousel-unit a:hover {
color: #c45500;
}

/* 謎の自己主張タイトル*/

.aalb-product-carousel-unit .aalb-pc-ad-header { 
padding-left: 3px; /* 左余白*/
padding-bottom: 3px; /* 下余白*/
font-size: 14px; /* 謎の自己主張タイトルサイズ*/
font-weight: normal;
color: #3f2f00; /* 謎の自己主張タイトル色*/
font-family: Impact; /* 謎の自己主張タイトルのフォント種類*/
}

/* 謎のライン*/

/*(今は消してるが、ココと~

.aalb-product-carousel-unit .aalb-pc-product-list {
 border-top: 1px solid #3f2f00;
 overflow: hidden;
}

~ココの2行部分を消せば表示される)*/

.aalb-product-carousel-unit .aalb-pc-product {
min-width: 185px;
max-width: 385px;
height: auto !important;
padding-top: 22px;
padding-bottom: 22px;
margin-left: 10px;
margin-right: 10px;
float: left;
list-style: none;
text-align: center;
}

.aalb-product-carousel-unit .aalb-pc-product-image {
display: table;
width: 150px;
height: 150px;
margin: 0 auto;
text-align: center;
}

.aalb-product-carousel-unit .aalb-pc-product-image-wrapper {
display: table-cell;
vertical-align: middle;
}

.aalb-product-carousel-unit .aalb-pc-product-image a {
position: relative;
display: inline-block;
vertical-align: middle;
}

.aalb-product-carousel-unit .aalb-pc-product-image img {
max-width: 150px;
max-height: 150px;
vertical-align: bottom;
}

.aalb-product-carousel-unit .aalb-pc-percent-off {
display: block;
width: 32px;
height: 27px;
padding-top: 5px;
position: absolute;
top: -16px;
right: -16px;
color: #ffffff;
font-size: 12px;
text-align: center;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
border-radius: 50%;
background-color: #a50200;
background-image: -webkit-linear-gradient(top, #cb0400, #a50200);
background-image: linear-gradient(to bottom, #cb0400, #a50200);
}

.aalb-product-carousel-unit.hide-percent-off-badge .aalb-pc-percent-off {
display: none;
}

.aalb-product-carousel-unit .aalb-pc-product-details {
display: inline-block;
max-width: 100%;
margin-top: 11px;
text-align: left;
}

.aalb-product-carousel-unit .aalb-pc-product-title a { /* 商品タイトル */
display: block;
width: 100%;
overflow: hidden;
/* white-space: nowrap; (商品タイトル文字を全文記載するためにコメントアウトしている)*/
/* text-overflow: ellipsis; (コメントアウト=無効化)*/
font-size: 15px;
line-height: 1.5; /* 行間 */
color: #3f2f00; /* 商品タイトル文字色 */
text-decoration: none;
font-weight: bold; /* タイトル文字の太さ */
}
.aalb-product-carousel-unit .aalb-pc-product-title a:hover {
color: #7c7056; /* 商品タイトル-オン文字色 */
}

.aalb-product-carousel-unit.no-truncate .aalb-pc-product-title a {
text-overflow: initial;
white-space: initial;
}

/* サブ情報 */
.sub {
font-size: 12px;
color: #998e83; /* その他の備考欄(メーカーなど新規追加分全て)文字色 */
}

.aalb-product-carousel-unit .aalb-pc-product-offer-price {
font-size: 12px;
color: #998e83; /* 価格文字色 */
}

.aalb-product-carousel-unit .aalb-pc-product-offer-price-value {
color: #543f04; /* 現在値文字色 */
/*font-weight: bold; /* 太さ(コメントアウト中) */
}

.aalb-product-carousel-unit .aalb-pc-product-list-price {
font-size: 12px;
color: #998e83; /* 参考価格文字色 */
}

.aalb-product-carousel-unit .aalb-pc-product-list-price-value {
text-decoration: line-through;
}

.aalb-product-carousel-unit .aalb-pc-product-prime-icon .icon-prime-all {
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;
display: inline-block;
margin-top: -1px;
vertical-align: middle;
background-position: -192px -911px;
background-size: 560px 938px;
width: 52px;
height: 15px;
}

.aalb-product-carousel-unit .aalb-pc-product-offer-price,
.aalb-product-carousel-unit .aalb-pc-product-list-price,
.aalb-product-carousel-unit .aalb-pc-product-prime-icon {
display: inline-block;
margin-right: 2px;
}

.aalb-product-carousel-unit .aalb-pc-btn-prev,
.aalb-product-carousel-unit .aalb-pc-btn-next {
position: absolute;
top: 50%;
margin-top: -52px;
display: block;
visibility: hidden;
width: 43px;
height: 105px;
z-index: 2;
line-height: 105px;
background: #ffffff; /* スライドラインの背景色*/
color: #e0e0e0; /* スライド矢印-オフ色*/
font-size: 35px;
text-align: center;
text-decoration: none;
border: 1px solid #e0e0e0; /* スライドラインの枠線色*/
-webkit-box-shadow: 0 0 4px #e9e9e9;
box-shadow: 0 0 4px #e9e9e9;
}

.aalb-product-carousel-unit .aalb-pc-btn-prev:hover,
.aalb-product-carousel-unit .aalb-pc-btn-next:hover {
color: #fff; /* スライド矢印-オン色*/
border: 1px solid #ffc132; /* スライドラインの枠線-オン色*/
background: #ffc132; /* スライドラインの背景-オン色*/
transition: 0.5s ; /* マウスオーバー時の時間差 */
}

.aalb-product-carousel-unit .aalb-pc-btn-prev:focus,
.aalb-product-carousel-unit .aalb-pc-btn-next:focus {
outline: none;
}

.aalb-product-carousel-unit .aalb-pc-btn-prev {
left: 0;
border-left: 0;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
}

.aalb-product-carousel-unit .aalb-pc-btn-next {
right: 0;
border-right: 0;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.aalb-product-carousel-unit .aalb-pc-product-prime-icon .icon-prime-all {
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;
display: inline-block;
margin-top: -1px;
vertical-align: middle;
background-position: -192px -911px;
background-size: 560px 938px;
width: 52px;
height: 15px;
}
}

/* Amazonぼたん */
.amazon_button a {
border: 1px solid #59503d; /* メイサクチョコラテ */
color: #59503d; /* メイサクチョコラテ */
background: #fff; /* クリア */
font-size: 14px;
padding: 7px 15px 5px;
border-radius: 5px;
margin-top: 10px;
width: auto;
text-align: center;
display: block;
font-weight: bold; /* 文字太さ */
text-decoration:none; /* リンク線消し */
}
.amazon_button a:hover {
border: 1px solid #eae6d5; /* ラテ */
color: #7c7056; /* メイサクモカ */
background: #eae6d5; /* ラテ */
transition: 0.5s ; /* マウスオーバー時の時間差 */
}
.amazon_button a:before {
content: "\f270"; /* 先頭につくWEBアイコン */
font-family: "fontawesome";
padding:10px 4px; /* 余白 */
font-size:14px; /* サイズ */
}

/* 楽天ぼたん */
.rakuten_button a {
border: 1px solid #ce6786; /* ベニモチ */
color: #ce6786; /* ベニモチ */
background: #fff; /* クリア */
font-size: 14px;
padding: 7px 15px 5px;
border-radius: 5px;
margin-top: 10px;
width: auto;
text-align: center;
display: block;
font-weight: bold; /* 文字太さ */
text-decoration:none; /* リンク線消し */
}
.rakuten_button a:hover {
border: 1px solid #ffd6e2; /* カシワサクラモチ */
color: #a8526c; /* ウメモチ */
background: #ffd6e2; /* カシワサクラモチ */
transition: 0.5s ; /* マウスオーバー時の時間差 */
}
.rakuten_button a:before {
content: "\f07a"; /* 先頭につくアイコン */
font-family: "fontawesome";
padding:10px 4px; /* 余白 */
font-size:14px; /* サイズ */
}

/* ヤフーぼたん */
.yahoo_button a {
border: 1px solid #8561b5; /* 枠色 */
color: #8561b5; /* 文字色 */
background: #fff; /* 背景色 */
font-size: 14px;
padding: 7px 15px 5px;
border-radius: 5px;
margin-top: 10px;
width: auto;
text-align: center;
display: block;
font-weight: bold; /* 文字太さ */
text-decoration:none; /* リンク線消し */
}
.yahoo_button a:hover {
border: 1px solid #d9c6f2; /* オン時-枠色 */
color: #402d59; /* オン時-文字色 */
background: #d9c6f2; /* オン時-背景色 */
transition: 0.5s ; /* マウスオーバー時の時間差 */
}
.yahoo_button a:before {
content: "\f19e"; /* 先頭につくアイコン */
font-family: "fontawesome";
padding:10px 4px; /* 余白 */
font-size:14px; /* サイズ */
}

 

これをそのままコピペで「CSS」の部分に貼り付けよう。

ちょっと長くてごめん

 

※【バックアップは取ってからイジろう】…あとは好きにいじってもらってもよいが(説明文を付けてあるからそんなこんなで推察しつつトライ・アンド・エラーしつつ)、CSSは間違えるとデザインが崩れる。PHPのファンクションでミスってサイト全体が白くなるより全然マシな可愛いものだけど一応気をつけてください。いじる前にコピペしてバックアップし、復旧可能な状態でやろう。

 

 

コピペが済んだらそのオリジナルテーマデフォルトのテーマに設定しておこう。

※「Settings(セッティング)」の項目のところから

バックアップコピーもとって控えて保管しておきたい

※プラグインの更新でオリジナルテーマが消えちゃうみたいだし

 

カスタマイズ解説

あとは各種カラーなどをカスタマイズしよう(Amazonボタンと楽天ボタンのデザインなどなど)

色コード参考・「世界の伝統色の名前とカラーコードが一目でわかるWEB色見本」WEB色大辞典 さま

WEBアイコン参考・「【保存版】Font Awesomeの使い方:Webアイコンフォントを使おう」サルワカ さま

※Amazonボタンと楽天ボタンはCSSの方の一番下にいれてあるので好きにイジろう

 

楽天やヤフーのリンクに自分のアフィリエイトIDを入れよう

楽天アフィID確認方法・「Posts tagged "アフィリエイトIDの確認方法"」楽天公式ブログ さま

ヤフーショッピングID確認参考・「Yahooショッピング用 pidとsidの取得方法」リンカー公式/おやこそだて さま

HTML側のコードにある楽天リンクの箇所の「自分のアフィリエイトID」という箇所に記載。ヤフーなら自分のID(sid)」&自分のID(pid)」という箇所にそれぞれ自分のIDを記載。

そうすれば多分イケる

※アマゾン側の商品名を楽天やヤフーで検索しているという状態なので完璧とは言い難いが(これはAmazonJSの救世主はじめ氏によってもたらされた技術を応用しているぞ感謝である)

 

ボタンが要らなければ
HTML

<!-- あまリンクボタン-->

<div class="amazon_button"><a href="{{DetailPageURL}}" title="{{Title}}" target="_blank" rel="nofollow"> Amazonレビューを見る </a> </div>

HTML

<!-- 楽天リンクボタン-->

<div class="rakuten_button"><a href="https://hb.afl.rakuten.co.jp/hgc/自分のアフィリエイトID/?pc=https://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=https://m.rakuten.co.jp/" target="_blank" rel="nofollow"> 楽天市場 </a></div>

HTML側の<!-- あまリンクボタン--><!-- 楽天リンクボタン-->の箇所を削除するなりコメントアウトするなりして無効化すればそれでOK。

 

ボタンのデザインはこんなところで一発変更
CSS

/* あまぞんぼたん */
.amazon_button a{
border: 1px solid #ffc132; /* 枠線 */
color: #ffc132; /* 文字色 */
background: #fff; /* 背景色 */
font-size: 14px; /* 文字サイズ */
padding: 7px 15px 5px; /* 各種余白関係↓ */
border-radius: 5px;
margin-top: 10px;
width: auto;
text-align: center;
display: block; /* 並び */
font-weight: bold; /* 文字太さ */
text-decoration:none; /* リンク線消し */
}
.amazon_button a:hover { /* マウスオンのとき */
border: 1px solid #ffc132; /* オン時-枠線 */
color: #fff; /* オン時-文字色 */
background: #ffc132; /* オン時-背景色 */
transition: 0.5s; /* マウスオーバー時の時間差 */
}
.amazon_button a:before {
content: "\f270"; /* 先頭につくWEBアイコン */
font-family: "fontawesome";
padding:10px 4px; /* 余白 */
font-size:14px; /* サイズ */
}

CSS

/* 楽天 */
.rakuten_button a {
border: 1px solid #c92424; /* 枠線 */
color: #c92424; /* 文字色 */
background: #fff; /* 背景色 */
font-size: 14px; /* 文字サイズ */
padding: 7px 15px 5px; /* 各種余白関係↓ */
border-radius: 5px;
margin-top: 10px;
width: auto;
text-align: center;
display: block; /* 並び */
font-weight: bold; /* 文字太さ */
text-decoration:none; /* リンク線消し */
}
.rakuten_button a:hover {
border: 1px solid #c92424; /* オン時-枠線 */
color: #fff; /* オン時-文字色 */
background: #c92424; /* オン時-背景色 */
transition: 0.5s; /* マウスオーバー時の時間差 */
}
.rakuten_button a:before {
content: "\f07a"; /* 先頭につくアイコン */
font-family: "fontawesome";
padding:10px 4px; /* 余白 */
font-size:14px; /* サイズ */
}

特にアイコンなどは「.amazon_button a:before {}」というような箇所を消せば消える。Amazonのマークは規約に反するとか文句言われることもあるみたいで。そうなったらここで一発消去可能なのでコントロールや管理がらくちんやで。

 

謎のタイトル文

このプラグだといきなり「なになにAmazon.CO.JP見参!!」みたいにそれもHタグで挿入されていたしかも2hである。アマゾンの商品がその記事の主体とでも言いたげな仕様。ここでは無難にdivタグにしといたけど、というか消しちゃったほうがスッキリするよ。一応フォントもカッコよくしてデザインのごとくしてみたけどさ。

 

謎のライン

その下にはコレまた謎のライン。一応消してあるけど(消えて無ければ消してもOK)、謎のタイトル分を出しておくなら合わせデザインとして残しても良いかも。CSSのほうでコメントアウトしてるのでその部分を消せば再出現だやったね。

 

メーカーなどの記載

デフォルトでは価格関係しか出現しないが、一応「任天堂」とか表記されるようにしている。でもCDなどのアーティストなどはなかなか表記されないね。ちゃんとした関数が設定できていないのだろうけどわからないのでしょうがない。公式に聞けば教えてくれるかも

 

分かる人用(追加や削除できそうな情報のクラス?)

{{ASIN}}: the Amazon Standard Identification Number for the product
{{Title}}: the title or name of the item
{{DetailPageURL}}: the URL for linking back to Amazon
{{LargeImageURL}}: large image URL
{{MediumImageURL}}: medium image URL
{{SmallImageURL}}: small image URL
{{By}}: name of the author, artist or brand
{{CurrentPrice}}: it’s the current price. If the price is not available, a link to Amazon will be shown instead
{{CurrentPriceValue}}: the current price in raw format
{{StrikePrice}}: the manufacturer’s suggested price
{{StrikePriceValue}}: the strike price in raw format
{{Saving}}: the reduction in the strike price
{{SavingPercent}}: saving in percentage
{{SavingValue}}: saving in raw format
{{Prime}}: indicates if the item is eligible for Prime
{{Merchant}}: returns Amazon if the item is sold and shipped by Amazon. No value for marketplace merchants
{{MinimumPrice}}: minimum price for a new item
{{MinimumPriceValue}}: minimum price in raw format
{{InStock}}: indicates if the product is in stock.

以下グーグル翻訳

{{ASIN}}:製品のAmazon標準識別番号
{{Title}}:アイテムのタイトルまたは名前
{{DetailPageURL}}:AmazonにリンクするためのURL
{{LargeImageURL}}:大きな画像のURL
{{MediumImageURL}}:中画像URL
{{SmallImageURL}}:小さな画像のURL
{{By}}:著者、アーティスト、ブランドの名前
{{CurrentPrice}}:現在の価格です。価格が利用できない場合は、代わりにAmazonへのリンクが表示されます
{{CurrentPriceValue}}:現在の価格をそのままの形式で返します
{{StrikePrice}}:メーカーの推奨価格
{{StrikePriceValue}}:未加工フォーマットのストライク価格
{{保存}}:ストライキ価格の引き下げ
{{SavingPercent}}:パーセンテージで保存する
{{SavingValue}}:元の形式で保存する
{{プライム}}:アイテムがプライムに適格かどうかを示します
{{Merchant}}:商品がAmazonで販売され出荷されている場合、Amazonを返します。マーケットプレイスの商人にとって価値がない
{{MinimumPrice}}:新しい商品の最低価格
{{MinimumPriceValue}}:ローフォーマットの最小価格
{{InStock}}:商品が在庫にあるかどうかを示します。

参考・「Link Builderは以下のタグを提供します」kinsta.com さま

 

とりあえずこんなところでたのんます。

 

ガチに備忘録

 

アマゾンJSは「URL検索ができる」という点でいまだ有能である。

 

スポンサーリンク/記事直下型2連装無職砲

プロフカードぼたん

-ワードプレスブログ, 世界貢献的おやくだち情報
-