画像に文字を回り込ませる方法

１． で編集した表示

２． をに切り替えた表示

↑ではすべて（画像までも） ＨＴＭＬ文 で書かれているので
一見すると画像がなくなったように見えますね？
でもちゃぁんとあるのですよ。

バックの色が 水色 の部分に 【<】と【>】で囲まれた中に
書かれているのが画像の情報 です。

img src=	イメージソース（画像）の置き場やサイズなどを定義します。
"http://image・・"	画像のアドレスを【"】と【"】でくくって指定します。 ここではすでにで貼り付けた楽天の画像ファイルのアドレスが指定されています。
border="0"	画像の枠線の幅を数字で指定しています。【"0"】になっているのでこの画像には枠線がありません。
height="138"	画像の高さをピクセルで指示しています。
width="117"	画像の幅をピクセルで指示しています。

で画像を貼ると
上記の画像情報しかつけてくれません。
なので、画像の右側に
バランスよく文字を配置する情報を加えます。

まず画像を左に配置してその右側に文字を入れましょう。
加える ＨＴＭＬは【align="left"】 です。

３． のＨＴＭＬを編集する。

<p> <img src="http://image.space.rakuten.co.jp/lg01/91/0000567091
/66/imgf337287azik4zj.jpeg" alt="桔梗" border="0" height="138" width="117" align="left" > 高機能エディタで画像を貼ってから文章を普通に書くとこの位置になります。何だか少し収まりがよくないですよね？
この状態でエディタの方にタブを切り替えてみましょう。</p>

バックが ピンク の部分が追加したＨＴＭＬ文です。
ＨＴＭＬ文は必ず半角英数字で書かなければなりません。
 align="left"の前には 半角のスペース を入れることも
忘れないでね！

ちゃんと追加出来たらに切り替えてみましょう。

高機能エディタで画像を貼ってから文章を普通に書くとこの位置になります。何だか少し収まりがよくないですよね？

画像の右側にもう少しおさまりよく文字を配置したいけれど、高機能エディタでは操作仕切れないのでエディタの方にタブを切り替えてみましょう。

文字が右側にきましたが
これでは画像に文字がくっつきすぎるので
画像の周囲に少し間隔をとりましょう。

先ほど加えた 【align="left"】の後ろに 加えるのは
【hspace="20" vspace="20"】 です。
画像の左右と上下にピクセル単位のスペースをあけます。

４． を再編集する

<p> <img src="http://image.space.rakuten.co.jp/lg01/91/0000567091
/66/imgf337287azik4zj.jpeg" alt="桔梗" border="0" height="138" width="117" align="left" hspace="20" vspace="20" > 高機能エディタで画像を貼ってから文章を普通に書くとこの位置になります。何だか少し収まりがよくないですよね？

画像の右側にもう少しおさまりよく文字を配置したいけれど、高機能エディタでは操作仕切れないのでエディタの方にタブを切り替えてみましょう。

どうですか？下図のように少し見やすくなりましたか？　

高機能エディタで画像を貼ってから文章を普通に書くとこの位置になります。何だか少し収まりがよくないですよね？

画像の右側にもう少しおさまりよく文字を配置したいけれど、高機能エディタでは操作仕切れないのでエディタの方にタブを切り替えてみましょう。

Windows付属のメモ帳などに align="left" hspace="20" vspace="20" を貼り付けて【楽天ブログ】など適当な名前をつけ保存しておき、ブログを書くときにそのファイルを開いてコピペするようにすると楽ですよ♪

私は他のＨＴＭＬ文も色々貼り付けて使用しています。