目次
記事画像を綺麗にレイアウトしたい！
なんとも初歩的なことなんですがね
インストールしたテーマにもよるでしょうけど
どうも画像のサイズがある一定以下のサイズになった時に、パソコンでもスマホでも左寄りに表示されてしまっていて…
見るたびにA型の血が騒ぎ出してしまう僕
これをなんとかできないものか…
なぜ画像を中央表示にするのか
単純に「気持ち悪いから」ですよね
あと、あんまりないかもですけど200pxとか150pxとかそれ以下くらいの画像になるとスマホでも画像が左に寄るんで、読み手の目線が一瞬ブレるような…
まぁ考えすぎですけど
ちょっとでもユーザビリティを上げたいって気持ちだったり
サイトの作りをしっかりと意図して作って読者からの信頼性を上げたいなってのが狙いですね
ということでなんか無いものかと探していたら見つけたので貼っておきます
コードはこちら
<code>.hatena-fotolife, .http-image {
display: block;
margin: 0px auto;
}</code>
これをコピペすればOK
しかし僕のブログでははてなのポートフォリオは使用しておらず、代わりにFlickrを使用していますので
<code>.hatena-fotolife, .http-image</code>
という区分の仕方だと対応できません
（はてなフォトライフをお使いの方は上記で修正可能と思われます）
FlickrでもGoogleフォトでも対応のCSS
先程のだとはてなフォトライフの仕様になっていますので、そちらを少し修正してFlickrでもGoogleフォトを使用時でも画像が中央に来るようにしてみたいと思います
コードはこちら↓
<code>.entry-content img {
display: block;
margin: 0 auto;
}</code>
こちらをはてなブログの【デザインCSS】にコピペで貼り付けるだけです
こうすることで記事画像の対象が全ての画像に適応されますので、ひとまずは記事内の画像は全て中央に寄せられます
こうだったのが
このように
ちゃんと真ん中になっていますね。一安心…
余談
最初imgタグ全体をセンターにしちまえば良いんじゃねぇかって思ったんですがね
img{
でやっちゃうとサイドバーの画像も中央表示になる上に、はてなスターも大変なことになったので迂闊にimgタグでやらないように（ってやるやつ僕ぐらいか）
ちなみに記事を読まずにトップ画面のスター押してるような人もいるようなので、今はトップページのはてなスターも消してしまったため、imgのみでやってもそこまで支障なさそうですけど
トップページのはてなスターは消してしまうのがおすすめですよ〜
そちらに関してはやり方含め次回以降記事にしたいと思います
やり方とその理由を記事にしました。
以上!
最後までご覧いただきありがとうございました
CSSに関しての参考本
こちらは本自体の色使いがきれいで読みやすいのでオススメです！
