wordpress画像の回り込みCSS設定
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要素で書き出されます。
これについては また次回。