イメージ配置サンプル(スタイル使用)

画像の配置と文字の回りこみに関するサンプルです。できれば、新しいタグ・属性を使用したサンプルを読んでね。

[ 画像を選択/解除 ] ボタンで選択した画像は、記事の左上、中央上、右上の何処かにブログスタイルに応じて配置されます。
また、記事単体表示の場合は元のサイズで変更されますが、トップページ、日付指定、月別、カテゴリ表示の場合は、ブログスタイルに応じて縮小表示されることがあります。
この画像は携帯でも見ることができます。

左寄せ＆文字回り込み(スタイル使用)
<img src="画像のURL" style="clear: left; float: left; margin: 2px 5px 1px 0px;"> clearプロパティにleftを指定して、この画像以前の左寄せ要素(画像)に対する回り込みを解除～

clearプロパティにleftを指定して、この画像以前の左寄せ要素(画像)に対する回り込みを解除します。
floatプロパティにleftを指定して、画像を左寄せして文字を回りこませることができます。
marginプロパティを指定して、上に2ピクセル、右に5ピクセル、下に1ピクセル、左に0ピクセルの隙間を設けます。
この画像は携帯では見ることができません。

右寄せ＆文字回り込み(スタイル使用)
<img src="画像のURL" style="clear: right; float: right; margin: 2px 0px 1px 3px;"> clearプロパティにrightを指定して、この画像以前の右寄せ要素(画像)に対する回り込みを解除～

clearプロパティにrightを指定して、この画像以前の右寄せ要素(画像)に対する回り込みを解除します。
floatプロパティにrightを指定して、画像を右寄せして文字を回りこませることができます。
marginプロパティを指定して、上に2ピクセル、右に0ピクセル、下に1ピクセル、左に3ピクセルの隙間を設けます。
この画像は携帯では見ることができません。

中央寄せ
<div align="center"><img src="画像のURL"></div>

<div align="center">と</div>で<img ～>を括ることで、画像を「中央」に配置することはできますが、余白に文字を回りこませることはできません。
この画像は携帯では見ることができません。

brタグのclear属性は無効
<img src="画像のURL" align="left"> brタグのclear属性を指定しても、 <br clear="left"> <img src="画像のURL" align="left"> 記事投稿時にclear属性が落ちてしまうので、 <br clear="all"> 回り込みを解除できない。

brタグのclear属性を指定しても、

記事投稿時にclear属性が落ちてしまうので、

回り込みを解除できない。

imgタグのstyle属性にclearプロパティを指定
<img src="画像のURL" style="clear: left; float: left;"> imgタグのstyle属性に、 <img src="画像のURL" style="clear: left; float: left;"> clearプロパティを指定すれば、 <font style="clear: both;">回り込みが解除できる。</font> （ただしIEだけみたい…）

imgタグのstyle属性に、
clearプロパティを指定すれば、
回り込みが解除できる。
（ただしIEだけみたい…）

カスタムテンプレートなら、クラスを定義しちゃうともっと楽

[CSS] /* 画像配置：左 */ .alignLeft { clear: left; float: left; margin: 2px 5px 1px 0px; } /* 画像配置：右 */ .alignRight { clear: right; float: right; margin: 2px 0px 1px 3px; } [記事] <img src="画像のURL" class="alignLeft"> class="alignLeft"を指定すれば <img src="画像のURL" class="alignLeft"> 以前の左寄せ画像への回り込みを解除してから、その画像は左寄せ回り込みとなる。 <img src="画像のURL" class="alignRight"> class="alignRight"を指定すれば <img src="画像のURL" class="alignRight"> 以前の右寄せ画像への回り込みを解除してから、その画像は右寄せ回り込みとなる。 <img src="画像のURL" class="alignLeft"> 勿論、逆サイドに寄せた画像への回りこみは解除されない。

class="alignLeft"を指定すれば
以前の左寄せ画像への回り込みを解除してから、その画像は左寄せ回り込みとなる。
class="alignRight"を指定すれば
以前の右寄せ画像への回り込みを解除してから、その画像は右寄せ回り込みとなる。
勿論、逆サイドに寄せた画像への回りこみは解除されない。


ただし、何故か絵文字との相性が悪くて絵文字を使うと途中で記事の本文が消えちゃう事があるので、一旦下書き保存して「大丈夫かどうか」を確かめてから公開してください。



とここまでは、Internet Explorerの場合。FirefoxやOperaは、これだけじゃうまくいかない…。
どうもimgタグ同士ならfloatプロパティはclearプロパティで解除できるけど、imgタグのfloatプロパティはfontタグのclearプロパティでは解除できないみたい。つまり「画像が画像を回り込む」のは解除できるのに、「文字が画像を回り込む」のは解除できないということのようだ。
仕方がないので「文字の回りこみを解除したいところで、横幅いっぱいの画像を貼り付けてしまえ！」というかなり強引な回避策。

imgタグのstyle属性にclearプロパティを指定 更に横幅一杯の画像も指定
<img src="画像のURL" style="clear:left;float:left;"> imgタグのstyle属性にclearプロパティを指定して、 <img src="/images/clear.gif" width="100%" height="1" style="clear:left;"><img src="画像のURL" style="clear:left;float:left;"> 更に横幅一杯の画像も指定すれば、 <img src="/images/clear.gif" width="100%" height="1" style="clear:both;"> なんとか回り込みが解除できる。

imgタグのstyle属性にclearプロパティを指定して、
更に横幅一杯の画像も指定すれば、
なんとか回り込みが解除できる。

＃ 上の （赤色線）は、実際には （透明線）です。



<br clear="left">、<br clear="right">、<br clear="all">が使えればこんな苦労は必要ないんだけどなぁ…。

●質問 流し込みとレイアウト・・・ - gooブログサークル
●質問 文字の回りこみについて・・・ - gooブログサークル
●質問 画像の位置について - gooブログサークル

● brタグのclear属性 サンプル
● イメージ配置サンプル