塾講de主婦の雑記帳

仕事の上でのよもやま話、日常生活の出来事、趣味の屋上ガーデニングや
たくさんいるペットの話など…思いつくまま

TEXTエディターで画像を左右2枚ずつ配置する方法

2005-06-11 | colinの画像表示メモ
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;>と入れます。

実際にはすべて<>は半角の<>に変えてください。スペースも半角です。
一時画像表示の以前の記事はこちら。

最新の画像もっと見る

12 コメント

コメント日が  古い順  |   新しい順
おはようございます。 (てらまち)
2005-06-12 05:50:13
 いつも、丁寧な解説、ありがとうございます。

 不明点があります。



「ページが移動するタイプにするのなら」ということの意味が分からないのですが、どういうことでしょうか?



 回りこみの終わり、きちっと入れておかないと、PCの画面の設定によっては、変な見え方になっているんでしょうか?

 私は、入れたことがありません(笑)
返信する
質問です (かつを)
2005-06-12 10:19:33
brタグに属性が指定できたなんて、かなりのショックです…。

というのも、<br clear="all">を指定してもclear属性が落ちてしまうので、文字の回りこみ解除にはかなり苦労していたので…。



で、肝心の質問です。<br style="clear: both"> って、いつ頃から使われていますか?

記事を読む限り6/8よりも前から使用されているように思えるのですが…。
返信する
はい (colin)
2005-06-12 10:28:56
てらまちさん

ページが移動するタイプにするのなら・・・新しくウィンドウを作らずに、画像のURLに移動するという意味です。[戻る]ボタンで元のページに戻ります。それに対して、別ウィンドウを作るタイプというのは、[×]ボタンで開いた拡大画像のページを閉じることによって元のページを表示させます。表現が悪かったんですねきっと。

gooブログのブックマークの設定のところでも[同じWINDOW]か[新しいWINDOW]かを選択できるようになっていますよね、あれです。

花関係の業者のHPなどでは小さい画像をクリックして大きくさせたりアップにさせたり全体を見せたりというのが多いですよね。そんなのをいつもチャッチャッと見ているので自分としては使いやすいのです。表示も速いですし。

文章の回り込みを終了させる・・・例えば、左に2枚画像を配置して、解説的に「今年買ったバラの○○と○○」くらいの短い文章だと、必要ですよね。それに編集画面のプレビューではうまくいっていても投稿後に自分のブログで見るといまいちのこともあり、改行で文字の位置を下げて調節したりします。私のブログはテンプレートの本文の幅が狭いタイプで行数が多めになるので、サムネイルの画像を使ったときには回り込みの終了はあまり必要なのですが、普通サイズの画像を使ったときにはそんなに行数を書かないので必要です。もし入れないと、例えば左に寄せた画像の下のラインより上(文章の終わり)に次の右寄せの画像がきます。

各々のPCの設定ではどうなんでしょうか。文字のサイズは本文では関係ないようですが…。わかりません。
返信する
おはようございます (colin)
2005-06-12 10:42:25
かつをさん

コメントを書いて洗濯(!)を始めている間にコメントをいただいてしまいました。

「brタグに属性が指定できたなんて、かなりのショックです…。」と仰られても、ド素人にはよく分からないのですが、今記事を調べてみたら4月5日に発見して、それを記事に書き、colinは使い出したようです。
返信する
大助かり (てらまち)
2005-06-12 10:56:15
 colinさん、ばっちり実地で役立ちました。ありがとうございます。



 ①今、田植えの記録の整理してアップしたら、「写真2枚連続に短文」のあとの「写真2枚左右配置に文章」が、直前の写真の干渉を受けてか、想定の感覚よりずっと短くしか出ない(cocoaさんの疑問と同じ)。

 それで、これは、今朝のcolinさんの「終わり記号」かっ、とやってきました。早速コピーとって、書き加え見たら、修正できました。

 本当に、ありがとうございます。



 ②コメントについて

 前半は、やっぱりそのことなんですね。分かりました。

 後半は、上記①のとおり、グッドタイミングで大助かりです。



 ③それで、先の私の「田植えのこと」、トラックバックしておいて説明します。



 当初=下から3枚目と4枚目が干渉の原因らしく、下から1枚目と2枚目の写真の幅が、3枚目の下にはおさまらず、4枚目の下から始まる、という変則状態。



 加筆修正後=現在。



 ④お気づきの点あれば、ご指摘ください(笑)



 お礼まで
返信する
やはりそうですか… (かつを)
2005-06-12 10:56:45
情報、ありがとうございました。

# 文字回り込み解除が出来なくて困っていたので、ちょっとショックです。



お礼といっては何ですが、「リアルタイプ・プレビュー」する方法の記事を紹介します。

http://blog.goo.ne.jp/colin2603jp/e/3be6bbe65e3a66af49e59b8cf13e2b2d



もしかしたら、ご存知かも知れませんが。
返信する
しまった (かつを)
2005-06-12 10:57:41
URL間違えました(そうとうショックなのか)。

http://blog.goo.ne.jp/mid_knight/e/a59526d8b8cdc63f234e98dd4c36702e
返信する
どうも、どうも (colin)
2005-06-12 11:56:42
てらまちさん

どういたしまして、少しでもお役に立てて嬉しいです。後でてらまちさんのところに見学に行きます。



かつをさん

「リアルタイプ・プレビュー」する方法の記事、拝見してきました。なるほど、これはいいですね。後でカテゴリーを追加してやってみます。(もうお昼ご飯を用意しなくてはいけないので…。)
返信する
こんばんは。 (プン)
2005-06-13 23:07:15
colinさん、いつも丁寧な解説ありがとうございます。

文字の回り込みはやってみようと思いつつ、

なかなか使ってみる機会がありませんでした。

colinさんの解説を参考に、もう一度チャレンジしてみます。
返信する
こんばんは (colin)
2005-06-14 01:45:55
ぷんさん

よい週末をお過ごしでしたか?今日はもう遅くなってしまったので、また今度ぷんさんのところにお邪魔します。(って、まるで本当に行くみたいですね。)本当は、もう眠いので…。
返信する