【WordPress】画像の表示幅を追加CSSで動的に変える

PCで表示される画像が大きすぎる

WordPressで画像表示を、主にモバイルに合わせている。だが、ブログ制作時に使用するのはPCだ。いまだ３割程度の人がPCでブログにアクセスしている。

特に画像を前面に出したいサイトだと、縦長で画面が小さいスマホだと問題ないが、横長で画面の大きなパソコンでは画像が無駄に大きすぎて、ブログが読みづらい問題がある。レスポンシブデザインによってレイアウトが崩れることはないが、無駄に大きな画像は読んでいて圧迫感があるのだ。

どうしたものか。

解決方法

ダメもとで試したらあっさり解決した。「外観」→「カスタマイズ」→「追加CSS」でCSSを追加した。

@media(orientation: landscape) {
    @media screen and (min-width: 400px){
        .wp-post-image, .wp-block-image { {
        width: 40vw;
        margin: 0 auto;
        }
    }
}

• @media(orientation: landscape)　　画面が横長の場合に有効
• @media screen and (min-width: 400px)　表示領域が400px以上の場合に有効
• .wp-post-image　　CSSを適用するクラス名（アイキャッチ画像）
• .wp-block-image 　　CSSを適用するクラス名（投稿内の画像）
• width: 40vw;　　画像の幅を表示領域の40%にする
• margin: 0 auto;　画像の上下マージンを０，左右マージンを自動調整してセンタリングする

画像が小さく表示された

テーマを公開して読み込み直すと、画像が小さく表示された。これで一段と見やすくなった。

スマホでは画面いっぱいに画像が表示されたままだ。

画像が文章とくっつく場合

テーマによっては、このCSSにより画像と文章の間のマージンが無くなる場合がある。そのときは、marginの下にパディングを追加すればよい。

    padding: 0 0 1em 0;

padding: 上 右 下 左

である。上記の例では下に１行分の空白を指定した。

同じ問題に悩む方々の参考になれば幸いである。