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

こんにちは。

ぜんです。


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

今日は少し発展して

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


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

  早く回り込み教えて

 

 

 

 

 

 

 

 

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

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

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



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

 

 

 

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

画像のタグのところに 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日 | コメント/トラックバック(22)|

カテゴリー:html タグ

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

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

トラックバック

コメント

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

    • ぜん より:

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

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

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

      ガチですかっ!

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

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

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

    応援ぽちり
     

    • ぜん より:

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

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

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

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

  3. TOSHI より:

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

    • ぜん より:

      TOSHIさん、こんにちは。

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

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

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

  4. Gbsstudios.Net より:

    I’m gone to say to mу little brotheг, that he should also pay a quiϲk visit this bⅼog on regᥙlar baѕis to get updated from latewt reρorts.

  5. tax laws より:

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

  6. We offer you free of charge quotations. Repointing.

  7. However, before you determine to make use of online hack software for Conflict Royale mobile
    sport, you must find hack software that got here from trusted source.

  8. Michael より:

    You can mix a Computer floppy, SCSI and wide SCSI.

  9. The sharks are believed to be interested in hot spots.” Following the assault at San Onofre, a group of about
    9 were spotted close to Poche Seashore in Dana Level.

  10. Excellent goods from you, man. I’ve understand your stuff previous to and you are just too wonderful.
    I actually like what you’ve acquired here, really like what you are stating and the way in which you say it.
    You make it enjoyable and you still care for to keep it wise.
    I cant wait to read much more from you. This is really
    a wonderful web site.wholesale nfl jerseys

  11. mississauga より:

    There may be c lot more duties and responsibilities an internet developer might need to
    perform, which often is he’s working on. Web developers play
    with an part in the economy today. While they must
    be able to communicate effectively so as to understand
    what’s required to find the work done, the majority of their
    work is done. Web developers use coding languages to be certain each of the features in the site really
    do the job correctly.

  12. Over 300,000 mobile recreation builders have taken advantage of Corona SDK – particular cross-platform
    toolkit.

  13. This gives you higher bonuses and you may bump into HUNGRY letters and other goodies.

  14. visit website より:

    Nice post. I learn something totally new and challenging on sites I stumbleupon every day.
    It will always be helpful to read through content from other
    writers and practice a little something from their websites.

  15. day trade forex より:

    What’s up, after reading this amazing post i
    am also cheerful to share my knowledge here with friends.

  16. There is definately a lot to find out about this topic.
    I really like all of the points you made.

  17. Hello to every single one, it’s actually a good for me
    to pay a quick visit this web site, it includes precious Information.

  18. I think that everything said was actually very
    reasonable. However, what about this? what if you added a little information? I ain’t suggesting your information is
    not good, however what if you added a post title that grabbed
    folk’s attention? I mean 画像の横に文字を書く方法(回り込み) | 基礎からじっくりレベルアップアフィリエイト is kinda plain. You could look at Yahoo’s home
    page and watch how they create post headlines
    to grab people to open the links. You might add a related video or a picture
    or two to grab readers interested about what you’ve got to say.

    In my opinion, it would bring your posts a little bit more interesting.

  19. best nightcore より:

    You actually make it appear so easy together with your presentation but I in finding this matter to be actually
    something that I think I would never understand.
    It sort of feels too complex and very extensive for me. I’m looking forward
    for your next publish, I will attempt to get the grasp of it!


コメントをどうぞ

このページの先頭へ