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

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

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

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

本文の左右に画像を挿入する-Part.2

新宿夜景IMG02今度は、右に画像を挿入してみる。
画像の設定画面で、配置を右にしても、CSSで配置を設定しないと右には配置されない。
これは、CSSの設定を初期化したためで、defaultのTwenty-Elevenなどのテーマだと、
問題なく表示されると思われる。

クラス名が「alignright」の画像に対してfloatプロパティを「right」と指定する。
これで画像が右側に配置され、左側に後続のコンテンツが回りこんで表示される。
また、margin-leftとmargin-bottomに10pxの余白を挿入し、画像と文章の間隔を調整する。

/* 記事内の画像 */
… 略 …
.alignright {
   float: right;
   margin-left: 10px;
   margin-bottom: 10px;
}

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

本文の左右に画像を挿入する。

東京夜景IMG本文中の画像を挿入したい位置にカーソルを合わせる。
画像を左右に配置する場合、横に表示したい文章の行頭にカーソルを合わせる。
ここでは、１行目の文章の行頭にカーソルを合わせて「画像を追加」ボタンをクリックしました。

しかし、このままでは画像の横に文章が表示されないので、スタイルシートで配置を指定します。

p.postinfo {
   color: #2b76cc;
   text-align: right;
   margin: 20px 0 0;
   clear: both
}

/* 記事内の画像 */
.alignleft {
   float: left;
   margin-right: 10px;
   margin-bottom: 10px;
}

画像の横には文章だけを表示するため投稿日のところで回りこみを解除する。
そこで、投稿日をマークアップした<p class="postinfo">にたいして「clear: both」を指定する。

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