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のログインユーザー名はだだ漏れだという事実を...ダッシュボード乗っ取り防止のためのセ...

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

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

WordPressのRSSフィード WordPressではコンテンツの更新情報を知らせるために標準でRSSをはじめ以下の形式のFeed出力が可能です。RDF...