2016-02-24

ワードプレスにキャプション付きの画像を投稿した時に、スマホで画像がはみ出てしまう場合の修正方法

投稿記事でキャプション付きの画像を投稿した際に、
ハードコーディングで画像サイズが強制的にstyleで入ってしまうと、
レスポンシブが効かなくてスマホで見た時に枠から画像がはみ出しちゃう、
という問題がありまして。

コードからwidth=”xxx”ってのを削除すればいいのですが、
いちいち削除するのもめんどくさいので、
枠からはみ出ないようにCSSで調整してみました。
具体的には「.wp-caption」にmax-width:100%;を追加するだけです。

キャプション付きの画像を投稿した時に、スマホで画像がはみ出てしまう場合の修正方法

スタイルシート(ダッシュボード>外観>テーマ編集)内を検索して、
「wp-caption」を探してください。
そして以下の部分を書き換えてください。
記述が無い場合は修正後のコードを追加で記述してください。

<修正前>
.wp-caption {
}

<修正後>
.wp-caption {
max-width:100%;
}

これで大きい画像をアップしても枠からはみ出ることが無くなります。

*2016年2月24日20:00以降のダウンロードファイルは修正済みです。

*HTML/CSSカスタマイズをする時は、必ずバックアップを取った上でお願いします!

ホームページからの集客できてますか?

ワードプレステーマ「Minimal WP」
Minimal WPのWordPressテンプレートは、月間45万PV超のブログ運営のノウハウを詰め込んだミニマルデザインテンプレート。HTML不要で初心者でも簡単におしゃれなホームページが作れます!ブログ・自社メディアを始めるなら今がチャンスです!
by
関連記事