自作テーマで画像が回りこまない

自作テーマを作成したところ、画像が回りこまない!?
なぜ??と思ったのですが、よくよく考えてみるとCSSに画像の回り込み関係のスタイルを指定していませんでしたので、当たり前です・・・

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

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

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

配置指定なし

配置指定なし

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


中央配置指定

中央配置指定

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


左配置指定

左配置指定

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


右配置指定

右配置指定

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


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

このように画像を配置するためには以下のようにCSSで指定します。
もし、自作などお使いのテーマで画像がうまく回り込まないという方はstyle.cssにコピーしてみてください。(マージンなどは当サイト用に指定してありますので、適時変更ください)

※上記サンプルでは回り込みを解除するためにhrタグを使っています。

フォローする

WordPressとはなにかもう一度おさらいしてみよう!

コメントをどうぞ

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


九 + = 10

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">