WordpPress で画像が回りこまない

WordPress ではメディアの配置時に左右・中央などの指定が可能です。
この際にはソース上でフロートが指定されています。
公開配布されているテーマでは、フロート時の挙動は CSS でフロートに対するレイアウトが指定されているはずです。

自作テーマを作成したところ、画像が回りこまない！？
この場合は CSS で画像の回り込み関係のスタイル指定が必要です。

画像の回り込みはスタイルシートで指定

WordPress では投稿時に画像の位置を指定することにより、 img タグに以下の class タグが挿入されます。

1. 配置指定なし→alignnone
2. 左配置指定→alignleft
3. 中央配置指定→aligncenter
4. 右配置指定→alignright

このクラスに対して、画像に関する回り込み処理を CSS を記述します。

投稿時の位置指定による配置の違いのサンプル

CSS での基本的な画像の回り込み（フロート）処理の例を紹介します。

配置指定なし

投稿時の画像に対する配置指定の違い。テキストはこのようにレイアウトされます。

中央配置指定

投稿時の画像に対する配置指定の違い。テキストはこのようにレイアウトされます。

左配置指定

投稿時の画像に対する配置指定の違い。テキストはこのようにレイアウトされます。

右配置指定

投稿時の画像に対する配置指定の違い。テキストはこのようにレイアウトされます。

回り込みのための CSS 記述サンプル

このように画像を配置するためには以下のように CSS で指定します。
自作などお使いのテーマで画像がうまく回り込まないという方は style.css にコピーしてみてください。（マージンなどはお好みで変更ください）

/* 画像の回り込み */
.alignnone {
  padding:4px;
  margin:0px 15px0 15px;
}
.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding:4px;
}
.alignright {
  float: right;
  display: inline;
  padding:4px;
  margin:0px 15px0 15px;
}
.alignleft {
  float: left;
  display: inline;
  padding:4px;
  margin:0px 15px0 15px;
}
.clear {
  clear: both;
}

執筆:R3098

WEB サービス構築・監修が生業です。 WordPress 関連では Aurora Heatmap などプラグイン開発も行っています。悩めるサイト運営者の無料相談受付けます！