5月27日や6月10日の記事のような画像の配置はどうするの?とご質問をいくつかいただきましたので、ここで記事にします。コチョコチョ試してみた自己流の結果ですのでご了承を。間違いがあったら教えてください。
拡大させて、左寄せ2枚、右寄せ2枚で各々文字を回り込ませる。
<a href=大画像URL target=_blank><img src=小画像URL align=left border=0></a>
<a href=大画像URL target=_blank><img src=小画像URL hspace=10 align=left border=0></a>
で左寄せ。画像は左から1枚目、2枚目。
<a href=大画像URL target=_blank><img src=小画像URL hspace=10 align=right border=0></a>
<a href=大画像URL target=_blank><img src=小画像URL align=right border=0></a>
で右寄せ。画像は右から3枚目、4枚目となりますのでご注意。
</a><a href・・・はスペースを空けずに続けると、勝手に必要なところで自動改行してくれます。
各々2つ目の</a>の後に文章を入れます。
別ウィンドウを作って拡大画像が表示されるタイプですので、ページが移動するタイプにするのなら、target=_blank を全部取ってください。
拡大しない小さいままの画像を左寄せ2枚、右寄せ2枚で各々文字を回り込ませる。
<img src=小画像URL align=left><img src=小画像URL hspace=10 align=left>
で左寄せ。画像は左から1枚目、2枚目。
<img src=小画像URL hspace=10 align=right><img src=小画像URL align=right>
で右寄せ。画像は右から3枚目、4枚目。
文章の回り込みを終了させる。
画像の縦の長さより文章が短い場合には、回り込みを終了させる必要があります。6月7日のような場合です。文章の終わりに<br style=clear:both;>と入れます。
実際にはすべて<>は半角の<>に変えてください。スペースも半角です。
一時
画像表示の以前の記事はこちら。
![](https://blogimg.goo.ne.jp/img_emoji/star.gif)
<a href=大画像URL target=_blank><img src=小画像URL align=left border=0></a>
<a href=大画像URL target=_blank><img src=小画像URL hspace=10 align=left border=0></a>
で左寄せ。画像は左から1枚目、2枚目。
<a href=大画像URL target=_blank><img src=小画像URL hspace=10 align=right border=0></a>
<a href=大画像URL target=_blank><img src=小画像URL align=right border=0></a>
で右寄せ。画像は右から3枚目、4枚目となりますのでご注意。
</a><a href・・・はスペースを空けずに続けると、勝手に必要なところで自動改行してくれます。
各々2つ目の</a>の後に文章を入れます。
別ウィンドウを作って拡大画像が表示されるタイプですので、ページが移動するタイプにするのなら、target=_blank を全部取ってください。
![](https://blogimg.goo.ne.jp/img_emoji/star.gif)
<img src=小画像URL align=left><img src=小画像URL hspace=10 align=left>
で左寄せ。画像は左から1枚目、2枚目。
<img src=小画像URL hspace=10 align=right><img src=小画像URL align=right>
で右寄せ。画像は右から3枚目、4枚目。
![](https://blogimg.goo.ne.jp/img_emoji/star.gif)
画像の縦の長さより文章が短い場合には、回り込みを終了させる必要があります。6月7日のような場合です。文章の終わりに<br style=clear:both;>と入れます。
実際にはすべて<>は半角の<>に変えてください。スペースも半角です。
![](https://blogimg.goo.ne.jp/img_emoji/hiyoko_cloud.gif)
![](https://blogimg.goo.ne.jp/img_emoji/kaeru_rain.gif)
不明点があります。
「ページが移動するタイプにするのなら」ということの意味が分からないのですが、どういうことでしょうか?
回りこみの終わり、きちっと入れておかないと、PCの画面の設定によっては、変な見え方になっているんでしょうか?
私は、入れたことがありません(笑)
というのも、<br clear="all">を指定してもclear属性が落ちてしまうので、文字の回りこみ解除にはかなり苦労していたので…。
で、肝心の質問です。<br style="clear: both"> って、いつ頃から使われていますか?
記事を読む限り6/8よりも前から使用されているように思えるのですが…。
ページが移動するタイプにするのなら・・・新しくウィンドウを作らずに、画像のURLに移動するという意味です。[戻る]ボタンで元のページに戻ります。それに対して、別ウィンドウを作るタイプというのは、[×]ボタンで開いた拡大画像のページを閉じることによって元のページを表示させます。表現が悪かったんですねきっと。
gooブログのブックマークの設定のところでも[同じWINDOW]か[新しいWINDOW]かを選択できるようになっていますよね、あれです。
花関係の業者のHPなどでは小さい画像をクリックして大きくさせたりアップにさせたり全体を見せたりというのが多いですよね。そんなのをいつもチャッチャッと見ているので自分としては使いやすいのです。表示も速いですし。
文章の回り込みを終了させる・・・例えば、左に2枚画像を配置して、解説的に「今年買ったバラの○○と○○」くらいの短い文章だと、必要ですよね。それに編集画面のプレビューではうまくいっていても投稿後に自分のブログで見るといまいちのこともあり、改行で文字の位置を下げて調節したりします。私のブログはテンプレートの本文の幅が狭いタイプで行数が多めになるので、サムネイルの画像を使ったときには回り込みの終了はあまり必要なのですが、普通サイズの画像を使ったときにはそんなに行数を書かないので必要です。もし入れないと、例えば左に寄せた画像の下のラインより上(文章の終わり)に次の右寄せの画像がきます。
各々のPCの設定ではどうなんでしょうか。文字のサイズは本文では関係ないようですが…。わかりません。
コメントを書いて洗濯(!)を始めている間にコメントをいただいてしまいました。
「brタグに属性が指定できたなんて、かなりのショックです…。」と仰られても、ド素人にはよく分からないのですが、今記事を調べてみたら4月5日に発見して、それを記事に書き、colinは使い出したようです。
①今、田植えの記録の整理してアップしたら、「写真2枚連続に短文」のあとの「写真2枚左右配置に文章」が、直前の写真の干渉を受けてか、想定の感覚よりずっと短くしか出ない(cocoaさんの疑問と同じ)。
それで、これは、今朝のcolinさんの「終わり記号」かっ、とやってきました。早速コピーとって、書き加え見たら、修正できました。
本当に、ありがとうございます。
②コメントについて
前半は、やっぱりそのことなんですね。分かりました。
後半は、上記①のとおり、グッドタイミングで大助かりです。
③それで、先の私の「田植えのこと」、トラックバックしておいて説明します。
当初=下から3枚目と4枚目が干渉の原因らしく、下から1枚目と2枚目の写真の幅が、3枚目の下にはおさまらず、4枚目の下から始まる、という変則状態。
加筆修正後=現在。
④お気づきの点あれば、ご指摘ください(笑)
お礼まで
# 文字回り込み解除が出来なくて困っていたので、ちょっとショックです。
お礼といっては何ですが、「リアルタイプ・プレビュー」する方法の記事を紹介します。
http://blog.goo.ne.jp/colin2603jp/e/3be6bbe65e3a66af49e59b8cf13e2b2d
もしかしたら、ご存知かも知れませんが。
http://blog.goo.ne.jp/mid_knight/e/a59526d8b8cdc63f234e98dd4c36702e
どういたしまして、少しでもお役に立てて嬉しいです。後でてらまちさんのところに見学に行きます。
「リアルタイプ・プレビュー」する方法の記事、拝見してきました。なるほど、これはいいですね。後でカテゴリーを追加してやってみます。(もうお昼ご飯を用意しなくてはいけないので…。)
文字の回り込みはやってみようと思いつつ、
なかなか使ってみる機会がありませんでした。
colinさんの解説を参考に、もう一度チャレンジしてみます。
よい週末をお過ごしでしたか?今日はもう遅くなってしまったので、また今度ぷんさんのところにお邪魔します。(って、まるで本当に行くみたいですね。)本当は、もう眠いので…。