どうも〜こんばんは。
最近、わずかですがアクセスが増え、しかもfeedlyの購読者数がいつのまにか増えて嬉しい〜!!と思いながら今日もブログを書いています。
訪問&記事を読んでいただきありがとうございます!
さてAmazonアソシエイトを利用する時に公式のリンクで設置すると下記のように表示され、何か物足りない見栄えとなってしまいます。
このように物足りない・・
本格ビジネスサイトを作りながら学ぶ WordPressの教科書 Ver.4.x対応版 新品価格 |
そこで簡単にWordPressでAmazonアソシエイトを利用できるプラグインを「Amazon JS」紹介します!
導入にちょっと手間がかかりますが、導入してしまえば簡単にインパクトがあるかっこいい表示にすることができます!
しかし、「Amazon JS」導入しただけでは、私が利用しているDigiPressテーマ『MAGJAM』では下記のようにリストマークが出現し変に表示されてしまいます。
調べてみるとDigiPressシリーズのテーマは同様になるようです。
そこでAmazon JSプラグインのリストタグを非表示してきれいに表示するやり方を紹介します!
Amazon JS導入
まずはプラグインを導入しましょう
導入方法は下記の「EasyRamble」さんのサイトを参考にさせていただきました。ありがとうございます!
詳細に記載されているので手順どおりに進めていけば導入できます!
また使い方も記載されているので参考になります。
Amazon JS内のリストタグを非表示にする方法
これが意外に苦戦。Web上を探してみてもまだリリースされてまもないテーマですので見つかりませんでした。
そのため、試行錯誤してリストマークを非表示にできました!
「ビジュアル設定」→「オリジナルスタイルシート設定」に移動して下記のタグをコピーしてオリジナルスタイルシート追加しましょう。あとは「設定を保存」をクリックしましょう。
1 2 3 4 |
.amazonjs_item ul li:before { border:none; width:0; } |
これでリストマークが非表示になり下記のようにきれいに表示することができました。
[amazonjs asin=”4797381078″ locale=”JP” title=”本格ビジネスサイトを作りながら学ぶ WordPressの教科書 Ver.4.x対応版”]
テーマ内で全てのリストマークを使用しないのであれば、下記のように追加してもリストマークを非表示にすることができます。
1 2 3 4 5 6 7 |
.entry ul li:before { border:none; width:0; height:0; margin-right:0; box-shadow:none; } |
さいごに
Amazon JSは一度、導入すれば記事を書きながら、簡単に任意の箇所にすぐ追加できるのでとても便利なプラグインです。
リストマークが表示されてしまい導入に躊躇していた方はぜひ上記にようにやってみて下さい!
それではまた〜