はてなブログの画像、Amazon商品画像を自動的にセンタリングする方法

　はてなブログで使用した画像を自動的にセンタリングする方法です。

　画像が左に寄ってしまっているのはずっと気になっていて、またCSSでなんとかできるだろうなあと漠然と考えていたのですが結局放置してしまっていましたけれど、いろいろ見直すなかでやってみました。

CSSを設定する

　ダッシュボードの「デザイン > カスタマイズ > デザインCSS」に、次のCSSを設定します。

/* 画像のセンタリング */
.hatena-fotolife, .http-image, img.asin {
  display: block;
  margin: 0px auto;
}

【はてなブログ】画像を中央揃えにする方法【CSS】 - うりだよ。

　こちらの記事を参考にさせていただきました。ありがとうございます。

　記事と違うのは、Amazonの商品画像向けに「img.asin」を追加しているところです。

　センタリングはブロック要素に対する操作となるため、まず「display:block」でimgタグをブロック要素にしているところがポイント。

Amazonアフィリエイトの商品画像向け設定

　はてなブログはAmazomアフィリエイトの商品画像を貼り付けることができます。ですが、そのままでは左寄せで表示されてしまいます。

　これをセンタリングするために、Amazon画像のクラスである「img.asin」にも上記CSSを適用してみました。

　セレクタの指定を「.asin」だけにしなかったのは、一応、影響をイメージだけにしておきたかったからです。