地味に便利なはてなブログの画像を自動で中寄せする方法
はてなブログの画像は左寄せ
はてなブログのPC版の画面で普通に画像をドラッグアンドドロップしたり、UP済みの画像を配置しようとすると左寄せで配置されます。
スマホで見る限りは全然わかりませんが、PCで見ると左に表示されます。
特に私の場合、横幅を特に広くしているので、余計に寄って見えます。
そのため、画像をUPすると毎回HTML編集画面から、中寄せ用のコードを追加していました。
これが地味に面倒くさく本当に嫌だったので、強制的に中寄せするようにCSSの定義を追加しました。
セレクタ
はてなブログで画像をUPするとフォトライフにUPされるためか、記事中の画像には「hatena-fotolife」というクラスが設定されます。
こちらをセレクタとして指定すれば問題ないのですが、どこでこちらのクラスが出力されるかはっきりわからないため、本文中に表示された画像のみを対象とするように「.entry-content img.hatena-fotolife」というセレクタにしました。
※「entry-content」は本文のdiv要素についているクラスです。
中寄せの方法
世の中にはCSSで中寄せする方法は沢山出回っていますが、imgタグ自体にCSSを適用したかったので、こちらの記事の上部分に書かれている方法を採用しました。
※毎回記事のHTMLに手を入れたくないので、デフォルトで出力されるHTMLで適用できる方法にしました。
最終的な定義はこちら
.entry-content img.hatena-fotolife{
display: block;
margin-left: auto;
margin-right: auto;
}
記事を書くときに一々HTML編集画面を開かなくてよくなったのは本当に嬉しいです。