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

こんにちは。

ぜんです。


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

今日は少し発展して

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


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

  早く回り込み教えて

 

 

 

 

 

 

 

 

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

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

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



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

 

 

 

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

画像のタグのところに 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 を記述する。

 

 

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

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

 

 

 

いつもと記事の雰囲気が

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

 

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

 

 

 

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

このエントリーを含むはてなブックマーク Buzzurlにブックマーク livedoorクリップ Yahoo!ブックマークに登録

メルマガ発行中です。

ブログとは違う記事を書いている
ぜんメルマガ「ネットビジネス公園」

購読よろしくです!

メルマガ登録
メールアドレス
お名前
powered byメール配信CGI acmailer

あわせて読みたい関連記事

タグ


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

カテゴリー:html タグ

トラックバック&コメント

この投稿のトラックバックURL:

トラックバック

コメント

  1.  
    ぜんさん☆
     
    こんばんは、ヤマオです^^
    ヤマオブログへのコメント感謝です!
     
    え~っと。
    今回の記事はヤマオは一番反応しないと
    いけない様な気がするのは気のせいでしょうか?(笑)
     
    対話形式は確かに面白く全て
    しっかりと読まされてしまいました^^
     
    こういった表現の仕方もありなんですね☆
    ヤマオもいずれ挑戦してみますm(__)m
     
    たぶん、この記事を読んでニヤニヤするのは
    アフィリエイターの中でもヤマオだけだな^^;
     
    すいません、最後に1ついいですか?
    『まゆゆ』のトランプください!!
    (笑)とか無しでガチです☆
     
    アイディアの引き出しが
    増えるような記事をありがとうございました^^
     
    それでは
    今日も元気に応援『ポチッ』とね^^

    • ぜん より:

      ヤマオさん、こんばんは~。

      いつもコメントありがとうございます。

      せっかく画像を使うのだったら
      こんな対話形式にするのもいいかなと
      思いこんな記事にしてみました。

      ガチですかっ!

      ここで盛り上がっちゃうのもなんですので、
      トランプの件はメール等で検討しましょう!

      元気に応援ありがとうございます。

  2. いつもありがとうございます。
    ぬのみ~ぃです♪
    これはユニークな記事ですね☆
    真似したいです(*^_^*)
     
    こういう記事の書き方というか
    表現の仕方は、おもしろいので
    最後まで見ますよね^^
     
    AKBトランプで来たか!って感じです(笑)

    応援ぽちり
     

    • ぜん より:

      ぬのみ~ぃさん、こんばんは。

      たまにはこんな感じもいいかな~と。
      構成は結構悩みましたけど。笑

      しゃべっている感じだと読みやすいですよね。

      応援ありがとうございます。

  3. TOSHI より:

     
    ぜんさん
     
    こんにちは。
    TOSHIです(^^)
     
    画像を回りこみで表示させると
    出来ることや表現の仕方が増えるので
    いいですよね☆
     
    初心者さんに嬉しい記事だろうなぁ
    と思わされました(^^♪
     
     
    また訪問させて頂きます(^O^)/

    • ぜん より:

      TOSHIさん、こんにちは。

      いろんな使い方ができるので
      知っておくといいですよね。

      初心者さんに喜んでいただけるような
      記事をこれからも書いていきたいと思ってます。

      TOSHIさんの音声や動画見てますよ~。
      コメントありがとうございます。

  4. tax laws より:

    What’s uρ, after reading this remarkable article i am as well happy to share my familiaritү here with colleaǥues.

  5. fire tablet より:

    Great post, you have pointed out some good points, I likewise believe this is a
    very fantastic website.

  6. My brother recommended I might like this web
    site. He was entirely right. This submit truly made my day.

    You can not consider simply how so much time
    I had spent for this information! Thanks!

  7. Useful information. Fortunate me I discovered your web site by chance, and
    I am stunned why this coincidence didn’t came about in advance!

    I bookmarked it.

  8. great video より:

    Have you ever thought about writing an e-book or guest authoring on other websites?

    I have a blog centered on the same subjects you discuss
    and would love to have you share some stories/information. I know my subscribers would value your work.
    If you’re even remotely interested, feel free to send me an e-mail.

  9. At this time it appears like BlogEngine is the top blogging platform available right now.
    (from what I’ve read) Is that what you are using on your blog?


コメントをどうぞ

このページの先頭へ