写真をうまくレイアウトしてみよう！

写真と文章をうまくレイアウトすると、記事が一層お洒落になりますね。
写真と文章を一体にする方法を学びます。

注意この後の記事中に"＜","＞"が登場しますが、全て半角"<>"です。


■ステップ１：　こんなことができるようになります！


この画面は、comugiさんのメガネ・メガネ・あぁ～メガネの記事です。
写真のレイアウト機能をうまく使っているので、comugiさんの承諾を得て例とさせてもらっています。

また、紅蓮様の私の好きな本、この１冊もレイアウト機能を使って文章中にうまく絵を埋め込んだ良い例だと思います。紅蓮様の承諾を得て例とさせてもらっています。

どうです。ちょっとクールな感じがしませんか？

なお、写真の貼り付け方は、あなたのブログにもたくさんの写真をのせてみよう！　で挑戦してみて下さい。

この記事では、
＜img src="○○○.jpg"/＞ができたところからスタートします。


■ステップ２：　どうやったらできるのかな？
今回使うおまじない(タグ）は、これです　align=""
英語で”並べる”という意味があるそうです。

さっそくやってみましょう。
①alignをつけない場合です
＜img src="○○○.jpg"/＞のようになっているときです。
基本形ですね。
文章を書くとこんな風に、写真の下側から始まってしまって、文章と写真が一体化しません。写真の下から文章を書くことはできますね。


②align="left"をつけた場合です
＜img src="○○○.jpg"align="LEFT"/＞というように書きます。

すると、
と写真の位置は①と同じ左（left)に寄っていますが、文章が写真のすぐ右側に書くことができます。
これなら、写真と文章を一体化することができそうですね。でも、これではこれまでと変化が少なく物足りないですね。



③align="right"をつけた場合です
＜img src="○○○.jpg"align="right"/＞というように書きます。
すると、

と写真の位置は①や②と違って右（right)に寄って、文章が写真のすぐ左側に書くことができます。
今回のおまじないを知らないと、こんな記事の書き方は出来ないですよね。



④ここまでのまとめ
写真を左端や右端に置いて、その横に文章を書くには、

align="left"を使って、写真を左、文章を右に配置しましょう。
align="right"を使って、写真を右、文章を左に配置しましょう。



■ステップ３：　文章がうまく回りこませよう！
さて、写真の横に文章が置けるようになったので、次のようなブログを書いてみましょう。

以下例です。

①めがねの紹介
購入年月日　　○○年××月△△日
価格　　○○○○円

これが私がとっても気に入っているメガネなんです。

と書きたかったとします。
でも、これまでのおまじないだけだと、こうなるんです。

②めがねの紹介（失敗例）
購入年月日　　○○年××月△△日
価格　　○○○○円
これが私がとっても気に入っているメガネなんです。



上の①と②の例の違いがわかりますか？
これが私がとっても気に入っているメガネなんです。の位置が違うんです。
写真の下に文章を書きたいのに、右側になってしまう。（右側に文章が回りこんでいる）

これを解消するには、
＜br clear="all"＞というおまじない（タグ）を使いましょう。
<br style="clear: both;">というおまじない（タグ）を使いましょう。

使い方は、写真の横におきたい文書の終わりに＜br clear="all"＞を貼り付けましょう。
使い方は、写真の横におきたい文書の終わりに<br style="clear: both;">を貼り付けましょう。

こんなふうにです。

これが私がとっても気に入っているメガネなんです。＜br clear="all"＞<br style="clear: both;">



■ステップ４：　まとめ

どうです。この方法を使えば、写真と文章を自由にレイアウトできます。
試してみてください。

この方法を使って書いた記事を「写真のレイアウト機能を活用したブログ集」で紹介していきます。
活用した例を教えて下さいね。



なお、私が写真のレイアウトを変えられるようになったのは、むっしゅ様の
○【タグ講座】画像表示　＜img＞　　Oui! monsieur!　～むっしゅの戯言～　　-2004/9/7
のお陰です。他にも関連した記事があるのでお奨めです！

みなさんも、いろいろ試してみて下さい。


■追記　2004/10/5
さらに、詳しく説明した記事がありました。
タグで遊ぼう - イメージ＠Run, BLOG, Run　　byrdieさん　-2004/5/21
必見！です

byrdieさんから、文章の回り込みにやり方を教えて頂きました。
ありがとうございました。


今の私のブログランキングは、ここ(人気blogランキング）をクリックして見てね。