【ブログの楽しみ方】画像の横の「記事の回り込み」を解除する【ココログ】

この記事の目的

HTMLタグの知識がない方でも『HTMLの編集』モードでタグを編集するテクニックをご紹介するものですが、HTMLタグを体系的に説明するものではありません。

「記事の回り込み」を解除して画像をきれいに配置する

ココログでは画像を右や左に寄せて、記事（文）をその右や左に回り込むように配置することができます。（図-1の右側が「画像の左寄せ＋記事の回り込み」、左側は回り込みなしの指定。）

図-1

画像を左寄せにして記事をその右側に回り込みさせる場合、2枚目の画像や文を1枚目の画像の真下にきれいに配置するために、何度か改行して調節したにも関わらず、公開したらずれていた、という経験はありませんか？（図-2）

図-2

これは、編集画面を「記事の編集」から「HTMLの編集」モードに切り替えて、画像の回り込みを解除するHTMLタグ「<br clear="left" />」（左寄せ解除）を記述することで解消（※注意）できます。

※注意：ココログでは、HTMLタグを知らなくてもブログ（＝HTML文書）を書けるように、「記事の作成」モード、HTMLタグを編集できるように、「HTMLの編集」モードが提供されています。（図-3）

図-3

しかし、全てのHTMLタグが使えるわけではなく、また、正しいHTMLタグを手で入力しても、「記事の作成」モードとの整合性をとるために、自動的に編集しなされたり、一部のタグや要素が無視されたりしてしまいます。これは仕様なのでしかたがありません。

このため、ここでの説明は、ココログで受け入れられるような“コツ”を加味した説明になっています。

ココログでの<br clear="left" />の使い方

以下、「画像の左寄せ＋記事の回り込み」を例に説明します。

まずはサンプルです。

---

あああ

（ここは一行分のスペース＋上下にマージンが開いています。）

いいい

ううう
えええ

おおお

---

以下は、上の部分のHTMLタグです。

---

<p><a href="http://daishi100.cocolog-nifty.com/photos/uncategorized/2013/01/31/asahi2.jpg"><img width="200" border="0" alt="Asahi2" title="Asahi2" src="http://daishi100.cocolog-nifty.com/photos/uncategorized/2013/01/31/asahi2.jpg" style="float: left; margin: 0px 5px 5px 0px;" /></a>
</p>

<p>あああ<br clear="left" /> </p>

<p> （ここは一行分のスペース＋上下にマージンが開いています。）</p>

<p><a href="http://daishi100.cocolog-nifty.com/photos/uncategorized/2013/01/31/asahi2.jpg"><img width="200" border="0" alt="Asahi2" title="Asahi2" src="http://daishi100.cocolog-nifty.com/photos/uncategorized/2013/01/31/asahi2.jpg" style="float: left; margin: 0px 5px 5px 0px;" /></a>
</p>

<p>いいい</p>

<p>ううう<br clear="left" />えええ</p>

<p>おおお</p>

---

ピンクの背景部分は画像を表示するためのHTMLタグです。

そもそも「<br />」とは「改行」タグで、ブラウザがFirefoxなら、［Shift］キー＋［Enter］キーで、間（マージン）を空けずに改行できますが、この時に挿入されるタグです。（下の例）

あああ
いいい

これに「clear="left"」という左回り込みの解除を行うオプションを追加したのが、「<br clear="left" />」です。

上のサンプルで「<br clear="left" />」は2カ所ありますが、下の方から説明すると、同一段落（<p>～</p>）内で「ううう」と「えええ」の間に入っているために、“左回り込みを解除し、且つ改行”してくれます。そのために、「えええ」は画像の右側ではなく、下に配置されます。

上の方の、「<p>あああ<br clear="left" /> </p>」では、「<br clear="left" />」 は、実は、右側に半角スペースが入っています。（「</p>」の前。半角スペースを■で表現すると、「<br clear="left" />■」となっています。）

これは「<br clear="left" />」だけだと無視されてこのタグが消えてしまうので、苦肉の策で半角スペースを加えています。

このようにちょっと“コツ”が必要ですが、改行キーをやみくもに叩くよりはスマートに行を改めて画像を配置することができます。