ブログ記事に画像を貼り付けると、説明しやすくなって効果的になります。

ということで、ブログに貼り付けた画像に文字を回り込みさせるＨＴＭＬを覚えておくと、とても便利です。


特に無料ブログは、画像に文字を回り込みさせる機能がついていないこともありますので、役に立ちます。


ブログに画像を貼り付けると、画像のＨＴＭＬは下のようになっています。
↓

<img src="画像が保存されている場所（ＵＲＬ）">

この画像のＨＴＭＬのうしろに、画像に文字を回り込みさせるＨＴＭＬを追加します。

配置を指定するalign（アライン）を使います。
alignの意味は、一列に整列する・提携する・調節するです。.

画像のＨＴＭＬと配置を指定するalignを組合わせてみます。
↓

<img src="画像が保存されている（ＵＲＬ）" align="画像を回り込みさせる方向">

画像を回り込みさせる方向の場所に配置を指定する値を入力します。

画像の位置	入力する値	ＨＴＭＬ
右	right	<img src="画像が保存されている（ＵＲＬ）" align="right">
左	left	<img src="画像が保存されている（ＵＲＬ）" align="left">

画像が右で文字が左の場合

ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ





画像が左で文字が右の場合

ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ



ちゃんと、文字が画像に回りこんでいますね。
でも、なんとなく画像と文字がくっつきすぎていて見づらいですね。

画像のまわりに余白をつけるときに使うＨＴＭＬがあるんです。

marginです。

ここでは、marginを無料ブログでも簡単に使える方法を一覧にしました。

余白サイズ（値）	余白が入る場所	ＨＴＭＬ
値が１つ	上下左右	style="margin:値１;"
値が２つ	値１が上下、値２が左右	style="margin:値１ 値２;"
値が３つ	値１が上、値２が左右、値３が下	style="margin:値１ 値２ 値３;"
値が４つ	値１が上、値２が右、値３が下、値４が左	style="margin:値１ 値２ 値３ 値４;"

この中で、値を４つ入れるＨＴＭＬを覚えておけば迷いもなくなります。

時計回りに、上・右・下・左です。

<img src="画像が保存されている（ＵＲＬ）" align="画像を回り込みさせる方向" style="margin:値１ 値２ 値３ 値４；">

値は半角スペースでつないで、px（ピクセル）で入力します。


画像が左で文字が右の場合を使って、右に余白を作ってみます。

align="left" style="margin:0px 20px 0px 0px;"

ここでは、画像の右に20pxの余白をつくります。
上 右 下 左：0px 20px 0px 0px


ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ



画像と文字の間に余白ができました。

ぴったりと画像と文字がくっついているより、ちょっと余白が空いているほうが見やすいですね。



文字が画像に回り込むタイミングは、文字の行数が画像の高さ以上になったときです。

下の画像＆文字をみると、画像を小さくしたことで文字が回り込みが早くなっていますね。
↓
ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ




画像に文字を回り込みさせたあとに、回り込みはここで終了というＨＴＭＬも忘れず入れましょう。

画像と文字の位置	ＨＴＭＬ
画像が左で文字が右	<br clear="left">
画像が右で文字が左	<br clear="right">
画像が左右で文字が真ん中	<br clear="all">

回り込み解除をしないと、そのあとの文章や画像の位置がぐちゃぐちゃになってしまいます。

allは、すべての回り込みを解除してくれるので<br clear="all">を覚えておくと便利です。



最後まで読んでいただき、ありがとうございます。