画像の幅をコンテンツに合わせて可変させる魔法のコトバ [WordPress]

2017/05/24
ブログ / WordPress

IMG 4998

モバイル向けのテーマにWP-touchを使っていません、@jinnaitakumiです!

今回のポイントをまとめると

  • モバイルで画像が余裕ではみ出す
  • コンテンツの幅に合わせて自動調整してほしい
  • スタイルシートにちょろっと書くだけで解決!

の3つです!

モバイルテーマでも画像の幅が調節されない

んです。そのままだと。

▼こんなふうに、画像が余裕ではみ出す。
IMG 4997

これをうまいこと調整してくれるように、コードを書き加えましょう。

画像のwidthを可変してくれる魔法のコトバ

▼スタイルシートにこれを追記しましょう。
img{
    max-width: 100% !important;
    height: auto !important;
}
スタイルシートは、WordPress管理画面の「テーマ編集」を開くと編集できます。

これでモバイルでも、キレイに画像の幅を調整して表示してくれます。

IMG 4971

まとめ

ということで、今回のポイントをまとめると

  • モバイルで画像が余裕ではみ出す
  • コンテンツの幅に合わせて自動調整してほしい
  • スタイルシートにちょろっと書くだけで解決!

の3つです!

WP-touch使ってる場合は勝手にやってくれるんですけどね。

こういうテクニックをひとつひとつ覚えていくのが、最近は楽しくて仕方ありません。