ありがとうございます。Takuya.B（@TB_IQ）です。

奥歯に詰まった食べカスが取れたときのような、清々しい気持ちを味わっています。

ブログリニューアル時から悩んでいた、ウィンドウサイズを縮小すると枠外に画像がハミ出てしまう問題がついに解決しました！！！私と同じ悩みを皆様が抱かぬように丁寧に解説します！！←

具体的に何が悩みだったの？

記事内に大サイズの画像を貼り付けるとこのように枠外にハミ出してしまいます。

この問題を解決するためには以下のCSSのコードを追加するだけで解決します。

img {
   max-width: 100%;
   height: auto;
}

このコードは“画像がどのウインドウサイズでも枠内いっぱいに幅を広げ、その幅に合わせて高さを自動で調節する”という意味です。

ブログデザインの初期段階からこの問題には直面していたので、このコードは早々に追加していました。しかし、問題が解決することはありませんでした。オリジナルテーマだと、こういう不具合に見舞われるので大変です…（汗）

真犯人はお前だったのか

何気なく過去の記事を見ていた時のことです、私は自分の目を疑いました。

あれできてるやん？(ﾟдﾟ)！

ん？どういうことだ…。

そこで私は1枚目の画像と2枚目の画像の違いは何かについて考えました。違いといえば、photopinで拾ってきた画像と自分で撮った写真くらいだよな…と。

photopinとデジカメ…

ネット上の画像と自前の写真…

引用元の有無…

ﾋﾟｷｰﾝ!!(ﾟдﾟ)

そうか！キャプションが問題なのか！！

調べた所によると、キャプションを追加している場合だと前述のCSSのコードだけでは不十分らしく、別途コードを書く必要があるみたいです。

そのコードはキャプションのclassである.wp-captionの幅を指定するというもので、以下になります。

.wp-caption { max-width: 100%; }

ページを確認してみましょう。

できました！！Wordpressは簡単に記事投稿出来たり、カスタマイズすることが出来るのが利点ではありますが、このようにソースコードをイジるときは注意が必要ですね（汗）

まとめ

最後になりますが、今回登場したコードをまとめておきます。

WordPressで画像をウインドウサイズを縮小しても画像がハミ出さないようにするためのCSSコードはこちらです。

img {
     max-width: 100%;
     height: auto;
}

次にキャプション付きの画像を表示するのであれば、こちらのCSSコードも追加しておきましょう。

wp-caption { max-width: 100%; }

ここ最近ブログのデザインに注力しようと考え、取り組んでいますが、乗り越える壁はまだまだあります。解決法を検索してもヒットしないような問題もありますので、わかり次第、このように記事にしていきたいと思います！