ブログを書いていると自分が使用していてすごく良かったものを紹介したいときがあります。せっかく紹介するなら、収益化もかねて…ということで各種ASP、Amazonアソシエイトや楽天アフィリエイトを経由して商品リンクを作成するのですが、Amazonアソシエイトの商品リンクをデフォルトの表示のまま使うと、何だかサイズも微妙だし、見た目も格好悪い

AmazonJSプラグインを使うとかなり格好よく商品を紹介できるのですが、色々検討した結果、AmazonJSは使わないほうがいいかも、という結論に至りました。そんなこんなで行き着いた方法が、今回ご紹介する、「CSSだけで簡単にAmazon商品を格好よく紹介する」方法です。

まずはAmazonJSの利用を断念したいきさつから。後半では(大そうなものではないですが)CSSサンプルもあわせて紹介します。

sponsored link

AmazonJSプラグインのいいところ

AmazonJSプラグインというのは、Wordpressの投稿画面からボタン一つでAmazonアソシエイトの商品リンクを簡単に作成することができるAmazonアソシエイト利用者向けWordpressプラグインです。

プラグイン公式サイト

Amazonが提供している記事埋め込み用の商品リンクって、悲しくなるくらいなんだか格好悪いですよね…。

例)デフォルトの商品リンク↓

Amazonデフォルト商品リンク

例)AmazonJSを使った商品リンク↓

AmazonJSデフォルト商品リンク

見栄えの違いは一目瞭然!興味がある方は以下のサイトの解説がとても親切で参考になります。

WordPressでアマゾン・アソシエイトを簡単設定!Amazon JSプラグイン

 

私も「これは!!!」と思って早速使ってみたのですが、わざわざAmazonのサイトからアソシエイトリンクを取ってこなくても、投稿画面上で商品を検索して記事内にAmazonの商品リンクを貼りつけられるのでスゴく楽。こんな簡単に格好いいリンクができて気分も上々!

最近執筆した記事でも、AmazonJSは今後もずっと使いたいプラグインの一つに入れていました。

2015年も外せない有用WordPressプラグイン30選と利用停止プラグイン

 

しかし、使ってみるとわかるのですが、AmazonJSには幾つかデメリットもあるんです。

AmazonJSのダメだったところ

私が「これはちょっとな」と思ったデメリットは・・・

  1. 高速化プラグインとのバッティングが多い
  2. 商品名のテキストがh4タグで表示される
  3. 価格を含めた商品情報が表示される

の3つです。一つずつコメントしていきます。

 

高速化プラグインとのバッティングが多い

AmazonJSはキャッシュ系プラグイン、遅延読み込み(LazyLoad系)のプラグインなどの相性が悪く、商品画像のところがロード中になってぐるぐる回ったままになってしまうことがあります。私も何度かこの現象は経験しましたが、ネットで調べてみると結構よくあることみたいですね。。

 

商品名のテキスト部分がh4タグで表示される

h4の見出しやh5の見出しの本文中で使っているときに、AmazonJSで商品リンクを作るとその商品タイトルのところもh4タグになるので、見出しの階層がぐちゃぐちゃになってしまう可能性があります。

記事の構造化が正しくない=SEO的によくない なので、これもちょっと困るなと思いました。。

 

価格を含めた商品情報が表示される

Amazonアソシエイトでは、クッキーの有効期間が24時間。例えば、あるユーザーが当ブログ内の商品リンクをクリックして、24時間以内にAmazonで商品を購入すれば、紹介した商品じゃなくてもアソシエイト紹介料がつきます。なので、アフィリエイト的にいえば、まずその商品リンクを「クリックしてもらう」ことが重要

それが、AmazonJSで商品リンクを作ると、商品名や画像だけじゃなくて、価格などの商品情報が表示される。人によってはその情報だけで満足してしまいクリックしない、ということもあり得るんじゃないかと。クリックが少なければ当然、売り上げのポテンシャルも下がりますので。

私はAmazonJSを使用する前は、デフォルトの表示ではなくて、商品名と商品画像のリンクを普通に貼り付けて紹介していたのですが、なんとなくAmazonJSにしてからクリック数が少なくなったような感じがしました。ハッキリとは言えないですが、価格とか分からないほうが、リンクをクリックしてみたくなりません?^^;

 

 

というようなデメリットを考えた結果、考え付いたのが、AmazonJSっぽい感じでCSSとHTMLコードを自作すれば色々解決するんじゃない?というアイデア。早速作ってみました^^

 

CSSだけで簡単にAmazon商品リンクを格好よく表示する

完成版はこんな感じです。

 

商品画像と商品タイトルのみで詳細な情報は表示しない、シンプルな表示ですが、ただ単に商品画像を貼り付けたりするより見栄えがいいですし、統一感も出るかなと。

基本はAmazonアソシエイトサイトから商品リンクのHTMLをコピペして使うだけ、表示をCSSで変えているだけなので他のプラグインとのバッティングももちろんありません。また、商品タイトルタグの部分には見出しタグも入っていないので記事内の構造の問題もこれで解決です^^

 

そんな大そうなことは本当にしていないですが、簡単なやりかたとHTML 、CSSを以下に載せておきます。

 

まず、繰り返し使用できるように、以下のコードをAddQuickTagに登録。AddQuickTagのことが何かわからない場合はGoogle先生に聞いてみてください。とても便利プラグインなのでぜひ使うことをお勧めします。

 

以下のCSSをカスタマイズ用のcssファイルかdesign.cssに加える。

divの幅や、色、フォントサイズはお好みに調節してください。

 

商品リンクはAmazonアソシエイトのサイトから、画像リンクとテキストリンクをそれぞれコピーして、上記HTMlの「ここに画像コード」「ここにタイトル」のところに貼り付けるだけです。

(AmazonJSに慣れちゃってわざわざAmazonアソシエイトサイトからコードを取ってきたくないという方は、AmazonJSから画像コードとテキストコードを取得することもできますね。)