【Flickrも対応!】はてなブログでの記事画像を真ん中に『中央表示』するCSS

css-eyecatch

記事画像を綺麗にレイアウトしたい!

 

なんとも初歩的なことなんですがね

 

インストールしたテーマにもよるでしょうけど

 

どうも画像のサイズがある一定以下のサイズになった時に、パソコンでもスマホでも左寄りに表示されてしまっていて…

 

 

見るたびにA型の血が騒ぎ出してしまう僕

 

 

これをなんとかできないものか…

 

 

なぜ画像を中央表示にするのか

単純に「気持ち悪いから」ですよね

 

あと、あんまりないかもですけど200pxとか150pxとかそれ以下くらいの画像になるとスマホでも画像が左に寄るんで、読み手の目線が一瞬ブレるような…

 

まぁ考えすぎですけど

 

ちょっとでもユーザビリティを上げたいって気持ちだったり

 

サイトの作りをしっかりと意図して作って読者からの信頼性を上げたいなってのが狙いですね

 

 

記事画像中央表示の参考サイト

ということでなんか無いものかと探していたら…

 

ありました

 

こちらの記事です

uriuridayo.hatenablog.com

 

id:uriuridayo さま大変ありがとうございます!

 

 

こちらのブログではコードを

 

.hatena-fotolife, .http-image {
display: block;
margin: 0px auto;
}

 

というやり方で書いてありました

 

しかし僕のブログでははてなのポートフォリオは使用しておらず、代わりにFlickrを使用していますので

 

.hatena-fotolife, .http-image

 

という区分の仕方だと対応できません

(はてなフォトライフをお使いの方は上記で修正可能と思われます)

 

FlickrでもGoogleフォトでも対応のCSS

先程のだとはてなフォトライフの仕様になっていますので、そちらを少し修正してFlickrでもGoogleフォトを使用時でも画像が中央に来るようにしてみたいと思います

 

コードはこちら↓

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

 

こちらをはてなブログの【デザインCSS】にコピペで貼り付けるだけです

 

こうすることで記事画像の対象が全ての画像に適応されますので、ひとまずは記事内の画像は全て中央に寄せられます

 

こうだったのが

blogimage-left

 

このように

blogimage-center

 

 

ちゃんと真ん中になっていますね。一安心…

 

余談

最初imgタグ全体をセンターにしちまえば良いんじゃねぇかって思ったんですがね

 

img{

でやっちゃうとサイドバーの画像も中央表示になる上に、はてなスターも大変なことになったので迂闊にimgタグでやらないように(ってやるやつ僕ぐらいか)

 

 

ちなみに記事を読まずにトップ画面のスター押してるような人もいるようなので、今はトップページのはてなスターも消してしまったため、imgのみでやってもそこまで支障なさそうですけど

 

トップページのはてなスターは消してしまうのがおすすめですよ〜

 

そちらに関してはやり方含め次回以降記事にしたいと思います

 

 

以上!

 

最後までご覧いただきありがとうございました

CSSに関しての参考本

こちらは本自体の色使いがきれいで読みやすいのでオススメです!

ブログ
この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
もしよろしければシェアお願いいたします
muddydaddy3をフォローする
スポンサーリンク
どろんこあそび

コメント