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

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

WordPressで画像表示を、主にモバイルに合わせている。だが、ブログ制作時に使用するのはPCだ。いまだ3割程度の人が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; 画像の上下マージンを0,左右マージンを自動調整してセンタリングする

画像が小さく表示された

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

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

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

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

    padding: 0 0 1em 0;

padding: 上 右 下 左

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

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