wordpress画像の回り込みCSS設定

Beautiful View 3

wpで画像を貼る時、右寄せや左寄せにしても 大抵の無料のテーマ等では画像の回り込みをさせてくれません。

そこでCSSに回り込みの記述を入れると自由に設定できます。

この画像は左配置にしています。

 

wordpressでは画像の回り込みを設定すると<img class=alignrightなどとクラス付けされます。なのでCSSには

[css]img.centered {
display: block;
margin-left: auto;
margin-right: auto;
}

img.alignright {
padding: 4px;
margin: 0 0 2px 7px;
display: inline;
}

img.alignleft {
padding: 4px;
margin: 0 7px 2px 0;
display: inline;
}

.alignright {
float: right;
}

.alignleft {
float: left
}[/css]

と入れましょう。
marginとは画像とテキストの余白を指定するものです。
例えば margin: 0 0 2px 7px とありますが
これは時計回りに上右下左の余白を指定しているのですが、この書き方の場合は
左側が7px空く設定なのです。なので右寄せの場合 左をもっと空けたければ
この7の数字を変えれば良い訳です。
ちなみに wordpressで画像投稿する際 キャプチャーを使用してしまうと
<img class~というタグは書き出されず <div要素で書き出されます。
これについては また次回。

人気ブログランキングへ

テーマのカスタマイズ等のご相談/お問い合わせはこちら
個人の方でもお気軽にご相談ください

   2011/06/14