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

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

銀座夜景IMG

ショーウィンドウに映る、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プロパティで、枠線の太さを1px、色をグレーに指定し、
text-alignプロパティでキャプションを画像の中央に揃えて表示している。
また、padding-topプロパティで画像の上に余白を挿入している。

コメントを残す

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

コメントフィード

トラックバックURL: http://kozackman.sakura.ne.jp/wordpress/wp-trackback.php?p=144