画像へのテキストの回り込みを解除する

RW3.6検証済みRW3.5検証済み
以前のエントリー「RW:画像にテキストを回り込ませる」で、記事の最後にテキストの回り込みを設定していた場合、テキストの量が画像の高さより少ないとコメントやトラックバックの部分に画像が被ってしまうので「改行」を入れて調節するという(超アナログな)ことを書いていましたが、mixiでアドバイスを頂きましたので追加情報を。

新しいエントリーに書きますが、「スタイルつきテキスト」やBlocks!の「Text」ツールはHTMLタグが分からなくても使えて便利なんですが、HTMLタグを混在させることが出来ます。
ですので今回はHTMLタグで解決するスマートな方法(笑)をご紹介します。(コメントやトラックバックのすぐ上の部分でのテストではありませんが、その場所でもちゃんと機能します。)


使用するタグは…

画像が左側にある場合:<br clear="left">
画像が右側にある場合:<br clear="right">

を使います。


使い方はカンタン。回り込むテキストの最後に上記のタグを入れてやるだけです。下記のサンプル画像に、1と2のテキストを続けて入力し、1と2の間に
<br clear="left">を挿入してテキストの回り込みを解除してみます。


1「あのイーハトーヴォのすきとほった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。
2「
あのイーハトーヴォのすきとほった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。



↓↓↓では、ごらんあれ↓↓↓

あのイーハトーヴォのすきとほった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。
あのイーハトーヴォのすきとほった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。この部分の編集画面


りゃりゃ・ω・`)? なんですか、この空白は。
(このエントリーの閲覧方法によっては特定の条件をクリアーしているので正常に表示されているかもしれません)

回り込みの解除に関して、
一定の条件が重なるとレイアウトが崩れる(←このエントリーを単独で表示します)ことがあります。この問題に関してある程度の規則性を発見しました。
この問題に関してmixiのRapidWeaverコミュの方に詳しく解説していただきましたので続きはそちらで…。(今、レイアウトが崩れて見える人はタグが有効な場合をご覧ください)

blog comments powered by Disqus