Amazon.jsで生成された画像に変な枠線が付く…？！

Amazon.jsで生成された商品リンクの画像に変な枠線が付くので原因を調べてみました。

下図が正解です。

 

 

原因を探る

Chromeのディベロッパーツール(Ctrl + Shift + I)で該当項目のCSSを表示させてチェックボックスをオンオフして調べてみました。

該当項目のCSSをチェックするとoutlineで枠線が設定されていたのでそのチェックを外すと枠線はきれいに消えました。outlineという文字を見た時に原因はすぐに分かったんですがこれは先日、画像の枠線としてoutlineプロパティを設定したんですがそのCSSがamazon.jsの画像にも表示されていただけでした。

 

 

amazon.jsのカスタムCSSで修正

amazon.jsでカスタムCSS(amzonjs.css)を使うように設定しているのでそこに枠線が表示されないようなコードを記載すれば大丈夫な筈です。

HTML構造を調べると.amazonjs_linkの下位に画像があるので正しいかどうか分かりませんが、下図のように記載して消しました。

.amazonjs_link img {
	outline: 0px solid gainsboro;
}

下記リンクはアフィリエイトリンクです。