キャプションをつけて画像を挿入する。
銀座松屋のショーウィンドウ。
銀座の夜景は綺麗です。
<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プロパティで、枠線の太さを1px、色をグレーに指定し、
text-alignプロパティでキャプションを画像の中央に揃えて表示している。
また、padding-topプロパティで画像の上に余白を挿入している。
コメントフィード
トラックバックURL: http://kozackman.sakura.ne.jp/wordpress/wp-trackback.php?p=144