WordPress上で商品紹介アフィリエイトをするためのプラグイン「Amazon Associates Link Builder」をご存知でしょうか？
Amazonが公開している公式プラグインです。
プラグイン側で用意しているデフォルトのデザインは、本当に基本的なものだけで使い勝手が悪いです。
オリジナルテーマを登録できるので、カエレバ風のデザインを用意してみました。
用意したデザインは、Amazlet風-2(cssカスタマイズ用)です。ユーザーさんによって、数多くのCSSが公開されています。
プラグインをインストールしたら、左サイドバーの「Amazon Associates Link Builder」→「template」→「Create new template」で、下記コードをコピペしてください。名前は「kaereba」で良いでしょう。
【カエレバ風】
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
{{#Items}} <div class="cstmreba imgspace" id="{{ID}}"> {{#Item}}{{#aalb}} <div class="kaerebalink-box"> <div class="kaerebalink-image"> <a href="{{DetailPageURL}}"><img src="{{MediumImageURL}}" style="border: none;" /></a> </div> <div class="kaerebalink-info"> <div class="kaerebalink-name"> <a href="{{DetailPageURL}}" >{{Title}}</a> <div class="kaerebalink-powered-date">posted with <a href="//kaereba.com" rel="nofollow" target="_blank">カエレバ</a></div> </div> <div class="kaerebalink-detail">{{By}} </div> <div class="kaerebalink-link1"> <div class="shoplinkamazon"><a href="{{DetailPageURL}}" >Amazon</a></div> </div> </div> <div class="booklink-footer"> </div> </div> {{/aalb}}{{/Item}} </div> {{/Items}} |
CSSは、小テーマで設定してください。「カエレバ デザイン」などで検索すれば、たくさん見つかります。
ヨメレバ・カエレバのスマホ対応 ユーザーさんが考えてくれたカスタマイズまとめ
[amazon_link asins=’B00WJHBU6K’ template=’kaereba’ store=’wakatta-22′ marketplace=’JP’ link_id=’46f16bea-f6cf-11e8-8f75-b153ab7754a6′]
使用例です。当ブログではmbdbさんのデザインを利用させてもらっています。
ヨメレバ風、ヨメレバのKindle版もあります。
【ヨメレバ風】
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
{{#Items}} <div class="cstmreba imgspace" id="{{ID}}"> {{#Item}}{{#aalb}} <div class="booklink-box"> <div class="booklink-image"> <a href="{{DetailPageURL}}" ><img src="{{LargeImageURL}}" style="border: none;" /></a> </div> <div class="booklink-info"> <div class="booklink-name"> <a href="{{DetailPageURL}}" >{{Title}}</a> <div class="booklink-powered-date">posted with <a href="//yomereba.com" rel="nofollow" target="_blank">ヨメレバ</a></div> </div> <div class="booklink-detail">{{By}} {{Merchant}} </div> <div class="booklink-link2"> <div class="shoplinkamazon"><a href="{{DetailPageURL}}" >Amazon</a></div> </div> </div> <div class="booklink-footer"> </div> </div> {{/aalb}}{{/Item}} </div> {{/Items}} |
【ヨメレバ風Kindle版】
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
{{#Items}} <div class="cstmreba imgspace" id="{{ID}}"> {{#Item}}{{#aalb}} <div class="booklink-box"> <div class="booklink-image"> <a href="{{DetailPageURL}}" ><img src="{{LargeImageURL}}" style="border: none;" /></a> </div> <div class="booklink-info"> <div class="booklink-name"> <a href="{{DetailPageURL}}" >{{Title}}</a> <div class="booklink-powered-date">posted with <a href="//yomereba.com" rel="nofollow" target="_blank">ヨメレバ</a></div> </div> <div class="booklink-detail">{{By}} {{Merchant}} </div> <div class="booklink-link2"> <div class="shoplinkkindle"><a href="{{DetailPageURL}}" >Kindle</a></div> </div> </div> <div class="booklink-footer"> </div> </div> {{/aalb}}{{/Item}} </div> {{/Items}} |
Amazon Associates Link Builderは価格も表示できます。テンプレート上に「{{SavingValue}}」を加えると、その部分に割引価格が表示されます。
「posted with カエレバ」のクレジット表記を消去するなど、自由に改変して利用してもらって構いません。
その他の値や、Amazon Associates Link Builderの基本的な使い方は、こちらのページが詳しいのでご覧いただければと思います。
Amazon Associates Link Builderの使い方とカスタマイズ
当ブログでも、先日ポストした「Kindle月替わりセール(40%OFF〜)から「コスパが高い本」をピックアップ 2018年12月版」で利用してみました。
ぜひ活用してみてください。
コメント