画像の回りこみ

Brogramming with Tom
アイキャッチ画像の左側に文字を表示する方法の紹介です。ちなみに、モバイルでは、回り込みを解除します。

photo credit: ryanoshea via photopin cc



HTMLを使った画像の回り込み


HTMLを使った画像の回りこみは、以下のようにします。

<img src="" align="left"/>

文字

<br clear="all">


ハイライトされた5行目は、回り込みの解除です。


CSSを使った画像の回り込み


.float
{
float: left;
margin-right: 1em;
}
.floatclear
{
clear: both;
}


<div class="float">

<img src="" alt="" />

</div>

<br class="floatclear">


これも先ほどと同じように、最後の行で回りこみの解除を行なっています。これは、 CSS の clear: bothによって実現します。


モバイルテンプレートでの使用例


私の場合、アイキャッチ画像に回りこみをしています。しかし、モバイルページだと幅が小さいため、回り込みを使用するのは、見栄えがあまりよろしくないです。


したがって、以下の様な場所に <br class="floatclear">を使います。


<b:includable id='mobile-post' var='post'>
.
.
.
<div class='date-posts'>
<div class='post-outer'>
<br class='floatclear'/>