[WordPress] キャプションを設定した画像はフルードイメージのCSS設定が効かないので注意。

Sponsored Link

wordpress1

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

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

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

スクリーンショット_2017-02-03_15_42_32

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

日本猿

あー眠い

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

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

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

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

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

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

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

関連記事

福岡のウェブデザイン事務所「ハブワークス」

HP作成・リニューアルは福岡のハブワークスまでお気軽にお問い合わせください。ウェブサイト公開後の修正・更新もお任せください。フリーランスだからできるリーズナブルな料金設定でサービスをご提供いたします。