![画像の幅をコンテンツに合わせて可変させる魔法のコトバ [WordPress] 画像の幅をコンテンツに合わせて可変させる魔法のコトバ [WordPress]](https://jinnaitakumi.com/wp-content/uploads/IMG_4998.jpg)
画像の幅をコンテンツに合わせて可変させる魔法のコトバ [WordPress]
2013/04/11モバイル向けのテーマにWP-touchを使っていません、@jinnaitakumiです!
今回のポイントをまとめると
- モバイルで画像が余裕ではみ出す
- コンテンツの幅に合わせて自動調整してほしい
- スタイルシートにちょろっと書くだけで解決!
の3つです!
モバイルテーマでも画像の幅が調節されない
んです。そのままだと。
▼こんなふうに、画像が余裕ではみ出す。

これをうまいこと調整してくれるように、コードを書き加えましょう。
画像のwidthを可変してくれる魔法のコトバ
▼スタイルシートにこれを追記しましょう。
img{
max-width: 100% !important;
height: auto !important;
}
スタイルシートは、WordPress管理画面の「テーマ編集」を開くと編集できます。
これでモバイルでも、キレイに画像の幅を調整して表示してくれます。

まとめ
ということで、今回のポイントをまとめると
- モバイルで画像が余裕ではみ出す
- コンテンツの幅に合わせて自動調整してほしい
- スタイルシートにちょろっと書くだけで解決!
の3つです!
WP-touch使ってる場合は勝手にやってくれるんですけどね。
こういうテクニックをひとつひとつ覚えていくのが、最近は楽しくて仕方ありません。