MemoRandum

ゲーム / エンタメ / 自由業

はてなブログで記事中に表示される画像を中央寄せにする方法

記事に画像を貼り付けた時、左寄せで表示される仕様になっています。

個人的には中央寄せ派なので、画像を貼り付けた時に真ん中寄せで表示されるようにします。

記事中の画像を真ん中寄せにする方法

以下のCSSをデザインCSSに貼り付けます。

.entry-content img.hatena-fotolife {
    display: block;
    margin: 0 auto;
}

解説

imgなどのインライン要素を中央寄せする場合、インライン要素を囲っているブロック要素にtext-align:centerを適用する必要があります。

今回はimgをピンポイントで中央寄せしたいので、imgをブロック要素にしてmarginの左右にautoを適用します。

この方法でimgを中央寄せする際の注意点は、imgをブロック要素にしているので、imgタグを挿入するたびに必ず改行されてしまうことです。

ASPなどのアフィリエイトリンクにはアクセス解析用の1pxの空白画像が付属していることがあり、すべてのimgをブロック要素にしてしまうと、空白の画像のところでいきなり改行されるので物凄く不自然なことになります。

幸い、はてなブログのはてなフォトライフから画像を貼り付けると.hatena-fotolifeというクラスが付与されるみたいなので、それだけを狙って中央寄せすることで事故を防ぎます。