【デザインCSS】画像表示サイズを縮小したい!記事内写真(はてなフォト)の一括変更について。【コピペでOK】

当ページのリンクには広告が含まれています。

ブログの書き始めは気にならなかったのだが、最近記事中の画像サイズが気に入らず中々ブログを書く気にならなかった。
ここでいう画像サイズというのは表示されるサイズの意味でファイルサイズ的な意味ではない。
わかりやすく書くと記事幅に対しての画像の表示サイズといえばよいのだろうか…
記事横幅が100に対して写真も100の表示だと息が詰まるデザインと感じていた。

今回手動で画像サイズを下げてもみたが、スマホでの表示サイズが変わらず途方に暮れた…がなんとか形にできたので記録に残したい。

※これが完成形だ!

ちなみに投稿時の画像サイズは下記の方法であらかじめ設定することもできる。※表示サイズは別の話。

  • はてなフォトにて投稿サイズをあらかじめ設定する。※PC
  • 設定から画像サイズ(投稿時のサイズ)を1448px,1024px,512pxで設定。※スマホ
  • 設定から画像サイズを【オリジナル】にした上でアプリなどでサイズ変更後に投稿。※スマホ

検証したところデフォルト設定の最小サイズ512pxだとスマホでの表示も小さくなったが、画像がぼやけてしまい微妙すぎた。
サイトが軽くなるという意味でいいかな?とも思ったが、Google推奨サイズが思ったよりも大きかった事と、綺麗な画像で旅行記を残したいという思いから1024px設定にて表示を変更する方法を考えた。

今回はデータサイズではなく表示サイズ。記事の幅、高さに対して写真がどのように表示されるかを変えたい。

スマホで見たときに画像がバーーーーンと上から下まで、さらには横幅いっぱいにデカデカ表示されてしまい、スクロールしないと文章にたどり着けず読むのがしんどいと感じるようになったからだ。
使用しているテーマによっては初めから画像のサイズが画面よりやや小さめに表示されるテーマもあるようだが、今更テーマを変更するとブログが崩壊しそうなのでなんとかデザインCSSでどうにかできないか考えていた。
特に私のブログは画像数がやけに多いので途中で【もうええわ…】となる(自分ですら)
そこでスマホでの(PCでも)表示サイズを小さめにしてスクロールをバンバンせずともサッと目に入るデザインにしたいと考えた。

パターン①画像のセンタリング

試しに画像のピクセルを手動で小さくし、それをセンタリングする方法を試した。
PCから限定だが、はてなブログは写真にカーソルを合わせると写真のサイズを任意にリサイズできる。
そこで縦横のサイズをちょうどよさげに小さくした。
すると画像は小さくなったが、左寄りになりかっこ悪くなってしまったので、以下のコードをデザインCSSに入力した。

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

左寄りになっていた画像は中央に揃い完全に解決!
と思いきやスマホで確認すると以前と変わらずデカデカと画像が表示されていて絶望した。
画像サイズは確かに小さくなったのに…そしてPCブラウザからの表示は完ぺきだったのに…
なによりこの方法だと画像を1枚ずつ手動でリサイズという途方もない無駄な作業もあるので、やはり一括での画像縮小が望まれると感じた。

パターン②記事の幅を基準として画像の相対サイズを小さくする

これが一番しっくりきたしほぼ希望通りに仕上がりました。

参考にさせていただいたコード引用元のブログはコチラです。本当にありがとうございます!
検索の仕方が悪かったのか【はてなブログ 一括画像縮小】【はてなフォト 一括サイズ変更】などいろいろ検索をかけてみたが、全く希望の記事にたどり着けず、着眼点を変えて【画像 角を丸める】と検索するとCSSが豊富に出てきた。
その中の一部を改変して自分の望む形にします。

/*↓----画像表示----↓*/
. hatena-fotolife, .http-image{
text-align: center;
}
.hatena-fotolife, .http-image {
width: 90%; /*記事の幅に対する画像サイズ*/
border-radius: 20px; /*カドを丸くする度合い*/
object-fit: cover;
box-shadow: 4px 4px 8px; /*影の設定*/
}
/*↑----画像表示----↑*/

主な変更点は

. hatena-fotolife, .http-image

この部分です。
引用元ブログ様だと画像1枚ずつに設定ができるようになっていたのですが、私は写真が多すぎて1枚ずつは不可能だったのでブログ全体の写真を一括で変更できる上記の範囲に設定しました。
はてなブログの(知らんけど多分ほぼ)全ての画像に適応されるはずです。
記事幅に対して90%の縮小となり、かつ角が取れることでドデカ画像がなくなり記事全体が少し見やすくなりました。

写真のように両幅に余白が生まれ、息苦しさがなくなった。
パターン①とパターン②を足してデザインCSSに記載することですべての記事の写真が縮小+センター揃えになりました。
(自己責任でね、バックアップ必須!)

おわり



目次