wordpress画像の回り込みCSS設定

Beautiful View 3

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

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

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

 

wordpressでは画像の回り込みを設定すると<img class=alignrightなどとクラス付けされます。なので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
	}

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

人気ブログランキングへ