ブログ構築の手順は【総合まとめ】から!

[ WordPress ] 画像の回り込み用 CSS を書いてみた

WordPress 3.0 で投稿に画像を追加する時、画像の配置を、なし、左、中央、右、の4パターンから選択する事ができ、次の CSS のクラス名 img タグに付与されます。

配置CSS のクラス名
なしalignnone
alignleft
中央aligncenter
alignright

私が今使っている Vicuna と言うテーマには、そもそも上記のようなスタイルの記述が無かったので追加してみました。
ちなみに、WordPress の標準テーマである default, twentyten には回り込みに関するスタイルが書いてありました。

/* 画像の回り込みとか */
.aligncenter { display: block; clear: both; margin: 0.25em auto 1.5em; }
.alignleft { float: left; clear: both; margin: 0.25em 1.5em 1.5em 0; }
.alignright { float: right; clear: both; margin: 0.25em 0 1.5em 1.5em; }
h2, hr { clear: both; }

配置:左が連続すると、回り込みがおかしくなってしまうので、

<div style="clear:both;"></div>

を挟むか、見出しか水平線を書けば回り込みを解除できます。

参考 : CSS – WordPress Codex 日本語版

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です