予告:Raindrops1.415にclear-1~clear-3クラスを追加します。

Raindrops1.415では、投稿本文用に clear-1, clear-2, clear-3クラスを追加します。

新規追加クラスの追加理由

WordPressでは、投稿にメディアを追加する事が簡単にできますが、これらメディアを追加した場合 多くは左寄せや右寄せ等のfloatスタイルが設定されます。

実際に、画像要素を追加した場合の表示は以下のようなものです。

header-leaf.jpg

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

clearクラスを追加して、フロートを解除した場合の左上の画像との位置関係はこのようになります。フロートを解除した このp要素と画像との位置関係を調整しようとしても、marginの設定は出来ません。これは、おかしな挙動ではなく正常な働きで、marginが有効に働くためには、以下のようなソースが必要になります。

<div style="overflow:hidden">
<a href="http://example.com"><img src="http://example.com/example.jpg" alt="header-leaf.jpg" width="487" height="196" class="alignleft size-large wp-image-2400" /></a>
<p>Lorem ipsum dolor sit amet, consectetur .....</p>
</div>
<p>Lorem ipsum dolor sit amet, consectetur .....</p>

例1

このようにすると以下のように表示されます。

header-leaf.jpg

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

clearクラスを追加して、フロートを解除した場合の左上の画像との位置関係はこのようになります。フロートを解除した このp要素と画像との位置関係を調整しようとしても、marginの設定は出来ません。これは、おかしな挙動ではなく正常な働きで、marginが有効に働くためには、以下のようなソースが必要になります。

例2

clear クラスにmargin-top:3emを追加したものが以下です

header-leaf.jpg

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

clearクラスを追加して、フロートを解除した場合の左上の画像との位置関係はこのようになります。フロートを解除した このp要素と画像との位置関係を調整しようとしても、marginの設定は出来ません。これは、おかしな挙動ではなく正常な働きで、marginが有効に働くためには、以下のようなソースが必要になります。

以上のように、フロート要素に続く clearクラスが追加された要素は、そのままだとマージンの調整をすることが出来ないという問題に対応する事が必要と考えました。

ブロック要素で囲むことで対応する事が基本的な解決ですが、これをクラスを追加するだけで見た目を調整できるようにするというのが今回の変更です。

clear-1の適用例

<div style="overflow:hidden">
<a href="http://example.com"><img src="http://example.com/example.jpg" alt="header-leaf.jpg" width="487" height="196" class="alignleft size-large wp-image-2400" /></a>
<p>Lorem ipsum dolor sit amet, consectetur .....</p>
</div>
<p class="clear-1">Lorem ipsum dolor sit amet, consectetur .....</p>

header-leaf.jpg

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

clear-2の適用例

<div style="overflow:hidden">
<a href="http://example.com"><img src="http://example.com/example.jpg" alt="header-leaf.jpg" width="487" height="196" class="alignleft size-large wp-image-2400" /></a>
<p>Lorem ipsum dolor sit amet, consectetur .....</p>
</div>
<p class="clear-2">Lorem ipsum dolor sit amet, consectetur .....</p>

header-leaf.jpg

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

clear-3の適用例

<div style="overflow:hidden">
<a href="http://example.com"><img src="http://example.com/example.jpg" alt="header-leaf.jpg" width="487" height="196" class="alignleft size-large wp-image-2400" /></a>
<p>Lorem ipsum dolor sit amet, consectetur .....</p>
</div>
<p class="clear-3">Lorem ipsum dolor sit amet, consectetur .....</p>

header-leaf.jpg

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

以上 clearクラスを適用した場合に、上部フロートメディアとの間隔をコントロールする新しいクラス clear-1,clear-2,clear-3の概略を紹介させていただきました。

活用を検討しただけますようお願いします。


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