テキストの回り込み解除に関する注意点と対応策

RW3.6検証済みRW3.5検証済み
RW:画像にテキストを回り込ませる」の回り込みはみ出し問題から発生した、テキストの回り込みを解除する時にレイアウトが崩れる現象(回り込みを解除しテキストの上部に空白が出来る)について、mixiのRapidWeaverコミュに参加されている方から詳しい解説をしていただきましたので、「RW:テキストの回り込みを解除した時に空白が出来る」を書き直しました。


RapidWeaverで作るウェブサイトはCSSでレイアウトされています。当然左側に配置されているメニューバーなどもCSSによってレイアウトされていて、具体的には
float(フロート)というプロパティによって配置指定されています。
RapidWeaverのメニューにある、
書式>HTML>イメージを左揃え&右揃えも、この float で指定配置しています。

このブログ(ブログテーマ)のように、
メニューバーが左右いずれかに配置れているテーマを使っている場合、そのメニューバーも float で配置指定されているので、clear を使用するとメニューバーに対しても当然影響が出てきます。
<br clear="left">の様に、clear を入れて回り込みを解除したテキストの上部に空白ができるのは、メニューバーの最下部の位置から解除したテキスト部分が始まるからです。

この件に関してアドバイスを頂いた方から解説図を提供していただきました。


なるほどね〜・ω・`)


で、clear を使い回り込みを解除する場合、注意する点として…


左側メニューバーがある場合は、イメージを右揃えにして<br clear="right">を使う。
右側にメニューバーがある場合は、イメージを左揃えにして<br clear="left">を使う。


これを守ればレイアウトは崩れないと思います。ただし、サイドバーの位置を左右に変更するとまたレイアウトが崩れますので、将来的にサイトのレイアウトを変更する可能性があるならばベターな方法とは言えないでしょう。

結果、
clear を使わないでレイアウトの崩れに対応するには、現在の所改行をいれて行数をかせぐという、私が「RW:画像にテキストを回り込ませる」の最後で紹介した方法が今のところベターなようです。(そんなことは全然意図していなかった偶然ですが…)
ただ、この方法を使う場合は、Windowsのブラウザでの表示を考慮して、Macでの見た目の倍くらいの改行が必要とのことでした。(MacとWinの行の高さの表示の違い、文字の大きさの違い、ブラウザごとの見え方の違いを考慮して)

私はRapidWeaverのバグかと思っていましたが、 そうではなく
CSSの仕様ということだったんですね。まぁ、私の超アナログな分析もあながち間違いではなかったようなので良しとしましょう(笑)


さらに、
clear も使わない、改行も使わない方法としてその方が提案されていた対応策が…

1. 写真は小さめで文章を多く。
2. 写真はムダと思えるほど超横長にしてかっこよく見せつつ回り込みをしない。


というものでした。こちらの方が改行よりも健康的な感じがします(笑) 下のリンク先のページを見てもらうとこの2つの意味がよく分かると思います。

. 写真は小さめで文章を多く、という例
http://www.realmacsoftware.com/rapidweaver/newfeatures.php
画像に対して文章量が多いので、エントリーの最後が文章で終わっています。こういう場合は回り込みの解除や改行で調整しないで済むのでWindowsでの表示の違いは最小限で済むはずです。

. 写真はムダと思えるほど超横長にしてかっこよく見せつつ回り込みをしない、という例
http://www.realmacsoftware.com/blog/index.php
画像が最大幅まであり回り込ませる必要がない(というより回り込むスペースがない)。当然、回り込みを解除する必要もない。見た目もクール(笑)

実際に使う画像の大きさと文章の量で同じように出来ないこともあると思います。その時はテキストの回り込みはスッパリ諦めるのもひとつだと思います(笑)
(アドバイスをくださった方が今回の問題に気がついたのは、上記のリンク先の本家のウェブサイトを見ていてだそうです。そういう鋭い観察眼を持っている人は尊敬しちゃいます。すごいの一言です。)

blog comments powered by Disqus