画像の配置と文字の回りこみに関するサンプルです。できれば、
新しいタグ・属性を使用したサンプルを読んでね。
[ 画像を選択/解除 ] ボタンで選択した画像は、記事の左上、中央上、右上の何処かにブログスタイルに応じて配置されます。
また、
記事単体表示の場合は元のサイズで変更されますが、
トップページ、
日付指定、
月別、
カテゴリ表示の場合は、ブログスタイルに応じて縮小表示されることがあります。
この画像は
携帯でも見ることができます。
| 左寄せ＆文字回り込み(スタイル使用) |
|---|
| <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属性 サンプル
● イメージ配置サンプル
、かなりの敗北感が…。