「Captionショートコード」にはフルードイメージの指定が効かない

Caption ショートコードとはWordPressで標準利用できるシンプルなショートコード。

通常は「メディアを追加」で画像にキャプションを設定することで利用できます。

この設定により、簡単にコンテンツ(主に画像)をキャプションで囲み、設定したテキストを次のように表示することができます。

あー眠い

便利ですが、このショートコードを利用して表示した画像はレスポンシブWEBデザインで指定したフルードイメージのCSS設定が効きません。

フルードイメージのCSS設定

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

キャプション設定画像へのフルードイメージ対応方法

「Captionショートコード」により出力されるコードにはimgを囲むdiv要素にwp-captionというクラス名が付きます。

このクラスに直接フルードイメージのCSSを設定すれば、表示領域のサイズに合わせて画像を表示することができます。

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