Amazonアソシエイトの画像をそのまま貼り付けると左寄せになってしまいます。
それを自動的にセンタリングするCSSを作ってみました。
imgタグをブロック要素にしてセンタリングする
画像リンクを取得すると次のようなコードになっています。(IDっぽい情報は伏せてあります)
<a href="https://www.amazon.co.jp/dp/B071ZF5KCM/ref=as_li_ss_il?pf_rd_p=xxxx&pf_rd_r=xxxx&linkCode=li3&tag=xxxx&linkId=xxxx" target="_blank"><img border="0" src="//ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&ASIN=B071ZF5KCM&Format=_SL250_&ID=AsinImage&MarketPlace=JP&ServiceVersion=20070822&WS=1&tag=xxxx" ></a><img src="https://ir-jp.amazon-adsystem.com/e/ir?t=xxxx&l=li3&o=9&a=B071ZF5KCM" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />
相変わらず目印が無いので面倒です。本当はaタグを特定できるとよいのですが、hrefを目印にすると誤作動が怖かったのでimgをブロック化してセンタリングしてみました。
img[src*="ws-fe.amazon-adsystem.com"] { display: block; margin: auto; }
アマゾンのホスト名がURLに含まれている場合にブロック化とセンタリングを行います。
imgはインライン要素なので、単体でセンタリングさせるにはブロック要素にする必要がありました。
これを適用するとこうなります。
解除する場合
解除するにはstyleやCSSで上書きしてやることになります。具体的にはバナーリンクと同じなのでそちらご参考にしてください。
Amazonアソシエイトのバナーを自動的にセンタリングする - はてなブログカスタマイズメモ
私は解除用のクラスを作ってデザインに定義し、divタグなどで使っています。
.amazon-no-centering img[src*="ws-fe.amazon-adsystem.com"] { display: inline; margin: 0; }
まとめて指定できて便利です。
