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

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

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

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

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 */