【ブログの楽しみ方】画像の周囲の余白を調節する【cocolog】

ブログ主の覚え書きとして画像を「左寄せ・記事回り込み」した際に周囲の余白を調整する方法を記します。

画像の「左寄せ・記事回り込み」とは、下のように、画像を挿入するときに「画像の位置」で「左（記事回り込み）」を選択します。（挿入画面の画像はこちら）

• 左　：　続く文章は画像の下に配置される
• 中央　：続く文章は画像の下に配置される
• 左（記事回り込み）：　続く文章は画像の右に配置される
• 右（記事回り込み）：　続く文章は画像の左に配置される

サンプル1

画像とテキストの間に若干の余白（隙間＝正しくは「マージン」と呼ぶ）があるのが分かるかと思います。

ココログでは自動的に空く隙間は5px（ピクセル）に設定されていますが、個人的にはやや狭すぎる感があるので、いつも、HTMLタグをいじって調整しています。

この余白を調整する方法を説明するのが、この記事の目的です。

HTMLタグ：style="float: left; margin: 0px 5px 5px 0px;"

画像の左寄せ、あるいは右寄せを指定した場合、「HTMLの編集」に切り替えてHTMLタグを見ると、「style="float: left; margin: 0px 5px 5px 0px;"」という要素が記述がされています。これはココログが自動的に設定したものです。

<a href="http://daishi100.cocolog-nifty.com/.shared/image.html?/photos/uncategorized/2016/12/08/cocolog_my_photo_trouble_img01.jpg" class="mb"><img alt="Cocolog_my_photo_trouble_img01" title="Cocolog_my_photo_trouble_img01" src="http://daishi100.cocolog-nifty.com/blog/images/2016/12/08/cocolog_my_photo_trouble_img01.jpg" width="160" height="242" border="0" style="float: left; margin: 0px 5px 5px 0px;" /></a>

このうちの「float: left」は左寄せ（右側に文字の回り込み）を意味し、「margin: 0px 5px 5px 0px」は画像の周囲の余白を表します。（下図）

　

余白を調節するときは、「HTMLの編集」に切り替えてこの数字を変更します。

サンプル2（余白調整後）

従って、HTMLタグのこの数字をいじれば、余白を微調整することができます。

左の画像では、分かりやすく、

margin: 0px 30px 5px 30px;"

と、左右のマージンを30pxにしてみました。

HTMLタグを編集するときは、必ず半角文字を使うこと、タグ内の各要素の前後には必ず半角スペースを空ける必要があることに注意して下さい。

記事（文字）の回り込みを解除する

以前も記事にしましたが、ここでも簡単に説明します。

上の例のように文字の回り込みを途中でやめたいときは、「HTMLの編集」に切り替え、「<p>を指定。</p>」となっているのを、「<br clear="left" />」と一文字のスペース（下では便宜的にスペースの代わりに■と表記）を追加して、

<p>を指定。<br clear="left" />■</p>

とし、更に、 最後の「</p>」の右側に文字、例えば「ああ」と記入して、

<p>を指定。<br clear="left" />■</p>ああ

のようにし、

「記事の作成」タブに切り替えると、記事の回り込みは解除されて、「ああ」は画像の下に配置されます。

これを再び「HTMLの編集」モードに切り替えると、「<p>ああ</p>」のように、ココログが自動的に改段落タグ（「<p>～</p>」）を付加してくれます。

画像の下に文章を続けるときは、この「ああ」を上書きするようにして記入します。

注）HTMLタグはブログシステムの違いに関わらず共通ですが、ブログシステムによって使用できるタグ・できないタグがあったり、「記事の作成」で入力した内容をどのようなHTMLタグにするのかは、ブログシステムの仕様によって異なります。

ここでの説明はココログでの作業方法を説明したものです。

　　

---