WordpPressで画像が回りこまない

ヘッダ画像

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 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;
}

回り込みは解除しなければ、次の要素が入り込んでしまいます。
上記サンプルでは回り込みを解除するために.clearというクラスでclear: bothを定義しています。
フロートさせた画像の後に<div class="clear"></div>というような形で追記ください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です



関連記事

WordPressのユーザー名は丸見え!? 知っていますか?WordPressのログインユーザー名はだだ漏れだという事実を...ダッシュボード乗っ取り防止のためのセ...

絶対に分かる!WordPressの子テーマ作成 WordPressでは子テーマという機能があります。既存のテーマを作成すれば、カスタマイズする際に変更したい部分だけを子...

WordPressのRSSフィードを完全にコントロールする WordPressではコンテンツの更新情報を知らせるために標準でRSSを出力します。その出力方法は...http://e...

「トップに戻る」ボタンでスマホでのユーザビリティアップ! ウェブサイト上でコンテンツを下にスクロールさせると「トップに戻る」ボタンが出現して、クリックするとビューンとページの初め...