WordPressで画像を挿入する時、「添付ファイルの表示設定」より画像の配置位置を選ぶことができます。
この時選んだ配置位置により、画像には以下のclassが付加されます。
- 配置位置 左:alignleft
- 例:<img src="example.gif" alt="ex" class="alignleft" />
- 配置位置 中央:aligncenter
- 例:<img src="example.gif" alt="ex" class="aligncenter" />
- 配置位置 右:alignright
- 例:<img src="example.gif" alt="ex" class="alignright" />
- 配置位置 なし:alignnone
- 例:<img src="example.gif" alt="ex" class="alignnone" />
WordPressのテーマを自作していた場合、上記classに対応するCSSを記述しておかないと「配置位置を指定して挿入してもうまくいかない!」みたいなクレームが発生するかもしれません。エディタ上では「左寄せ」なり「右寄せ」なりうまくいってますので。
というわけで、それぞれのclass用のCSSをご紹介します。
画像の配置位置を指定するCSS
img.alignright { display: block; margin: 0 0 0 auto; }/* 配置位置 右 */<br /> img.alignleft { display: block; margin: 0 auto 0 0; }/* 配置位置 左 */<br /> img.aligncenter { display: block; margin: 0 auto; }/* 配置位置 中央 */
この時のポイントは display: block; です。imgはインライン要素なので、ブロック要素にしないとmarginが効きません。
また、上記指定はあくまでも画像の配置位置を指定するもので、回り込みをするものではありませんのでご注意ください。
画像の回り込みをしたい場合は新たにclassを作成し、CSSはfloatをご利用ください。
画像の回り込みをしたい場合のCSS
img.float-left { float:left; }/* 回り込み 左 */<br /> img.float-right { float:right; }/* 回り込み 右 */
ただしこの場合、「添付ファイルの表示設定」からは上記classが指定できないので、エディタから指定する必要があります。
さらに回り込みをクリアする作業も発生しますので、操作する人が慣れていない場合はおすすめしないほうがいいかもしれません。
最近のコメント