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

ポイントは画像の下の文字が回り込む

小さな写真やイラストの左側や右側に文字が回り込んでいるページをよく見かけます。ブロックエディターであれば、上から「見出し」、「写真」、「記事」、「見出し」などと積み重なるイメージなので画像と文字を横に並べるイメージがわかないものです。

でもその方法は案外簡単なのです。
画像に右側か左側に文字を回り込む設定をすればいいだけなのです。そしてポイントは、先に文章を書き上げるということ。

文章が完成したら、好きな場所にイラストなり画像なりを入れていきます。そして入れた画像の下の文章が画像の左か右に回り込むということです。

このイラストは私の手書きのイラストなのですが、サイズは６０７ｐｘ×５７８ｐｘとちょっと中途半端なサイズになっています。

ただ画像サイズは自由に変更できるので気にする必要はありません。
前述の通り、先に文章を作成し、そのあとで画像を差し込みます。今回は１番目の段落と２番目の段落の間に画像を差し込んでみることにします。

そして画像（イラスト）は右寄せに設定します。
画像（イラスト）のサイズは、オリジナルが６０７ｐｘなのですが、２２０ｐｘまで縮小させて、画像の左側に文字が回り込むようにします。

するとこのように右側にイラストが入り、イラストの左側に下の文字がまわりこみました。

次は写真の左や右に文章をまわりこませるサンプルを作ってみましょう。元の写真サイズは８００ｐｘ×４５０ｐｘです。この写真を３００ｐｘほどに縮小して左側に配置してみましょう。

今回は３００ｐｘとしていますが、写真を挿入する時に好きなサイズを指定できるのもとても便利な機能です。つまり、実際に表示させてみて大き過ぎると感じたら、２５０ｐｘくらいに小さくしたり、逆に小さすぎると感じたら、４００ｐｘくらいに拡大することもとても簡単にできてしまいます。

話は横道にそれてしまいますが、今回使用した写真は、私の趣味のハイキングで撮影したもので、場所は埼玉県の飯能市にある柏木山という低山の山頂の写真です。

興味を持っていただけた方は、私のハイキング記録をまとめた以下のブログ（マイカー登山者のための駐車場情報）を見てください。