WordpPressで画像が回りこまない

ヘッダ画像

WordpPressで画像が回りこまない

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

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

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

WordPressでは投稿時に画像の位置を指定することにより、imgタグに以下のclassタグが挿入されます。ですから、自作のテーマでは次のクラスに対して、画像に関するCSSを記述する必要があります。
配置指定なし→alignnone
左配置指定→alignleft
中央配置指定→aligncenter
右配置指定→alignright

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

配置指定なし

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

中央配置指定

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

左配置指定

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

右配置指定

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

回り込みのための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を定義しています。

コメントを残す

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

関連記事

WordPressのログインユーザー名は丸見え!?

WordPressのセキュリティ対策で必ずいわれるのが、「ログインユーザー名をadmin以外に変更し […]

Contact Form 7の送信完了画面がでない

お手軽にお問い合わせフォームなどを設置できるContact Form 7 添付ファイルも送信でき、シ […]

超簡単!アイコンフォント Font Awesomeの使い方

ひと昔前なら画像で表現していたようなアイコン。 ウェブフォントの登場によって、描画速度が速く手軽に挿 […]

3分で設置できる!?CSS3の角丸グラデーションボタン

CSS3と対応ブラウザの登場により、角丸やグラデーションを使ったリンクやフォームの送信ボタンが画像な […]