wordpress画像の回り込み設定キャプション付

キャプション付きの画像回り込み設定css

前回の続きです。
wordpressで画像の表示を右や左に設定した場合の、テキストの画像回り込み設定、キャプションを付けた時の場合です。

キャンプションを付けなければ吐き出されるタグは<img class=なのですが、キャプションを付けると<div class=”wp-caption”と変わります。
なので ご使用のテーマで上手く回り込まない時は、それに対してcssで設定してあげましょう。
下記はこのテーマのcss設定例です。div.alignrightは右寄せの場合、div.alignleftは左寄せの場合です。それぞれのpaddingは枠の幅 marginはテキストとの余白です。
.wp-captionで枠の色等を設定できます。

[css]/* キャプション */

div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}

div.alignright {
padding: 5px;
margin: 0 0 2px 7px;
display: inline;
}

div.alignleft {
padding: 4px;
margin: 0 7px 2px 0;
display: inline;
}

.wp-caption {
border: 1px solid #666666;
text-align: center;
background-color: #F8F8F8;
padding-top: 4px;
margin: 10px;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}

.wp-caption img {
margin: 0;
padding: 0;
border: 0 none;
}

.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
padding: 0 4px 5px;
margin: 0;
}

/* キャプションEND */
[/css]

テーマのカスタマイズ等のご相談/お問い合わせはこちら
個人の方でもお気軽にご相談ください

   2011/06/20