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