Kozackman Lab

キャプションをつけて画像を挿入する。

銀座松屋のショーウィンドウ。
銀座の夜景は綺麗です。

ショーウィンドウに映る、Apple。

<div id="attachment_43" class="wp-caption aligncenter" style="width: 640px">
<a href-"http://www.www.www/wp/wp-content/...中略...jpg">
<img src="htttp://ww.www.www/wp/....中略....jpg" alt="銀座夜景IMG"></a>
<p class="wp-caption-text">ショーウィンドウに映る、Apple。</p></div>

captionのショートコードタグには、上記のハイライトされているソースが出力されている。
全体がマークアップされている<div>には、「wp-caption」と「aligncenter」というクラス名が指定され、
キャプション文章がマークアップされている<p>には、「wp-caption-text」というクラス名が指定されている。

/* 記事内の画像 */
.wp-caption {
   border: solid 1px #aaaaaa;
   text-align: center;
   padding-top: 5px;
}

borderプロパティで、枠線の太さを１px、色をグレーに指定し、
text-alignプロパティでキャプションを画像の中央に揃えて表示している。
また、padding-topプロパティで画像の上に余白を挿入している。

2012/08/21　3:20 AM｜ カテゴリー ： WordPress｜ コメント