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

平日WEB系SE 週末時々自転車屋

WEB系の技術ネタや大好きなお酒、週末手伝う自転車屋の話などを書きます。

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

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

はてなブログの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編集画面を開かなくてよくなったのは本当に嬉しいです。