【みんヘル】画像の横に文字を書く －その１－

優秀な受講生のverdy君や330武くんは
既に復習を終えてますね。
えらい、えらい。(*´∇｀*)
こういう優等生ばかりなら先生は楽チンです。

他の方、着いてきてますかぁ？
AUTOくんとタロくんは落ちこぼれちゃいました。
お二人とも既にトップランカーですから、これ以上
技術を磨かなくても大丈夫。（・∀・）

---

さてさて。

ここまでの技を使うと、１つのブログに複数の画像を貼り付けることは出来ますよね。
ただ画像は画像の行、文章は文章の行に分かれてしまいます。

┌──┐
│画像│
└──┘
文章文章文章文章
┌──┐
│画像│
└──┘
文章文章文章文章


なので、僕がオフレポの時に使ってる
こんな感じとはちょっとイメージが違いますよね。

┌──┐
│画像│文章文章文章文章
└──┘
┌──┐
│画像│文章文章文章文章
└──┘


ま、こんなことをしなくても複数の画像が貼れるようになっただけで充分楽しいブログに
なったことと思いますが、せっかくなんで画像の横に文字を書く方法も披露しちゃいましょう。

---

え～、実は僕が使っている方法とは違うのですが、最も簡単に実現できる方法としてご紹介しておきますね。

これは「回り込み」という手法を使います。
新聞や雑誌のレイアウトをご存知の方であれば当たり前の手法なのですが、貼り付けた画像の周りに文字を回り込ませるという手段になります。


では、どうするか。
実は非常に簡単♪

【みんヘル】画像を貼り付ける －その３－ のところで、imgタグに width で
画像の幅を指定する方法をご紹介しました。

今度は、その width の後に align という記号(属性)を追加します。
align は「アライン」と読みましょう。決して「蟻軍」じゃないですよ＞タロくん！
車高調とかを入れるとアライメントを取りますよね、あれです。
「整列する」とか「整える」みたいな意味でしょうか。

---

具体的にやってみましょう。
せっかくなので優等生のverdy君を拝借しましょうか。

<img src="https://cdn.snsimg.carview.co.jp/carlife/images/bbsmsg/208272/p1.jpg" border="0" width= 150>

上の文字列をブログに挿入すると、下のような画像が貼りつきます。



この文字列の最後に align=left という文字を追加します。
（ホントは最後じゃなくてもよいけど）

<img src="https://cdn.snsimg.carview.co.jp/carlife/images/bbsmsg/208272/p1.jpg" border="0" width= 150 align=left>

さてこれをブログに挿入すると・・・

こんな風に文字が画像の右側に回りこんで表示されるようになります。
ま、文字が右側に回りこんだというよりも、画像を左に寄せたという方が正確なのかも知れませんね。

---

どうです？ 簡単でしょ？

ただし注意点はあります。
今回使ったのは、あくまで「回り込み」という技法ですので、文字以外も全て
回り込んで表示されます。

ということは、複数の画像を表示させようとして、
こんな風にレイアウトが崩れてしまうということがあります。
ま、それはそれで楽しいですけどね。




とりあえず簡単に回避するには・・・
そうですね、文章の後ろに適当に空行（改行だけの行）を入れておきましょう。

ちょっと面倒臭い面もありますが、おそらくコレが最も簡便な方法ではないかと思います。

---

では次は、僕が使っている方法についてご紹介しましょうか。
かなり面倒臭い方法ですので、脱落者頻発と思われますが(ﾟ∀ﾟ；

起立、礼！