普通に画像をアップして文章を書こうとすると画像のとなりに、かなりの余白があってもそこには文章を書くことができませんよね。
私のブログのようにメイン記事部分が広いと、小さい画像ではとなりに余白が出来てしまいもったいない感じがします。
それを画像のすぐとなりから文章を書くようにするにはfloatを使うことで可能になります。
floatを使うとこんなふうに出来ます。
ちなみにこの画像は以前に作ったものを使っていますので、特にありがとうございますというのは意味がありません。
このように画像の横に文章を書くことが出来るようになります。
右側に画像を配置することも可能です。
右側に画像を配置して、左側に文章を書くこともできるのです。
同じブログでも配置をいろいろうまく使うことで魅せるブログになると思います。
ＣＳＳの設定によって実際の見え方が変わるので「表示を確認する」を使って確認しながら行ってください。
ｆｌｏａｔの使い方
ＣＳＳで設定しても良いのですが、どのみちブログ記事を書く際にＨＴＭＬタグに書き込まないといけませんので、ＨＴＭＬに直接記述する方法でご紹介します。
画像を左側に配置する場合
下記を「ＨＴＭＬタグを表示」でimgの隣に半角スペースを空けて記載します。
style="FLOAT: left"
<img style="FLOAT: left" border="0"・・・・・・・/>こんな感じでimgとborderの間に入れます。
画像を右側に配置する場合
下記を「ＨＴＭＬタグを表示」でimgの隣に半角スペースを空けて記載します。
style="FLOAT: right"
<img style="FLOAT: right" border="0"・・・・・・・/>こんな感じでimgとborderの間に入れます。
これを入れることで画像を配置した後に書いた文章が右側に書けたり、左側に書けるようになります。
３カラムなどで記事部分が狭い場合はあまり使わないかもしれませんが、２カラムなどで余白がもったいないと感じる方がいましたら、活用してみてくださいね。