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

WordPress

2018/06/12

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

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

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

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

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

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

この記事の目次

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

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

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

テーマによっては、mainタグ内に記事本文がないことがあります。その場合はセレクタをうまいこと調節して（「#content img」にするなど）ください。

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

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

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

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

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

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

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

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