以前、どなたかのブログコメント欄にてコメントしたことがあったのですが、
恐らく一般的に役に立つんじゃないかと思い、記事にしてみました。
ご紹介するのは、画像を連続で回り込み配置する方法です。
言葉だけじゃ、何のことかイマイチ分からないかもしれませんね。
例えば、こういうものです。
↓
こんな感じで、複数の画像を連続で回り込み配置するということ。
上の例の場合、画像を文章の『左寄せ』で回り込ませています。
このように連続で回り込ませるには、ちょっとしたコツが必要なのですが、
改行などで配置しようとして、なかなか思い通りにいかなかった経験ありませんか？
編集のときには上手く配置できたと思っていたのに、実際の記事を見てみると・・・
↓
こんなふうに階段状になってしまい、悶々と眠れぬ夜を過ごした方も多いのでは？
スペース入れまくっても、なかなか思い通りにいかず・・・orz
そんなときは、記事の編集画面で以下のようになっていると思います。
<img src="アップロードした画像のURL" align="left" alt="" > 文章
<img src="アップロードした画像のURL" align="left" alt="" > 文章
このように単に改行しただけでは、うまく配置することができません。
この場合、回り込みを解除するタグ<br clear="all">を入れます。
<img src="アップロードした画像のURL" align="left" alt="" > 文章
<br clear="all"><br />
<img src="アップロードした画像のURL" align="left" alt="" > 文章
<br clear="all"><br />
このようにすることで、連続して画像を回り込みで配置することができますよ♪
ここでポイントが１つ。
必ず最後にも<br clear="all"><br />を入れてください。
そうしないと、最後に配置した画像の以下の文章全てが回り込んでしまいます。
注意しましょう。
逆に言うと、回り込みを解除したいところまで文章を続けて書くことも可能なわけです。
↓
回り込ませた文章には、銘柄や蒸留所名、ビンテージなどの基本情報を記述し、
回り込みを解除させて、詳細情報やコメントなどを記述することができるわけです。
もちろんテーブルタグを使い込んでるから・・・
と、昔ながらのウェブレイアウトに慣れてしまった方はテーブルでも構わないですが、
コチラのほうが記述が少なくてスッキリしますよね。
ブログを読んでもらうためには、見た目の配置も重要な要素の１つ。
ぜひ使ってみてください♪
#カスタマイズ