WordPressで、キャプションを付けた画像の可変が利かなくなった場合の対処方法
現象
WordPressの記事投稿で画像を使用する際に、キャプションを付けると画像サイズの可変が利かなくなるという現象があります。
原因は、キャプションを付けるとimgが自動的に<div>~</div>で囲まれ、インラインで幅が指定されてしまうからです。
1 2 3 4 |
<div id="attachment_〇〇〇〇" style="width: 650px" class="wp-caption alignnone"> <img ~ /> <p class="wp-caption-text">キャプション文章</p> </div> |
この style=”width: 650px” のようにインラインで指定されたcssは優先順位(詳細度)が高いため、扱いには注意が必要です。
対処方法
今回の例の対処方法として、同時に追加された class=”wp-caption alignnone” に対してCSSを追記します。
1 2 3 |
.wp-caption, .alignnone{ max-width: 100%; } |
これで、キャプションを付けた画像にも可変が利くようになります。
同じような現象が起きた場合は是非お試しください。
class=”wp-caption alignnone”は、ひょっとしたらWordPressのバージョンが変わるとクラス名も変わるのかな・・・という心配もありますが、そこは臨機応変に対応していくしかないかな、と思います^^;
公開日:2017年3月24日
最終更新日:2017年3月24日