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

だるかぶ

サンダルでスーパーカブ乗りの『だるかぶ』です！
ご訪問ありがとうございます。ゆっくりしていってね。（本ページは広告を含みます。）

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

私が今使っている 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 日本語版

現場からは以上です。それでは、またッ！！！

だるかぶ

最後までお読みいただきありがとうございます！ スキ・コメント・シェア・フォローなどで応援いただけると『だるかぶ』のやる気がアップします！

記事内容の修正について 記載している内容は記事執筆時の情報です。 できるだけ最新情報を掲載するようにしていますが、情報が間違っている場合は「コメント」でご指摘いただけるとありがたいです。