画像の横に文字を書く方法(回り込み)

こんにちは。

ぜんです。


前回は画像のサイズを変更する方法をお伝えしました。

今日は少し発展して

画像の横に文字を書く方法です。回り込みとも言います。


例えば、こんな感じです。

  早く回り込み教えて

 

 

 

 

 

 

 

 

普通の画像を挿入しただけだと

画像の上か下にしか文字が書けません。

ですがタグを記述することで画像の横に文字を書く事ができます。



では今日もいってみましょう!

 

 

 

画像の横に文字を書くには

画像のタグのところに align=“   ”   というタグを記述し、

黄色のところに場所を表すアルファベット指定します。

 

 

画像を左におきたい場合は   left

画像を右におきたい場合は   right

 

 

 

<img src=”画像” width=”サイズ” height=”サイズ” alt=”” align=”right”>

やっほ~

 

 

 

 

 

 

 

こんな感じです。

 

画像の上部、真ん中、下部に文字を書く場合

 

 

画像の横でさらに

その画像の上から、

その画像の真ん中から

その画像の下部に文字を書く場合には

 

alingh=”         “  のところに top  middle  bottom  と記述します。

 

例   画像の上部から文字を書く

 

<img src=”画像” width=”サイズ” height=”サイズ” alt=”” align=”top”>

 

  上から~マリコ

 

 

 

 

 

 

 

例   画像の真ん中から文字を書く場合

 

<img src=”画像” width=”サイズ” height=”サイズ” alt=”” align=”middle”>

 

 

   ち~ゆう

 

 

 

 

 

 

 

例 画像の下部に文字を書く場合

 

<img src=”画像” width=”サイズ” height=”サイズ” alt=”” align=”bottom”>

 

 

  ち~ゆうって何(中?)


こんな感じになります。

 

 

 

回り込みを使うメリット

 


次に画像の横に文字を書くことの

メリットについて私から2点ほどお伝えします。


1 商品の説明をするときに使える

 

画像の横に文字を書くことで

商品の説明がし易くなります。

 

 

  

   ブログとメルマガを使ったアフィリエイト教材。
  
  これがアンリミテッドアフィリエイトです。
  

 

 

 

このように商品の横に文字を書くと

商品の簡単な説明ができて便利です。

 

 


もう一つのことは

実例を先に見てもらいましょう。

 

では、どうぞ。

 


 

 

ねぇねぇ~

回り込みを使うメリットって何なの?

 

 

 

 

 

  こんな風に

     対話形式にできることだよ。

  対話形式にすると読み易くなる場合もあるよ。


 

 

 

 

   画像って難しい時もあるけど

   うまく使えたら面白いね~。

 

 

 

 

 

 

そうそう。
文字だけだと読むのがしんどいけど

画像があると雰囲気も変わって
読むのが楽しくなることもあるよ。

 

 

 

 

2 対話形式にすることができる

 

はい。回り込みを使うと

こんな風に対話形式にすることができます。

 

キャラクターを使って

立場別に対話形式にすることで

説明しやすいこともありますので、

機会があれば使って見てください。

 

 

 

では長くなりましたが本日のまとめ

 

画像の横に文字を書くには

img タグ のところに  align=”        ” を入れ

left     right     top    middle    bottom を記述する。

 

 

画像の回り込みをすることで

商品説明や対話形式に使うことができる。

 

 

 

いつもと記事の雰囲気が

変わりましたが大丈夫ですかね?

 

ちょっと不安ですが、、、。

 

 

 

本日もご訪問ありがとうございました~。

タグ


2012年2月19日 | コメント/トラックバック(14)|

カテゴリー:html タグ

このページの先頭へ