予告:Raindrops1.346­ 投稿のスタイルの変更

従来、メディアの追加から画像を追加した場合、(左寄せを続けて2枚)以下のように表示します

aligin-issue

同じ投稿をversion1.346で表示すると以下のように、(この場合は、左端に)表示されるようになります。

IMG00170

投稿の編集画面で、メディアを追加から、左寄せや右寄せの画像を複数表示した場合、(以下の例は、alignleft(左寄せ)2枚の画像を続けて指定すると、)
このように、最初の画像の脇に次の画像が潜り込むように表示されていました。

IMG00170

また、blockquote要素などのブロック要素を記述した場合には、フロートが解除されます。
rd-float-wrapper クラスを使う事で、フロートブロッククウォートが表示できます(ver1.345)

このようにフロート画像に続く 段落や 見出しタグ、blockquote 等の要素は、一見うまく表示されているように見えますが 細かくスタイルを適用しようとした場合には、いろいろ問題が出てきます。

ver1.345でブロック要素であっても、フロートが解除されないように設定する、新しいCSSクラスを追加します

rd-float-wrapper
このクラスは、通常フロート画像と一緒に配置できないblockquote,tableを、div要素でラップすることで、正常に表示する事を可能にします
rd-float
dl要素にクラスを追加する事で、回り込みをするデータリストを表示できます。日本語対応済み
clear
フロートをリセットするクラスです。回り込みを解除します。

引き続き、ver1.346では、aliginleft alignright クラスの表示をさらに見直し、これらの画像は、常に投稿の、左端または右端に表示するように見直します。

また、投稿の潜在的な問題についても、手を入れていきます。

以下の画像は、投稿の見出しタグと、段落を赤枠で示したものですが、

potential-problem

枠線が、左寄せのフロート画像の後ろに潜り込んでいるのが確認できると思います。

potential-problem-fix

見出し要素の潜り込みに対応します。

この変更により、投稿のサブタイトルをCSSで装飾するといった作業が、簡単にできるようになると考えています。

デフォルトテーマ等テーマによっては、見出し要素を記述した場合に、自動的にフロートがクリアされるタイプのテーマも存在しますが、

同様の表示を行う場合は、見出し要素に、clrear クラスを追加していただくことで、フロートのクリアが可能です

<h3 class="clear">Example</h3>

コメントは受け付けていません。