ハミングバードでAmazonJSを使った時の外部リンク矢印とリストマークを消す方法

humming-bird-amazonjs

最近ブログのテーマをSimplicityからハミングバードに変更しました。

やはりテーマを変更すると、デザインやプラグインの動きでいくつか予想もしない不具合がでます。

今回はその中でも、アマゾンの商品リンクを簡単に挿入できるプラグイン「AmazonJS」の表示の不具合、そしてその修正方法について解説します。

ハミングバードでAmazonJSを使った時の問題

テーマとしてハミングバードを使っている時に、AamzonJSで生成したコードでアマゾンの商品リンクを作ると以下のように表示されます。

amazonjs-before

AmazonJSで生成した商品リンク(修正前)

気になったのは以下の3点です。

  • 商品名の最後の外部リンク矢印マークはいらない。
  • イメージ画像の右下の外部リンク矢印マークもいらない。
  • 各情報の前に付けられたリストマーク(黒丸)がいらない。

どれも細かいことですが、あまり美しくないですよね。

もしかしたら、同じ問題で悩んでいる人がいるかもしれません。ハミングバードのカスタマイズ情報ってまだそれほど出回っていないので。

「あきらめないで!」

スタイルシートを少しいじれば修正することができます。

AmazonJSの表示の修正方法

それぞれの点について、子テーマのスタイルシート(style.css)に書き込みました。

まずは商品名の後ろについている外部リンクアイコンです。

続いては、商品画像の右下に表示されてしまう外部リンクアイコンです。

最後に、リスト表示されている情報のマーカーを消しましょう。

 

リストマーカーの削除に関しては、以下の記事を参考にしました。この場を借りてお礼。

修正後の商品リンクの表示

修正後の表示は下のようになります。気になっていた3つの余計なものが無事に消えて、すっきりしました。

amazonjs-after

AmazonJSで生成した商品リンク(修正後)

上に載せたものをコピペして、同じようにスタイルシートに追記してもらえればOKです。

CSSに追記したのに、それが反映されないという人は、キャッシュの削除、mod_pagespeed(Xサーバーの人)などを確認してみてください。