HOME > > > レスポンシブWebデザインで気をつけたいWordPressのキャプションの使い方

レスポンシブWebデザインで気をつけたいWordPressのキャプションの使い方

レスポンシブWebデザインにした時の画像サイズ

レスポンシブWebデザインを採用した際、各端末によって横サイズが変わる様にしていると思います。
もちろん画像もそうです。
imgに対してwidth:100%;等の設定をしていますが、画像にキャプションを設定するとリサイズが効かない様です。
キャプションを使う場合も考えて、設定しておきましょう。

キャプションを入れてメディアを追加した時のコード

キャプションを設定し画像を追加すると、以下の様なソース例になります。

<div id="attachment_33" style="width: 660px" class="wp-caption alignnone">
<img class="size-full wp-image-33" alt="altテキスト" src="http://www.sample/wp/wp-content/uploads/2000/02/sample.jpg" width="650" height="488" />
<p class="wp-caption-text">キャプションテキスト</p></div>

CSSの設定

imgをwidth:100%;にしているだけでは、キャプション内の画像はリサイズされません。
「wp-caption」にcssを設定しましょう。

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

設定完了

設定は以上です。
キャプションを使わない場合もあるのでちょっと忘れがちになっちゃいます。
レスポンシブデザインと言うとスマフォ?と思いがちですが、PCでもタブレットでも同じ事が言えるので最初から設定しておいた方が崩れがないでしょう。

このページを共有する

Facebook
twitter
Line
googleプラス
はてなブックマーク
Pocket