多くの場合、PC用とスマホ用のテーマでは記事部分の大きさが違います。 なので、PC用のテーマに合わせて画像のサイズを設定するとスマホ用テーマでは記事からはみ出してしまいます。これは(・A・)イクナイ!! という訳で方法を調べ、実際に最適化した状態がこちらです。 しっかり画像が記事の中に収まっていますね。 結構これのやり方がお手軽簡単だったので軽く解説を。 「max-width」を使えば一発! 最初これをやろうとした時、 「テーマに合わせて画像のサイズを変えるのか…きっとjQueryとか使ってメンドクサイんだろうな…」 と思いましたが、調べてみたら超簡単! なんとCSSのプロパティに「max-width」を加えるだけ! img { max-width: 100%; height:auto; } このように「max-width」を100%に設定することによって画像のサイズを囲んでいる要素のいっ
![【CSS】「max-width」を使えばスマホ用とPC用に自動で画像のサイズを合わせられます。](https://cdn-ak-scissors.b.st-hatena.com/image/square/00e0fd62709321833e95203bec91666804032e21/height=288;version=1;width=512/https%3A%2F%2Fnumber333.org%2Fwp-content%2Fuploads%2FIMG_6011-1-1_2-mini1.png)