はてなブログカスタマイズメモ

はてなブログのカスタマイズ、書き方などのメモ、チートシートです。

Amazonアソシエイトの画像リンクを自動的にセンタリングする


 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アソシエイトのバナーを自動的にセンタリングする - はてなブログカスタマイズメモ

スポンサーリンク