キャプションをつけて画像を挿入します。
ここでのキャプションとは、画像の説明とか見出しとかそんな感じの意味です。
01. 記事を用意し、画像を挿入する
いつもどおり記事に画像を挿入します。
キャプションは、"緑色の葉っぱ"と入力。
配置は中央、サイズは中です。
02.入力画面、HTMLソース確認
入力画面では、画像が枠で囲まれ、入力したキャプションが画像の下に表示されています。
HTMLソースは、
[caption id="attachment_48" align="aligncenter" width="300" caption="緑色の葉っぱ"]
<a href="
http://ranka.sub.jp/taroumatsu/wp-content/uploads/2012/03/green.jpg">
<img class="size-medium wp-image-48" title="green" src="
http://ranka.sub.jp/taroumatsu/wp-content/uploads/2012/03/green-300x225.jpg" alt="はっぱ" width="300" height="225" />
</a>
[/caption]
となっています。
[caption]はショートコードタグといって、WordPress独自のタグです。
03. 投稿記事の確認、HTMLソースの確認
投稿記事を公開し、画面で確認してみると、画像に枠は表示されていません。
画像部分のHTMLソースを確認すると、下記のようになっていました。
<div id="attachment_48" class="wp-caption aligncenter" style="width: 310px">
<a href="
http://ranka.sub.jp/taroumatsu/wp-content/uploads/2012/03/green.jpg">
<img class="size-medium wp-image-48" title="green" src="
http://ranka.sub.jp/taroumatsu/wp-content/uploads/2012/03/green-300x225.jpg" alt="はっぱ" width="300" height="225" />
</a>
<p class="wp-caption-text">緑色の葉っぱ</p>
</div>
04. 装飾
画像部分を枠で囲み、キャプションを中央へ表示するように、style.cssに下記を追加します。
.wp-caption {border: solid 1px #aaaaaa;
text-align: center;
padding-top: 5px}
[0回]
PR
