以前、画像の回り込み配置について、連続して配置する方法を書きました。
連続して配置するとき、配置ズレをおこさないために、タグを挿入する方法をご紹介しています。
過去記事→【for ウスケバ】画像を連続で回り込み配置する方法
今回は、画像を回り込ませる場合の注意点をいくつか、さらに画像の周囲に余白を入れる方法について説明したいと思います。
文字が変な位置に表示されてしまう！
画像を回り込み配置で左右に挿入した場合、文字が下に配置されたり、変な改行が入ってしまうことがありませんか？例えば・・・
↓
こんな配置になってしまったり・・・
こんな場所に文字が入ってしまったり・・・
これらは、すべて改行してしまったせいです。
文章と画像をキチンと揃えるためには、画像のタグと文章を連続して書かなければいけません。
<img src="アップロードした画像のURL" align="left" alt="" >
ここで改行してしまうと文字がズレる！
文章・・・・・・
<img src="アップロードした画像のURL" align="left" alt="" > 文章・・・
↑
こんなふうに画像タグと文章を連続して記述すること！
こうすることで、文章と画像の頭がキチンと揃えられます♪
画像の周囲に余白を入れたい！
画像を回り込ませて文章を書いていくと、画像と文章がピッタリくっついてしまい、どうも見づらい・・・なんてこと、良くありますよね。例えば・・・
こんな感じで画像と文章が近すぎると、読みにくかったり、見た目がスッキリしない・・・
こんな感じで文章を記述すると、見た目もスッキリ♪
読みやすいですよね！
余白を入れたほうが、見た目がスッキリして読みやすくなるのは一目瞭然。
これも、簡単なタグを記述することで解決されます。
<img src="アップした画像URL" style="margin-right:任意の数値px;" align="left" alt="" >
上のコードの「任意の数値」に、お好みのピクセル数を入力すればOKです。
例： margin-right:15px; と入力した場合
このような位置に配置されます。
例： margin-right:30px; と入力した場合
このような位置に配置されます。
画像を右側に回り込ませた場合は、「margin-left」とします。
・上に余白・・・marigin-top:〇〇px;
・右に余白・・・margin-right:〇〇px;
・下に余白・・・margin-bottom:〇〇px;
・左に余白・・・margin-left:〇〇px;
【注意！】
複数記述する場合は、必ず上・右・下・左の時計回りで記述してください。
四方すべてに余白を入れる場合は、「margin:〇〇px;」のみでOKです。
ぜひ使ってみてください♪
タグは、新規テキスト・ドキュメントなどに保存しておくと、いちいち書く手間が省略できますね！
#カスタマイズ