Amazon JSをカスタマイズしてカエレバのように楽天とヤフーショッピングのアフィリエイトリンクを表示させたり、デザインをカスタマイズをしてみた

2017.11.122022.12.16

URLをコピーしました！

[aside type=”normal”]2018年6月17日追記
Amazon JS（カスタマイズ）を卒業して完全上位互換のWPアソシエイトポストR2を使うようになりました。

カスタマイズしたらこうなります

カエレバのようにAmazonと楽天とヤフーショッピングのリンクボタンが自動的に生成され、なおかつ右下のAmazonアイコンが消えるようになります。

僕はカエレバと同じようにボタンクリックでAmazonと楽天とヤフーショッピングのサーチ結果ページが表示されるようにカスタマイズを行いました。

Amazon JSにカエレバのように楽天とヤフーショッピングのアフィリエイトリンクを表示する方法

ボタンクリックでAmazonと楽天とヤフーショッピングのサーチ結果ページが表示されるように

amazonjs/js/amazonjs.jsをカスタマイズしていきます。

amazonjs.jsの58行目に

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

という記述があると思います。その下に

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>';

を追記します。

amazonlink
rakutenlink
Amazon
楽天市場
yahoolink
ヤフーショッピング

などの変数はお好みの名称に変更しても大丈夫です。

そして、17行目の

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

という記述の下に

var linkOpenTag1 = '<div class="amazon-button"><a href="https://www.amazon.co.jp/gp/search?keywords=${Title}&__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&tag=自分のID" 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" >';

を追記します。

[box class=”red_box” title=”注意”]自分のIDと記述しているところに、ご自身のAmazonアソシエイトのトラッキングIDと楽天アフィリエイトのアフィリエイトIDを記述しましょう。しておかないと機会損失しまくって不幸になります。[/box]

100,101行目と120,121行目と140,141行目、161,162行目、180,181行目の

'</div>',
reviewLinkTemplate,

この記述を探してください。そして、この記述の100行目と120行目と140行目、161行目、180行目の</div>を

'<div class="amazonjs-link1">',amazonlink,rakutenlink,yahoolink,'</div></div>',
reviewLinkTemplate,

と追記します。

これでAmazon JSにカエレバのようにボタンクリックでAmazonと楽天のサーチ結果を表示するリンクボタンを追加できました。

ボタンクリックで商品ページが表示されるように

続いてボタンクリックで商品ページが表示されるようにするカスタマイズです。

基本的には前述の手順1〜3と同じですが、手順2の追記を

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" >';

と追記すればオッケーです。

ボタンクリックで商品ページを表示することができるのはAmazonボタンのみです。楽天ボタンは前述のサーチ結果しか出力できません。

デザインのカスタマイズ

続いてCSSをカスタマイズして見た目を調整します。

リンクボタン周りのデザインを変更

まずは追加したリンクボタン周りのカスタマイズです。

amazonjs/css/amazonjs.css

変更した部分だけと思ったんですが、試行錯誤しすぎて訳がわからなくなったのでとりあえず全部載せておきます。

CSSの表示／非表示

.amazonjs_item {
  font-size: 14px;
  margin: 1.5em 0;
  padding: 15px 10px;
  border: double 4px #dbdbdb;
  position: relative;
  /*background: white url(../images/amazonjs.png) no-repeat right bottom;*/
  color: #333;
}
.amazonjs_box {
    display: table;
    width: 100%;
    vertical-align: middle;
}
.amazonjs_item a {
  color: #444;
  text-decoration: none;
}
.amazonjs_item a:hover {
    opacity: .7;
    }
.amazonjs_item * {
  margin: 0;
  padding: 0;
  border: 0;
}
.amazonjs_item img {
  margin: 0;
}
.amazonjs_item .amazonjs_indicator {
  margin: 0 10px;
  clear: both;
}
.amazonjs_item .amazonjs_indicator .amazonjs_indicator_img {
  float: left;
  display: block;
  width: 32px;
  height: 32px;
  background: transparent url(../images/ajax-loader.gif) no-repeat center;
}
.amazonjs_item .amazonjs_indicator .amazonjs_indicator_title {
  display: block;
  line-height: 32px;
  margin-left: 42px;
}
.amazonjs_item .amazonjs_indicator .amazonjs_indicator_footer {
  clear: both;
}
.amazonjs_item .amazonjs_image {
  display: table-cell;
  margin-right: 10px;
  vertical-align: middle;
}
.amazonjs_item .amazonjs_info {
  display: block;
  margin-left: 15px !important;
}
.amazonjs_item .amazonjs_info h4 {
  margin: 0 0 5px;
  padding: 0;
  font-size: 1.2em;
  font-weight: bold;
  clear: none;
  border: none;
}
.amazonjs_item .amazonjs_info ul {
  list-style: none;
  margin: 0 0 0.5em;
  padding: 0;
}
.amazonjs_item .amazonjs_info ul li {
  list-style: none;
  line-height: 1.5em;
  font-size: 1em;
  margin: 0;
  padding: 0;
}
.amazonjs_item .amazonjs_info ul li b {
  margin-right: .5em;
  color: #555;
  font-weight: normal;
}
.amazonjs_item .amazonjs_info .amazonjs_price {
  color: #900;
}
.amazonjs_item .amazonjs_info .amazonjs_price span {
  color: silver;
  margin-left: .5em;
}
.amazonjs_item .amazonjs_info .amazonjs_listprice {
  text-decoration: line-through;
}
.amazonjs_item .amazonjs_review {
  padding: 0;
  font-size: 0.7em;
  position: absolute;
  right: 34px;
  bottom: 4px;
}
#preview .amazonjs_item .amazonjs_review {
  display: none;
}
.amazonjs_item .amazonjs_footer {
  clear: both;
}

.amazonjs_book .amazonjs_info ul,
.amazonjs_music .amazonjs_info ul {
  margin-top: 0.5em;
}

.amazonjs_book .amazonjs_info ul li,
.amazonjs_music .amazonjs_info ul li {
  line-height: 1.6em;
}

.amazonjs-link1 div {
  display: inline-block;
  height: 37px;
  margin-bottom: 2%;
  padding: 0 9px;
  border-radius: 3px;
  box-shadow: 0 2px 3px rgba(0,0,0,.28);
  font-size: .95em;
  font-weight: bold;
  vertical-align: middle;
  line-height: 37px;
  transition: .3s ease-in-out;
  width: 49.5%;
  text-align: center;
}
.amazonjs-link1 div:hover {
box-shadow: 0 12px 15px -5px rgba(0,0,0,.25);
}
.amazon-button a, .rakuten-button a, .yahoo-button a {
  display:block;
  text-decoration:none;
}
.amazon-button a:before{ content: "f270"; font-family: "fontawesome"; padding:10px 4px;font-size:14px;}
.rakuten-button a:before{ content: "f25d"; font-family: "fontawesome"; padding:10px 4px;font-size:14px;}
.yahoo-button a:before { content: "f19e"; font-family: "fontawesome"; padding:10px 4px;font-size:14px;}
.amazon-button a:hover, .rakuten-button a:hover, .yahoo-button a:hover { color:#ffffff;}
.amazon-button { background:#ffb36b; }
.amazon-button a { color:#ffffff; }
.rakuten-button { background:#ea7373; margin-left:1%;}
.rakuten-button a { color:#ffffff; }
.yahoo-button { background:#73c1ea; }
.yahoo-button a { color:#ffffff;}
.yahoo-button img{display:none !important;}


@media (max-width: 480px) {
.amazonjs_item .amazonjs_image {
    width: 100px !important;
    margin: 0;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
  }
  .amazonjs-link1 div {
    height: 35px;
    padding: 0 12px;
    line-height: 35px;
    width: 100%;
}
.amazon-button {
    margin-bottom: 3%;
}
  .amazonjs_item img {
  margin: 0;
  width: 100px;
}
  .amazonjs_item .amazonjs_info h4 a {
    font-size: 0.9em;
  }
  .amazonjs_item .amazonjs_info ul li {
    font-size: 0.9em;
  }
  .amazonjs-link1 div:nth-child(even) { margin-left: 0; }
}

適宜不必要な部分などは消して書き換えましょう。

僕と同じデザインにするには上記のcssに加えて、amazonjs/js/amazonjs.jsに追記も必要です。
[aside type=”normal”]補足
以下のコードは価格表示以外は表示しない設定になっていますので、ランキング等の情報を載せたい場合は必要なコードのみ追記してください。[/box]
amazonjs.jsの「var defaultTemplates」という記述を探します。

               var defaultTemplates = {
                    Small:[
                        '<div class="amazonjs_item"><div class="amazonjs_box">',
                        imageTemplate,
                        '{{if _ShowDefaultImage}}',mediumImageTemplate,'{{/if}}',
                        '<div class="amazonjs_info" style="{{if _InfoMarginLeft}}margin-left:${_InfoMarginLeft}px;{{/if}}">',
                        '<h4>',linkTemplate,'</h4>',
                        '<ul>',
                        priceLiTemplate,
                        '</ul>',
                        '<div class="amazonjs-link1">',amazonlink,rakutenlink,'</div></div>',
                        reviewLinkTemplate,
                        '<div class="amazonjs_footer"></div>',
                        '</div></div>'
                    ],

このように、<div class="amazonjs_box">と最終行に</div>を追記すると、とりあえず僕と同じデザインになります。
ここには、MusicやDVDなどの項目もあると思いますが、同じようにそれぞれ追記してあげると良いと思います。

右下のAmazonアイコンを非表示にする

amazonjs/css/amazonjs.css
8行目のbackgroundを

.amazonjs_item {
  font-size: 14px;
  margin: .5em 0 1em 0;
  padding: 25px 10px 25px 10px;
  border: 1px solid #ddd;
  position: relative;
  display: block;
  background: white url(../images/amazonjs.png) no-repeat right bottom;
  color: #333;
}

.amazonjs_item {
  font-size: 14px;
  margin: 0em 0 1em 0;
  padding: 25px 10px 25px 10px;
  border: 1px solid #ddd;
  position: relative;
  display: block;
  /*background: white url(../images/amazonjs.png) no-repeat right bottom;*/
  color: #333;
}

このようにコメントアウトすることでAmazonアイコンを非表示することができます。

まとめ

これで価格表示をしつつ楽天へのリンクも表示される僕の考えた最高のアフィリエイトリンクツール環境が完成しました。

僕と同じように、価格表示をしつつ楽天やヤフーショッピングのリンクを表示したい。という方の参考になりますように。

AmazonJS (WordPress Plugin)

コメント一覧（48件）

さかやん より:

2017.11.17 00:30

これはすごい！
カエレバが好きではなかったので、Amazonjsにこんなカスタマイズができるとは助かります。
楽天のリンクをずっとつけておきたかったのでうれしい限りです。

返信
さかやん より:

2017.11.17 00:37

追記です。これまでのAmazonjsのような表記に楽天のサーチ結果をだす方法はありますでしょうか？
Amazonが商品ページではなく、検索結果だったので、これまでのようにamazonは単独の商品ページにとばしたいのですがどのようにすればよいでしょうか？

返信
- hazime より:
  
  2017.11.17 08:18
  コメントありがとうございます！
  お役に立てたようでなによりです！
  
  >これまでのAmazonjsのような表記に楽天のサーチ結果をだす方法はありますでしょうか？
  僕の解釈が合っているかわかりませんが、AmazonJSはAmazonの商品情報しか取得できないので楽天のサーチ結果を出すのは不可能だと思います。
  「Amazonから商品情報を取得し、その取得したAmazonの商品名をそのまま楽天の検索URLにはめ込んだのをリンクボタンとしてつけている」が今回のカスタマイズなので。
  楽天の商品情報を取得できるようなプラグインが開発されるのを祈りましょう。
  
  >Amazonが商品ページではなく、検索結果だったので、これまでのようにamazonは単独の商品ページにとばしたいのですがどのようにすればよいでしょうか？
  下のAmazonボタンを商品ページにとばしたいということであれば
```
var linkOpenTag1 = '<div class="amazon-button"><a href="https://www.amazon.co.jp/gp/search?keywords=${Title}&__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&tag=自分のID" target="_blank">';
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">';
```
  の部分を
```
var linkOpenTag1 = '<div class="amazon-button"><a href="${DetailPageURL}" class="amazonjs_link" data-role="amazonjs_product" data-asin="${ASIN}" title="${Title}" target="_blank">';
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">';
```
  に変更すれば可能だと思います。
  返信
さかやん より:

2017.11.18 17:03

今実装しているのですが、アマゾンと楽天のボタンがずれてしまう現象があります。
もともとamazonjsにある枠が表示されている状態で、枠の下のラインにちょうど半分ほどボタンがかかってしまっています。
モバイルで表示させた場合はうまくいっているようなのですが、どこを修正すればよいのでしょうか？

返信
さかやん より:

2017.11.18 17:59

原因判明しました！
”,
reviewLinkTemplate,
の
”,
を削除していなかったためレイアウトが崩れていたようでした。
クリック率などの向上が期待されそうです。

返信
- hazime より:
  
  2017.11.18 18:27
  
  問題解決したようでなによりです！
  
  返信
さかやん より:

2017.11.24 11:18

こんにちは。私のサイトで実装して6日間経過しましたが、ひとまず現時点の効果のご報告です。
変更前と変更後でAmazonのクリック率は変わらず（ここはむしろ楽天に飛ぶ選択肢が増えるので落ちるのではないかと心配していました）、楽天のクリック数が５倍程度になりました。
結果的にこれまで機会損失だった楽天の売上もそれに応じてあがっています。
ありがとうございました！

返信
- hazime より:
  
  2017.11.24 23:00
  
  経過報告ありがとうございます！
  お役に立ててよかったです。
  
  それにしても、効果を実感できるほどとは羨ましい限りです！
  
  返信
ぴらより:

2017.11.26 11:55

質問があります。
こちらで紹介されている方法の場合、楽天のIDは楽天アフィリエイトで取得するIDでないと正常に動作しないのでしょうか？「もしもアフィリエイト」のIDではダメでしょうか？

返信
ぴらより:

2017.11.26 12:28

神記事ですね。
この記事単体で1,000円で売られていても絶対に買いたいぐらいです。
本当にありがとうございます。

1つ気になったのですが、私のブログでは商品リンク枠内の右下に、従来のAmazonJS使用時に表示されていたAmazonのマークが表示されたままになっています。
できればこちらの記事内にある表示例のようにAmazonマークを消してすっきりさせたいのですが、何か別途カスタマイズが必要なのでしょうか？

返信
ぴらより:

2017.11.26 12:54

何度もコメント失礼します。
コメントの回答の中にあります「Amazonボタンのクリック→商品ページを表示」にするための記述を参考にさせてもらいましたが、どうも「”」が1つ余計にあるように思います。
難しいことが全く分からないのでもし私の勘違いであれば混乱を避けるためこのコメントは非表示にしていただきたいのですが、自分の環境ではAmazonボタンのリンクが正常に機能しなかったので以下のように「”」を1つ減らしてみました。

var linkOpenTag1 = ‘‘;
↓
var linkOpenTag1 = ‘‘;

これでAmazonボタンも正常に機能するようになりました。

返信
- hazime より:
  
  2017.11.27 04:39
  
  コメントありがとうございます！
  
  >神記事ですね。この記事単体で1,000円で売られていても絶対に買いたいぐらいです。
  ありがとうございます！！！
  
  >「もしもアフィリエイト」のIDではダメでしょうか？
  記事中のコードだと、「もしもアフィリエイトID」ではダメですね。
  もしもアフィリエイトIDバージョンも追記しておきます。
  
  >Amazonマークを消してすっきりさせたい
  cssを編集することで消すことが出来ます。
  こちらも追記しておきますね。
  
  >コメントの回答の中に・・・
  確かに「”」が多かったですね。すみません。
  コメントを訂正しておきました。
  
  返信
masahikotoya より:

2017.11.30 16:56

早速の追記ありがとうございます！とても助かります。

…と、すみませんが、もう一点だけ質問させてください。。
amazonjsプラグインを入れてこちらの記事中にあるCSSだけを追加した状態だと、こちらの記事中にあるサンプルのような大きめの商品画像にならないのですが、これは使用テーマなどの環境による違いが原因でしょうか？それとも何か画像を大きくするCSS他の書き方があるのでしょうか？

もし何かCSSなどを書く必要があるようでしたら、「この記事参考にしてみ→リンク」みたいな形でも構わないのでヒントを教えてもらえると嬉しいです。

よろしくお願いします。
（「え？そんなはずないんだけど？」という場合を考えて参考までに私のブログでの現在の表示デザインを確認できるページURLを貼っておきます https://prime-dict.com/?p=2512 ）

返信
- hazime より:
  
  2017.11.30 23:23
  何度もコメントありがとうございます。
  
  中サイズの画像にするにはショートコードに[amazonjs asin="******" locale="JP" title="********" imgsize="medium"]のようにとショートコードにimgsize="medium"と指定すればできるはずですよ！
  記事中にあるブックマークレットでショートコードを生成してもらうと、imgsize="medium"がすでに組み込まれているようにしてあるので、もしよければブックマークレットからショートコードを生成してみてください。
  
  で、ブックマークレットからショートコードを生成できない商品（Kindle本やデジタルミュージックなど）の場合WordPressの投稿画面からAmazonJSを実行するわけですが、その際、手打ちで毎回imgsize="medium"を入力しなければいけないので面倒だなと思いamazonjs/js/amazonjs.jsも少しカスタマイズしています。
  90行目付近の
```
				var defaultTemplates = {
					Small:[
						'<div class="amazonjs_item">',
						imageTemplate,
						'{{if _ShowDefaultImage}}',smallImageTemplate,'{{/if}}',
```
  となっている部分を
```
				var defaultTemplates = {
					Small:[
						'<div class="amazonjs_item">',
						imageTemplate,
						'{{if _ShowDefaultImage}}',mediumImageTemplate,'{{/if}}',
```
  とすることで、ショートコードにimgsize="medium"と指定せず[amazonjs asin="******" locale="JP" title="********"]のみで中サイズの画像が出力されるようにしています。
  
  たしか、これで出来たと思います。
  返信
  - masahikotoya より:
    
    2017.12.1 11:07
    
    ご丁寧にありがとうございます。とても分かりやすく、迷うことなくできました。
    先のコメントをした後に自分で画像サイズ変更の情報を探していてショートコードに追記するという方法があるのは知ったものの、でもこんな面倒なこと毎回やってるとも思えないし…と感じたので、プラグイン編集の方法を知れて嬉しいです。（ブックマークレットも確かに便利なのですが、特定の何かを紹介したいという場面よりも記事中に何か適当に関連商品を入れたい場面の方が圧倒的に多いので、投稿画面からAmazonJSの実行だけで完結するのはかなり手間が省けて助かります）
    今後Amazonで買い物する時、当面はこちら経由でAmazon行って買い物させてもらいます！笑
    
    返信
    - hazime より:
      
      2017.12.1 21:29
      
      無事、実装できたようでなによりです！
      
      >今後Amazonで買い物する時、当面はこちら経由でAmazon行って買い物させてもらいます！笑
      是非、是非！笑
      サイバーマンデーもありますし、いっぱい買ってくださいね！笑
      
      返信
ねこっけ より:

2017.12.10 00:14

まさに探していた情報で感激しました！！
amazonで何か購入する際はこちらから購入させて頂きます。
本当にありがとうございました。

返信
- hazime より:
  
  2017.12.10 08:12
  
  コメントありがとうございます！
  お役に立てたようでなによりです。
  
  >amazonで何か購入する際は・・・
  ぜひぜひ、お願いします！笑
  
  返信
ゆきんこ より:

2018.3.5 10:36

hazime様　はじめまして
アマゾンＪＳの素敵な情報ありがとうございます。
ひとつお聞きしたいのですが、最近は楽天と一緒にヤフーショッピングを貼っている方をお見かけします。
この記事のＣＳＳを参考にカスタマイズを試みたのですが上手くいきませんでした。
アマゾンＪＳではカエレバのようにヤフーショッピングを貼るのは無理なのでしょうか。

返信
- はじめ より:
  
  2018.3.5 21:15
  
  コメントありがとうございます！
  
  ヤフーショッピングを貼る事も可能です！CSSも必要ですが、JSファイルの方に追記が必要になってきます。
  Amazon JSのカスタマイズ需要がそこそこありますので、近日中にヤフーショッピングを追加する記事を作成します！
  
  返信
negi3maru1 より:

2018.3.6 00:57

ここの記事を拝見しましてすごくいい記事で感謝してます。
ただ、amazon JSを実装したところ、商品の検索が出来ない状態です。
ASINで番号を追加してAmazonリンクを追加で商品が出てくるかと思いますが、
そこが「0」とだけ表示されている状態です。
ブックマークレットに関しても、javascriptが効いていないのか、ショートコードのダイアログが出てきません。全くうんともすんとも言わない状態です
wordpressバージョンバージョン 4.9.4
PHP7.1.4使用です
試しにショートコードを直打ちしても商品名だけ表示されて、商品画像はクルクル状態です。
再インストールやキャッシュのクリアを試しても無理でした
使用ブラウザはfirefoxです。
何か原因おわかりになりますでしょうか

返信
negi3maru1 より:

2018.3.6 01:22

すいません、反映までに時間がかかっているだけでした。
早とちりごめんなさい。
テーマの影響で表示が変わってしまうのは仕方ないですよね？

返信
- はじめ より:
  
  2018.3.6 01:59
  
  コメントありがとうございます！
  
  表示に関しては基本的にどのテーマでも同じようになりますよ！多分CSSを書いていないんじゃないかなと。
  
  記事内のデザインのカスタマイズ欄に書いているので見て見てください。
  
  返信
  - negi3maru1 より:
    
    2018.3.6 03:15
    
    おお、返信ありがとうございます。
    CSSも記入済みなのですが、表示崩れがおきてしまいます。
    リンクにテーマ独自のスタイルがされているみたいです。さらにAmazonや楽天の前のアイコンもF2SDみたいな文字で□になって出ます。
    
    返信
    - はじめ より:
      
      2018.3.6 08:09
      
      実際に見てみればわかるのですが・・・。
      コメントから予測すると
      
      ＞リンクにテーマ独自のスタイルがされているみたいです。
      テーマ側でAmazonJS用のデザインコードが用意されているということですか？珍しいですね。
      もしそうであればテーマ側のCSSを消してこの記事のCSSを当てればOKだと思います。
      
      ＞さらにAmazonや楽天の前のアイコンもF2SDみたいな文字で□になって出ます。
      これはテーマがFont Awesomeに対応していないからかもしれませんね。
      対応させるにはこの記事が参考になると思います。
      https://saruwakakun.com/html-css/basic/font-awesome
      
      アイコンは消しちゃう！の場合は記事内CSSの
      「.amazon-button a:before」と「.rakuten-button a:before」の行を消してしまえばOKです。
      
      返信
      - negi3maru1 より:
        
        2018.3.6 14:44
        
        丁寧に本当にありがとうございます！
        AmazonJS用のはテーマには入っていませんでした。
        使用テーマはlionmediaというテーマを使っています。
        どんな風になってるかなんですが
        https://haisinsha.com/nicolive_yafumi_tangattu/
        ここの前半部分に貼り付けたのですが、こんな感じになります。
        何の影響かさっぱりで・・・
        とりあえず教えてもらったFont Awesomeの対応だけやってみます！
      - はじめ より:
        
        2018.3.8 08:52
        
        お返事遅くなりました。
        
        確認してみたら、ちゃんと表示されているようですね！
        なんとかなったようでよかったです！
ゆきんこ より:

2018.3.6 21:27

はじめ様　
返信ありがとうございます。

私がAmazon JSのカスタマイズでこちらのページにたどり着いたときは検索結果の１位になってましたので需要はあると思います！

返信
- はじめ より:
  
  2018.3.9 00:09
  
  ゆきんこさん
  
  お待たせしました！
  ヤフーショッピングのリンクを設置する方法を追記しましたので、また試してみてください。
  多分、うまくいっているはず・・・。
  
  返信
  - ゆきんこ より:
    
    2018.3.10 11:54
    
    はじめ様
    上手く反映できました。ありがとうございます。
    あと蛇足でございますがお礼に気になった点を。
    アマゾンのボタンをfontawesomeでCSS装飾されていますが、アマゾンはロゴの商標権管理に非常に厳しいです。勝手にロゴを使用してアカウントが閉鎖されてしまう可能性があるので止めておいた方が良さそうです。（私はロゴを削除しました）
    
    返信
    - はじめ より:
      
      2018.3.13 08:11
      
      無事に使えたようでなによりです！
      
      確かにアマゾンは色々と厳しいようですね。ロゴの件、僕も考えておきます。
      助言ありがとうございます！
      
      返信
negi3maru1 より:

2018.3.8 16:25

ご返答ありがとうございます！
なんとか表示まではいけました！
ただちょっとよく見ると価格とかの前に「・」が入っていまして。。。
楽天のボタンも色が同化してスマホからだともはやなんのボタンかわからなくなってます。
質問ばかりで申し訳ないです。本当にお暇な時で良いので解決策あれば教えて下さい！
僕もamazonはここから買いたいと思います！

返信
- はじめ より:
  
  2018.3.8 17:46
  
  よく見たらたしかに笑
  ボタンの文字色はamazonjs/css/amazonjs.cssの146行目を下記に
  .amazonjs-link1 div a {
  display: block;
  padding: 3px 0;
  text-decoration: none;
  color: #fff;
  }
  
  価格とかの「・」はamazonjs/css/amazonjs.cssに下記を新たに追記
  .amazonjs_item ul li:before {
  border:none;
  width:0;
  }
  
  ついでに、Amazonボタンにカーソル合わすと枠線の色が適応されていないので152行目を下記に
  .amazon-button a:hover {
  color: #ff9900;
  background: #ffffff;
  border: 1px solid #ff9900 !important;
  }
  これで改善されると思います！
  
  ＞僕もamazonはここから買いたいと思います！
  是非お願いします！！
  
  返信
  - negi3maru1 より:
    
    2018.3.8 20:49
    
    めちゃめちゃ丁寧にありがとうございます。
    教えてもらった事全部やってみたんですが
    変わりません（泣）
    相当クセの強いテーマつかっるんでしょうかね・・・
    なんら変化なしの状態です・・・
    
    返信
    - はじめ より:
      
      2018.3.8 21:55
      
      枠の色は変わりましたね！
      
      ボタンの文字色は僕から見るとCSSが追記されてないように見えてますね。
      color: #fff;を追記されましたか？
      
      「・」はこれで消えるかも？
      /* AmazonJSのアイコンを消す */
      .entry-content .amazonjs_item li:before,
      .entry-content .amazonjs_item a[target=”_blank”]:after{
      content:none;
      }
      
      これでも消えなかったら
      themes/lionmedia/css/content.cssの91行目
      .content ul li:before {
      content: “・”;
      position: absolute;
      left: 0;
      }
      を消してしまう。
      
      もしくは
      .content ul li:before {
      content: “”;
      position: absolute;
      left: 0;
      }
      と書き換えれば、Amazon JSの「・」は消せると思います！
      
      ただ後者の.content ul li:beforeを改変すると、リストタグに影響があるかもしれませんね。
      
      返信
      - negi3maru1 より:
        
        2018.3.9 16:44
        
        ありがとうございます！！なんとか「・」を消すことが出来ました！！
        やっぱりテーマ側のcssが悪さしてるみたいです。
        後はリンクの文字色だけなんですけど、これもたぶんテーマのcssの可能性ありますよね・・・。
        もちろんamazonJS側のCSSにはcolor: #fff;該当箇所に追記してます。
        importantつけてみても反映されなかったら、テーマのなんらかによって制御されてるってことでしょうか。テーマのCSSのリンク設定を消せばいいでしょうか
        お忙しい中本当に付き合って頂いてすいません。
      - negi3maru1 より:
        
        2018.3.9 17:09
        
        追記します！
        importantをつけたところ上手く反映したみたいです。
        本当に手取り足取り丁寧に教えてもらって感謝してます！
        ヤフーと楽天の追加も非常に助かります！！
        こちらはもしもじゃなく、純正のIDじゃないと現状きびしいですか？
        もしもならヤフーと楽天持ってるのですが、純正もってなくて・・・
      - はじめ より:
        
        2018.3.9 22:07
        
        おーいけましたか！お疲れ様でした！
        
        楽天は楽天アフィ、ヤフーはバリューコマースって感じですね！
        もしもIDでも不可能ではないと思うんですけど、まだ試行錯誤してます・・・。
    - フライングニートマン・ムラクモ@ライトコイン (@murakumo25) より:
      
      2018.3.10 20:05
      
      以下のコードをCSSの一番下の方に入れてみるといいかも。それでボタンの文字色を一括で上書きできると思うがどうだろう。（各ボタンごとのCSS部分のカラーコード後に !important つけると個別に変えられるとは思うけど）
      
      /* タイトル文字上書き用（いらなければ消す） */
      .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; /* マウスオーバー時のリンクボタン色 */
      }
      
      違ったら悪いのだけれど。
      
      返信
      - negi3maru1 より:
        
        2018.3.12 18:03
        
        ありがとうございます！教えて頂いた記述amazonjs.cssに追記しましたが、変化無しの状態でした。
        あと、はじめさんのcssを丸々コピーすると、配置が変わってしまうのと、スマホ表示がおかしい事になってます。
        おそらくテーマ側で相当強い制御がされてるんだろうなとは思うんですけど
        ここまで変わるとどこから手をつけていいか困惑してます。
      - はじめ より:
        
        2018.3.13 06:51
        
        すみません！大事なことを書き忘れていました！
        
        amazonjs/js/amazonjs.js
        の「var defaultTemplates」の部分を探してください。
        
        var defaultTemplates = { Small:[ '<div class="amazonjs_item"><div class="amazonjs_box">', imageTemplate, '{{if _ShowDefaultImage}}',mediumImageTemplate,'{{/if}}', '<div class="amazonjs_info" style="{{if _InfoMarginLeft}}margin-left:${_InfoMarginLeft}px;{{/if}}">', '<h4>',linkTemplate,'</h4>', '<ul>', priceLiTemplate, '</ul>', '<div class="amazonjs-link1">',amazonlink,rakutenlink,'</div></div>', reviewLinkTemplate, '<div class="amazonjs_footer"></div>', '</div></div>' ],
        
        このように、<div class="amazonjs_box">と最終行に</div>を追記すると、とりあえず僕と同じデザインになると思います！
        ここには、MusicやDVDなどの項目もあると思いますが、同じようにそれぞれ追記してあげると良いと思います。
negi3maru1 より:

2018.3.13 17:37

jsの追記の件ありがとうございます！！
めっちゃくちゃいい感じになりました！まさに最強の紹介ツールだと思います。
jsの追記をするとスマホでの表示もだいぶ良くなったのですが、
配置が上下になってしまっています。
これはCSSの@mediaの編集が問題ですかね？

返信
- はじめ より:
  
  2018.3.13 18:04
  
  スマホ表示でのボタンの配置でしょうか？
  これはそのほうがいいかなぁと思った僕のカスタマイズなので
  
  @media (max-width: 480px)
  .amazonjs-link1 div {
  height: 35px;
  padding: 0 12px;
  line-height: 35px;
  width: 100%;
  color: #fff !important;
  }
  
  の「width: 100%;」を消せばPCと同じような配置になると思います。
  
  ただ、それを消すとボタンとボタンがくっついてしまうと思うので
  @media (max-width: 480px)
  .amazonjs-link1 div:nth-child(even) {
  margin-left: 0;
  }
  
  をmargin-left: 1%;
  とかにするといいかもしれないです。
  
  返信
  - negi3maru1 より:
    
    2018.3.13 19:29
    
    ご返事ありがとうございます！
    どうやらですね、スマホの方だとランキングや発売日の表記が消えておらず、
    商品画像が上にきて、その下にタイトル、価格、発売日、ランキングが来てる状態です。
    PCではおかげさまでパーフェクトに綺麗に出来たのですが、
    スマホ表示は発売日などが消えてない状態みたいです。
    
    返信
    - はじめ より:
      
      2018.3.13 21:50
      
      んースマホで確認してみても問題なく表示されているんですけどね・・・
      
      ブラウザのキャッシュを消してみるといいかも？
      
      返信
      - negi3maru1 より:
        
        2018.3.13 23:20
        
        あーキャッシュの問題でした。
        すいません。早とちり２ですね。
        すごく綺麗に表示されてます！！！
        これで、今まで以上に商品紹介が楽しくなりました！！
        完璧です、ありがとうございます！！絶対アマゾンここから買いますね！
      - はじめ より:
        
        2018.3.13 23:34
        
        長い戦いお疲れ様でした！
        
        ＞絶対アマゾンここから買いますね！
        是非よろしくおねがいします笑
simplist より:

2018.3.17 10:14

うぉーーー！！！　楽天に続いてヤフーまで対応してくださるとは！！！感謝。
楽天追加で収入も5倍増したのでヤフーも追加してみます。
ふだんはアマゾンと楽天しか利用しないのですが、少なからずヤフーもいるんですね。

返信

Amazon JSをカスタマイズしてカエレバのように楽天とヤフーショッピングのアフィリエイトリンクを表示させたり、デザインをカスタマイズをしてみた

カスタマイズしたらこうなります

Amazon JSにカエレバのように楽天とヤフーショッピングのアフィリエイトリンクを表示する方法

ボタンクリックでAmazonと楽天とヤフーショッピングのサーチ結果ページが表示されるように

ボタンクリックで商品ページが表示されるように

デザインのカスタマイズ

リンクボタン周りのデザインを変更

右下のAmazonアイコンを非表示にする

まとめ

コメント

コメント一覧 （48件）

はじめ へ返信する コメントをキャンセル

コメント一覧（48件）

はじめへ返信するコメントをキャンセル