ワードプレスで画像の配置が効かない原因

ビジュアルモードで画像配置が効かない原因

ビジュアルモードで画像配置が効かない原因は、ワードプレス独自のclassにcssを設定していないからではないでしょうか?

ビジュアルモードで画像配置を効かせたいならワードプレス独自のclassにcssを設定しましょう。
ワードプレスのテーマを自作している場合、cssを記述してあげないと画像配置が効きません。

でないと「画像配置を指定して挿入してもうまく反映されないんだけど!」と言われます。

ワードプレス独自のclass

左寄せ:「alignleft」

<img src="example.png" alt="example" class="alignleft" />

右寄せ:「alignright」

<img src="example.png" alt="example" class="alignright" />

中央寄せ:「aligncenter」

<img src="example.png" alt="example" class="aligncenter" />

配置なし:「alignnone」

<img src="example.png" alt="example" class="alignnone" />

cssの設定

▼cssファイルに以下の記述を追記してください。

img.alignright{
	display: block;
	margin: 0 0 0 auto;
}
img.alignleft{
	display: block;
	margin: 0 auto 0 0;
}
img.aligncenter{
	display: block;
	margin: 0 auto;
}

<img>はインライン要素なので、しっかり「display:block;」にしてあげましょう。
でないと「margin」が効かないので画像が左右中央に動きません。

RETURN
top