画像の配置と文字の回り込みに関するサンプルです。配置する画像の挿入方法は、「[IMG]ボタン サンプル」の記事をご覧ください。
なお、このサンプルでは、非公式サポートのstyle属性を使用しています。
[ 画像を選択/解除 ] ボタンで選択した画像は、記事の左上、中央上、右上の何処かにブログスタイルに応じて配置されます。
また、記事単体表示の場合は元のサイズで表示されますが、トップページ、日付指定、月別、カテゴリ表示の場合は、ブログスタイルに応じて縮小表示されることがあります。
この画像は携帯でも見ることができます。
| 左寄せ＆文字回り込み(スタイル使用) |
|---|
| <img src="画像のURL" style="float: left; margin: 2px 5px 1px 0px"> imgタグのstyle属性にfloat:leftを指定して、画像を左寄せして文字を回りこませることができます。～ <br style="clear: both"> brタグのstyle属性に～ |
imgタグのstyle属性にfloat:leftを指定して、画像を左寄せして文字を回りこませることができます。また、marginプロパティを指定して、上に2ピクセル、右に5ピクセル、下に1ピクセル、左に0ピクセルの隙間を設けます。
brタグのstyle属性にclear: bothを指定して、両サイドの回り込みを解除します。
この画像は携帯では見ることができません。
| 右寄せ＆文字回り込み(スタイル使用) |
|---|
| <img src="画像のURL" style="float: right; margin: 2px 0px 1px 3px"> imgタグのstyle属性にfloat:rightを指定して、画像を右寄せして文字を回りこませることができます。～ <br style="clear: both"> brタグのstyle属性に～ |
imgタグのstyle属性にfloat:rightを指定して、画像を右寄せして文字を回りこませることができます。また、marginプロパティを指定して、上に2ピクセル、右に0ピクセル、下に1ピクセル、左に3ピクセルの隙間を設けます。
brタグのstyle属性にclear: bothを指定して、両サイドの回り込みを解除します。
この画像は携帯では見ることができません。
| 中央寄せ |
|---|
| <div align="center"><img src="画像のURL"></div> <p align="center"><img src="画像のURL"></p> |
この画像は携帯では見ることができません。
| brタグのclear属性は無効 |
|---|
| <img src="画像のURL" align="left"> brタグのclear属性を指定しても、<br clear="left"> <img src="画像のURL" align="left"> 記事投稿時にclear属性が落ちてしまうので、<br clear="all"> 回り込みを解除できない。 |
brタグのclear属性を指定しても、 記事投稿時にclear属性が落ちてしまうので、回り込みを解除できない。
| brタグのstyle属性にclearプロパティを指定 |
|---|
| <img src="画像のURL" align="left"> brタグのstyle属性にclear:leftを指定すれば、 <br style="clear: left"> <img src="画像のURL" style="float: left"> 記事投稿時にstyle属性が落ちることはないので、 <br style="clear: left"> align="left"やstyle="float:left"で左寄せした画像の回り込みを解除できる。 |
brタグのstyle属性にclear:leftを指定すれば、 記事投稿時にstyle属性が落ちることはないので、align="left"やstyle="float:left"で左寄せした画像の回り込みを解除できる。
| カスタムテンプレートなら、クラスを定義しちゃうとちょっと楽 |
|---|
| [CSS] /* 画像配置：左 */ .floatLeft { float: left; margin: 2px 5px 1px 0px; } /* 画像配置：右 */ .floatRight { float: right; margin: 2px 0px 1px 3px; } [記事] <img src="画像のURL" class="floatLeft"> imgタグにclass="floatLeft"を指定して左寄せ・余白設定をまとめて行う。 <br style="clear: left"> <img src="画像のURL" class="floatLeft"> brタグにstyle="clear: left"を指定して左寄せ画像への回り込みを解除してから、次の画像も左寄せ。 <br style="clear: right"> <img src="画像のURL" class="floatRight"> brタグにstyle="clear: right"を指定して、imgタグにclass="floatRight"を指定すれば、 <br style="clear: right"> <img src="画像のURL" class="floatRight"> 以前の右寄せ画像への回り込みを解除してから、その画像は右寄せ・余白設定して文字が回り込む。 <br style="clear: left"> <img src="画像のURL" class="floatLeft"> 勿論、逆サイドに寄せた画像への回り込みは解除されない。 <br style="clear: right"> <img src="画像のURL" class="floatRight"> <br style="clear: both"> brタグにstyle="clear: both"を指定すれば、両サイドの回り込みを解除できる。 |
imgタグにclass="floatLeft"を指定して左寄せ・余白設定をまとめて行う。 brタグにstyle="clear: left"を指定して左寄せ画像への回り込みを解除してから、次の画像も左寄せ。 brタグにstyle="clear: right"を指定して、imgタグにclass="floatRight"を指定すれば、 以前の右寄せ画像への回り込みを解除してから、その画像は右寄せ・余白設定して文字が回り込む。 勿論、逆サイドに寄せた画像への回り込みは解除されない。brタグにstyle="clear: both"を指定すれば、両サイドの回り込みを解除できる。
ということで、gooブログでは <br clear="left">、<br clear="right">、<br clear="all"> が使えませんので、<br style="clear: left">、<br style="clear: right">、<br style="clear: both"> を使用して回り込みを解除しましょう。
● 質問 流し込みとレイアウト・・・ - gooブログサークル
● 質問 文字の回り込みについて・・・ - gooブログサークル
● 質問 画像の位置について - gooブログサークル
● 画像URLのコピー 2005年05月12日19:00 (画像フォルダにアップロードした画像のサムネイル画像と拡大画像URLを調べる方法)
● [IMG]ボタン サンプル 2005年05月12日19:01 (サムネイル画像をクリックすると拡大画像を表示する方法・推奨)
● [IMG]ボタン サンプル2 2005年05月12日19:02 (拡大画像をそのまま挿入する方法・横幅が320ピクセルを超える画像には不向き)
● gooブログで使用できるタグや属性(非公開分) 2005年06月09日23:27
● brタグのclear属性 サンプル 2005年04月13日00:00
● イメージ配置サンプル 2005年02月20日11:05 (スタイル属性なしのサンプル)
● イメージ配置サンプル(スタイル使用) 2005年05月19日06:43 (旧タグ・属性のみ使用のサンプル)
