読者です 読者をやめる 読者になる 読者になる

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

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

はてなブログの画像、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」だけにしなかったのは、一応、影響をイメージだけにしておきたかったからです。