なせば成る

個人的に注目している人たちや物についてと日々感じたことを書いていきます。 コメント トラックバック 歓迎です。

キンモクセイ

2004年10月03日 | 日記
実家に行ったら、キンモクセイがずらっと咲いていました。

早速、携帯で撮影してモブログです。

良い香りに包まれました。香りもモブログできたら最高ですね♪


この記事は、yaga-kyon様のきんもくせい。 -2004/9/30 にTBです。




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

写真のレイアウト機能を活用したブログ集

2004年10月03日 | 頑張っている人たち
ここでは、写真のレイアウト機能(タグ:align)を使ったブログの例を紹介していきます。


なせば成る トップーページ
カテゴリー用写真の右横に主な記事を紹介しています。

「夏」が好き@三輪裕子のBLOG ▼ 紅蓮の日常 ▲ 紅蓮さん -2004/9/30
文章中に画像をうまくはめ込んでいます。

家族4代で大旅行!@スローライフスタッフ日誌 ひろたさん -2004/9/21
写真の説明を横に書いています。色も変えているので、わかりやすいですね。

BLOG実験中、ふたたび@みるくてぃーをひとくち  みるくてぃーさん -2004/10/6
ご自作のプロレスラーの絵を文章中にいろんな大きさで張り込んでいます。
参考になりました。

魅惑の香@ 夜空に見た虹 ~ノンフィクションな自分~   和未さん -2004/10/13
いくつかの香水とその香水にまつわるご自分のエピソードを語られています。
香りが漂ってきそうなブログです。

レトロな風景@vagabond の 徒然なるままに  vagabondさん  -2004/11/3
都会の中にある、昔の建物... レトロというよりも、えっ日本?っていう感動を覚えました。


随時更新していきます。

なせば成る:写真をうまくレイアウトしてみよう!を読んでみて下さいね。

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

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

2004年10月03日 | なせば成る ブログあれこれ
写真と文章をうまくレイアウトすると、記事が一層お洒落になりますね。
写真と文章を一体にする方法を学びます。

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


■ステップ1: こんなことができるようになります!


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

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

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

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

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


■ステップ2: どうやったらできるのかな?
今回使うおまじない(タグ)は、これです 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"を使って、写真を右、文章を左に配置しましょう。



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

以下例です。

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

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

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

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



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

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

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

こんなふうにです。

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



■ステップ4: まとめ

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

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



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

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


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

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


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