いろいろブログカスタマイズメモ

はてなブログのカスタマイズ、書き方などのメモ、チートシートです。/※本サイトはアフィリエイトプログラムによる収益を得ています。ページ内のリンクがアフィリエイトリンクの場合があります。

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