画像の配置と文字の回り込みに関するサンプルです。配置する画像の挿入方法は、「[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 (旧タグ・属性のみ使用のサンプル)
今までの虚しい努力は…。
ありがとうございました。
マウスオンをしてみたいのですが、リンク先と言うのが良くわからずできませんでした。
何しろ、初心者なので・・・
他に問題があるのかもしれませんが？
いいえ、どういたしまして。
下の記事が少しはお役になったようで。
● 特殊文字のサンプル
http://blog.goo.ne.jp/mid_knight/e/05c179a13b64405f8fd86bc390b16c34
ところで、以下の質問は「初心者だから」だめということではないと思います。
＞マウスオンをしてみたいのですが、リンク先と言うのが良くわからずできませんでした。
＞他に問題があるのかもしれませんが？
gooブログでは、IMGタグのonmouseover属性やonmouseout属性は使えません。
以前はgooブログのセキュリティホールを悪用して記事に忍び込ませることが出来たようですが、2006年9月14日辺りからその手は使えなくなったようです。
● [351] 「マウスオン」が作成が昨日よりできません。 - goo ブログサークル
http://bbs.goo.ne.jp/ac22552/thread/1100033464488
とはいえ、CSSカスタマイズが可能なテンプレート（シンプル系やカスタム系）であれば、似たようなことはできます。
詳細は、以下の記事をご覧ください。
● マウスオン画像切換を試してみる
http://blog.goo.ne.jp/mid_knight/e/8ce890e248361c5d15e89f5ef631714d
● まうすおんてすと２ - あれとかこれとか （Lefty）
http://blog.goo.ne.jp/khazad/e/b1974664ac38ad3a2460714d686b9ff3
時々お邪魔して、色々、試せていただきたいと思います。
またよろしくお願いいたします。
「この画像を使用」で、オリジナルサイズで投稿した場合、中央に設定されていますが、これを左に寄せる方法はありますか？
imgタグを使う方法はわかりますが、テンプレートの編集で可能なら「この画像を使用」でやりたいのです。よろしくお願いします。
そして、ご質問の通り「記事リストの画像サイズ」が「オリジナルサイズ」というブログ設定の場合には、どうしても中央寄せになってしまいます。
というのも、「オリジナルサイズ」設定の場合は、画像がcenterというタグ（またはそれに類するもの）で括られてしまうため、中央寄せになってしまうのです。
もしかしたら、「.etBody center a img」というセレクタに対して、「float: left;」というプロパティを付加すれば「画像左寄せ（テキスト右回り込み）」になるかも知れませんが、記事の他の部分にも影響が出来るかも知れません。
/* もしもできるとしたら、こんなの？ */
.etBody center a img
{
display: inline; /* これでcenterタグのblock指定を解除できる？ */
float: left; /* もしそうなら、これで左寄せになる？ */
}
ということで、ブログ設定で「記事リストの画像サイズ」を「サムネイル(縮小版)」にしていただくことをお勧めします。
「サムネイル(縮小版)」の場合は、CSS編集で右寄せするか左寄せするかが指定できますので。
なお、試した訳ではありませんので、サンプルコードで出来るのかどうかはわかりません（わは）。
ありがとうございました！！
どうしても縮小版を使いたくなかったので、うれしいです。カンゲキです。
ブログでこの「中島かつを」様のページを紹介してもいいですか？？
試していなかったので自信は無かったのですが、うまくいってよかったですね。
あとは、「float: left;」の次の行にでも 「margin: 2px 5px 1px 0px;」などと書けば、上:2px、右:5px、下:1px、左:0pxの隙間が空いて、写真が見やすくなるかも知れません。
>ブログでこの「中島かつを」様のページを紹介してもいいですか？？
ええ、どうぞ。
で、もしも紹介記事を書いてもらうとしたら、ちょっとお願いがあります。
その紹介記事の中に、（このブログへではなく）この記事へのリンクを（も）追加して欲しいのです。というもの、紹介記事を読んだ人が紹介された記事を探すのって、結構大変なので。
それから、紹介記事からこの記事へトラックバックなど送ってもらってもいいかも知れませんね。
単体記事で見ると、中央のままということに気づきました。
もうこれは変更不可でしょうか・・・（汗）