このページでは、左寄せ画像（または、右寄せ）を使用した場合の 引用要素（blockquote)が、適切に表示されるか確認するためのテストケースです。
サポートバージョン Raindrops 1.346以降
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.
<a href="https://www.tenman.info/wp3/manualraindrops/?attachment_id=2521" rel="attachment wp-att-34536"><img src="https://www.tenman.info/wp3/manualraindrops/files/tower-169x300.jpg" alt="DSC_0013 - コピー" width="169" height="300" class="alignleft size-medium wp-image-34536" /></a> <blockquote> <p class="custom-field-shortcode ">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.</p> </blockquote>
Using rd-float-wrapper class
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.
<h2>Using rd-float-wrapper class</h2> <a href="https://www.tenman.info/wp3/manualraindrops/?attachment_id=2521" rel="attachment wp-att-34536"><img src="https://www.tenman.info/wp3/manualraindrops/files/tower-169x300.jpg" alt="DSC_0013 - コピー" width="169" height="300" class="alignleft size-medium wp-image-34536" /></a> <div class="rd-float-wrapper"> <blockquote> <p class="custom-field-shortcode ">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.</p> </blockquote> </div>
Clear Float
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.
<h2>Clear Float</h2> <a href="https://www.tenman.info/wp3/manualraindrops/?attachment_id=2521" rel="attachment wp-att-34536"><img src="https://www.tenman.info/wp3/manualraindrops/files/tower-169x300.jpg" alt="DSC_0013 - コピー" width="169" height="300" class="alignleft size-medium wp-image-34536" /></a> <div class="clear"> <blockquote> <p class="custom-field-shortcode ">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.</p> </blockquote> </div>
Note:
- blockquote要素に、clear を指定してもフロートはクリアできますが、フロート要素への潜り込みが発生するので、画像との間のマージンが取れません。
- 回り込んだblockquote要素は、296px以下の幅の場合、フロートを解除します。
