WordpPressで画像が回りこまない

WordpPressで画像が回りこまない

2013/02/23
タグ: テーマ, テンプレート, 一撃解決, 初心者

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 15px 0 15px;
}
.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding: 4px;
}
.alignright {
  float: right;
  display: inline;
  padding: 4px;
  margin: 0px 15px 0 15px;
}
.alignleft {
  float: left;
  display: inline;
  padding: 4px;
  margin: 0px 15px 0 15px;
}
.clear {
  clear: both;
}