まるで魔法！記事内の画像を自動でちょうどいいサイズに調整してくれるCSSカスタマイズ！

この記事では、ブログ記事内の画像を自動でちょうどいい見やすいサイズに調整してくれるCSSカスタマイズを紹介しています。

こんにちは、さいとう（@S41T0H）です。

読みやすい記事って、見出しの直後に画像が挿入されているものですよね。

特に文章が多い記事だと、画像が入ることでテンポ良く読むことができます。

しかし、スマホ画面だとその画像が画面を占拠してしまって読みづらくなることも。

そこで今回はブログ記事内の画像を自動でちょうどいい見やすいサイズに調整してくれるCSSカスタマイズを紹介します。

ブログ記事内の画像を自動でちょうどいい見やすいサイズに調整してくれるCSSカスタマイズ

下のCSSをお使いのテーマのstyle.css（または、「外観」→「カスタマイズ」→「追加CSS」）に貼り付けてくださいね。

main img{
    max-height: 60vh;
    width: auto;
}

よくわかる解説

max-heightは要素の高さの最大値を指定するプロパティ。

これを「60vh（＝Viewport Heightの60%）」とすることで、Viewport Height＝画面の高さの60％よりも縦幅が大きい画像を60％の大きさまで自動で縮小してくれるのです。

つまり、スマホやPCで見た時の画面が画像で占領されなくなります。

width: autoを指定すると、画像幅は高さにあわせて自動で（アスペクト比を維持したまま）縮小してくれます。

ブログにおしゃれな水平線＜hr＞を入れるCSSデザインカスタマイズ

このサイトでは水平線のデザインをこんな感じにしています。 ↑いいでしょう？笑 じつはこの水平線、CSSで一瞬で実装できるんです。 アイキャッチ画像ではCocoonとしていますが、他のWordPressテーマでも使用できるはずです。...

s41t0h.jp

2018/06/08

【支援お待ちしております！】

当サイトが役に立ったと思ったら投げ銭サービスpolcaで支援していただけたら幸いです！（300円単位での投げ銭が可能です）

継続的な更新・サポートのためにご支援お願いいたします……！

▶支援先：サイトに掲載するCSSカスタマイズの支援をお待ちしています！

サイトに掲載するCSSカスタマイズの支援をお待ちしています！ - polca（ポルカ）

"今後の記事執筆の励みになります！"を支援のおかえしとして受け取ることができます。

polca.jp

その他のカスタマイズは下記ボタンから。