ワードプレスのテーマを自作しよう！

＜テーマチェックに合格するぞシリーズ＞
チェック実施の際の警告の中にこんなのがあります。

REQUIRED: .aligncenter css class is needed in your theme css.

「aligncenterはあんたのテーマのCSSに必要だ！」という意味みたいです。とは言っても前回既に.alignright、.alignleft、.aligncenterの３アライメントの内、左寄せと右寄せはやっていますから今回のセンターも実は同様です。
　

#honbun .aligncenter {
  clear: both;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

上のような設定をstyle.cssに追加すればＯＫで、これでテーマチェックエラーは消えます。実際に画像を挿入した結果を以下に示します。
　

・画像の挿入１：配置=中央、キャプション=無し

　まずは単純な中央配置です。画像はブロック要素でデーンと中央にセンタリングされました。HTMLソースは下に示しますがシンプルなものです。aligncenterがクラスに設定されているのがわかります。

<img src="http://pc-sk.com/uploads/2011/06/yama02_b-150x150.jpg" alt="" 
title="yama02_b" width="150" height="150" 
class="aligncenter size-thumbnail wp-image-6" />

　
尚、例によってCSSにaligncenterを入れておかないとセンタリングしませんので注意して下さい。
　

・画像の挿入２：配置=中央、キャプション=有り

次にセンタリングの上にキャプションをつけた場合です。まず、ワードプレス投稿画面でのソースを見てみますと、

[caption id="attachment_6" align="aligncenter" width="150"
 caption="図２．キャプション有りの例"]
<img src="http://pc-sk.com/uploads/2011/06/yama02_b-150x150.jpg" alt="" 
title="y2" width="150" height="150" 
class="size-thumbnail wp-image-6" />[/caption]

　
となっていました。［caption］というショートコードが使われているのが判ります。これがブラウザ上のソースとなりますと、

<div id="attachment_6" class="wp-caption aligncenter" style="width: 160px">
<img src="http://pc-sk.com/uploads/2011/06/yama02_b-150x150.jpg" alt="" title="y2"
 width="150" height="150" class="size-thumbnail wp-image-6" />
<p class="wp-caption-text">図２．キャプション有りの例</p>
</div>

　
と変わります。wp-caption等がワードプレスによって出力されていますね。ともかく、これでaligncenterはＯＫです。