地味に便利なはてなブログの画像を自動で中寄せする方法

はてなブログの画像は左寄せ

はてなブログのPC版の画面で普通に画像をドラッグアンドドロップしたり、UP済みの画像を配置しようとすると左寄せで配置されます。

スマホで見る限りは全然わかりませんが、PCで見ると左に表示されます。

特に私の場合、横幅を特に広くしているので、余計に寄って見えます。

そのため、画像をUPすると毎回HTML編集画面から、中寄せ用のコードを追加していました。 

これが地味に面倒くさく本当に嫌だったので、強制的に中寄せするようにCSSの定義を追加しました。

セレクタ

はてなブログで画像をUPするとフォトライフにUPされるためか、記事中の画像には「hatena-fotolife」というクラスが設定されます。

こちらをセレクタとして指定すれば問題ないのですが、どこでこちらのクラスが出力されるかはっきりわからないため、本文中に表示された画像のみを対象とするように「.entry-content img.hatena-fotolife」というセレクタにしました。

※「entry-content」は本文のdiv要素についているクラスです。

中寄せの方法

世の中にはCSSで中寄せする方法は沢山出回っていますが、imgタグ自体にCSSを適用したかったので、こちらの記事の上部分に書かれている方法を採用しました。

※毎回記事のHTMLに手を入れたくないので、デフォルトで出力されるHTMLで適用できる方法にしました。

wayohoo.com

最終的な定義はこちら

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

記事を書くときに一々HTML編集画面を開かなくてよくなったのは本当に嬉しいです。