Facebook
RSS Feed
Feb 24, 2016

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

投稿記事でキャプション付きの画像を投稿した際に、
ハードコーディングで画像サイズが強制的に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カスタマイズをする時は、必ずバックアップを取った上でお願いします!

Posted in WordPress初心者講座Comments Closed 

関連記事

今月の人気のワードプレステンプレートBEST 3

WordPressテーマ(スマホ対応レスポンシブデザイン)「Juliet」
公式サイト/マガジン/ビジネス・企業
WordPressテーマ(スマホ対応レスポンシブデザイン)White Studio
ビジネス・企業/コーポレートサイト/公式サイト
WordPressテーマ(スマホ対応レスポンシブデザイン)「Folclore」
ビジネス・企業サイト / マガジン