写真と文章をうまくレイアウトすると、記事が一層お洒落になりますね。
写真と文章を一体にする方法を学びます。
注意この後の記事中に"<",">"が登場しますが、全て半角"<>"です。
■ステップ1: こんなことができるようになります!
この画面は、comugiさんのメガネ・メガネ・あぁ~メガネの記事です。
写真のレイアウト機能をうまく使っているので、comugiさんの承諾を得て例とさせてもらっています。
また、紅蓮様の私の好きな本、この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ランキング)をクリックして見てね。
写真と文章を一体にする方法を学びます。
注意この後の記事中に"<",">"が登場しますが、全て半角"<>"です。
■ステップ1: こんなことができるようになります!
この画面は、comugiさんのメガネ・メガネ・あぁ~メガネの記事です。
写真のレイアウト機能をうまく使っているので、comugiさんの承諾を得て例とさせてもらっています。
また、紅蓮様の私の好きな本、この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 style="clear: both;">というおまじない(タグ)を使いましょう。
使い方は、写真の横におきたい文書の終わりに<br style="clear: both;">を貼り付けましょう。
こんなふうにです。
これが私がとっても気に入っているメガネなんです。
■ステップ4: まとめ
どうです。この方法を使えば、写真と文章を自由にレイアウトできます。
試してみてください。
この方法を使って書いた記事を「写真のレイアウト機能を活用したブログ集」で紹介していきます。
活用した例を教えて下さいね。
なお、私が写真のレイアウトを変えられるようになったのは、むっしゅ様の
○【タグ講座】画像表示 <img> Oui! monsieur! ~むっしゅの戯言~ -2004/9/7
のお陰です。他にも関連した記事があるのでお奨めです!
みなさんも、いろいろ試してみて下さい。
■追記 2004/10/5
さらに、詳しく説明した記事がありました。
タグで遊ぼう - イメージ@Run, BLOG, Run byrdieさん -2004/5/21
必見!です
byrdieさんから、文章の回り込みにやり方を教えて頂きました。
ありがとうございました。
今の私のブログランキングは、ここ(人気blogランキング)をクリックして見てね。
私
考えたっけ?
って考えたら
よけい難しくなったので
考えない事にします・・・
TBありがとう!
今 tom-chanの部屋 探索している途中です
コメントありがとうございます。
ちょっと難しくなりすぎたと反省して別の説明記事を検討しています。
さっき紅蓮様に記事を使われてもらうことをお願いに行ってきた所です。
すみません、難しくしてしまってm(__)m
むっしゅ記事の紹介もありがとうございます。
ところでなんですが。
むっしゅ記事内でも書いてはあるのですが、実際のところgooBLOGって<br clear="all">が効かない気がしませんか?
tom-chanさんの記事内のステップ3のところも、たまたま文字のサイズと改行の関係で①の方はテキストが画像の下にまわっただけだと思います。
ソースを見ても単なる<br>になってしまっているし、表示文字のサイズを小さくすると画像下にテキストがいきません。
自分の記事内でも書いておきながらアレなんですが、うーん、やっぱり効かないのかなぁ。
ご指摘ありがとうございます。
記事を書くときは、<br clear="all">でプレビューで見ると、明らかに効いていますが、
アップ(投稿)するとレイアウトがプレビューと変わったのでおかしいなとは思っていました。
gooBLOGで使えるタグ一覧
http://blog.goo.ne.jp/info/tag_info.html
に載っていないのでNGなのかも。
もう少し調べて、この記事を訂正します。
むっしゅ様 ありがとうございました。
もっとじっくり読んでみて勉強してみます。
いつもわかりやすくて助かりますよ☆
みおちゃんの写真と文章が一体化したら、新聞の記事みたいでかっこいいでしょうね。
<br clear="all">については、現在確認中なので使わないようにして下さい。
ちゃんと紅蓮さんの 記事掲載ページにリンクされているけれど
comugiの掲載メガネの写真をクリックすると・・・
一度 試して見て下さい!
思わず ビックリするか・・・
笑ってしまうか・・・
すみませんでしたm(__)m
私もビックリしました。
さっき修正しました。
本当にごめんなさい。
知らないでクリックして
私の頭を見た人が
何人いたのやら・・・(爆笑)
タグに付いては難しくて まだまだ分からない事だらけですが
tom-chanやむっしゅさんの講座で
ボチボチ勉強して行きま~~す
いきなり頭でビックリした人が大勢いたと思います。
今度から気をつけます。
タグは確かに難しいですね。
少しずつ少しずつ使って馴れて行こうと思います。
alignはまた紹介する記事を書きます。
消化不良なので…