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

こんにちは。

ぜんです。


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

今日は少し発展して

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


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

  早く回り込み教えて

 

 

 

 

 

 

 

 

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

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

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



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

 

 

 

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

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

カテゴリー:html タグ

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

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

トラックバック

コメント

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

    • ぜん より:

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

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

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

      ガチですかっ!

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

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

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

    応援ぽちり
     

    • ぜん より:

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

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

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

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

  3. TOSHI より:

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

    • ぜん より:

      TOSHIさん、こんにちは。

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

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

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

  4. 人気の2016 新作 Dior ディオール サングラス ブラック カテゴリー:ディオール サングラス 価格:23600

  5. {Interesting|Lovely!!!!! :D|Beautiful|Congrat for almost
    reaching 2k subbies|You’re very welcome!  🙂 Of course!!!!|+My EcoKids Club
    Thank you ! So nice of you to take the time to watch our article and comment >Please keep watfching and let us knbow if you would
    likee a specific reading .|Thank you !!|Thank you!! We made it!!
    Yay|no dis likkes wow YOU MUST BE A GREAT PERSON and this was posted last year|I love dogs|i like trainz|i love cats|i love cats|this reminds me of Yurio Plisetsky|I love cats|I can’t have a cat my dad’s allergic.
    :'(|In our place theirs a cat running around in our
    house named sunny you should get her or him.|i’m allergic
    to cats|im bunny and every animal and plushie lover|i love cats or you|like meeeeeeee|I can rellate so much from
    this|me too bloody i FREAKING LOVE CATS IM A CRAZY CAT GIRLLLL!!!!!!|yaaaasssss me I love
    kitty’s lol|I love CATs too there so CUTE|Alexis: THIS IS HOW I FEEL ABOUT CATSSSSSSSSS (Ima srry
    lite -.-)|and i luv u!!!!!!!|there’s know a game and the cats sleep walk play and I got it for free|* gives u a neko cat a real one not the ones u see at China
    house *|Clicking subscribe now…..|I can be your cat :
    3|meow~ (=^・ω・^=)|LOL ME TOO I LUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUV CATS|my cat has
    1 eye. it ssaadd|me too I am cat lover|awwwwwwwwww, that’s so cute!|Are you somhow related to Sebastian in black butler?
    XD|I love cats too :3|I OHMYGAWD I LOVE CATS SO MUCH I GOTTA MAKE THIS OMG!!!!
    (i used to havge a cat….)|It’s not your fault, i have two peet cats, the black one named Moonlight, the seconnd one is name Ginger i love
    them sso much. X3|Sqeeeeeeee SAME|I loe cats too |im a dog lover
    and cat lover DONT JUDGE ME!|GEEZZ!! TAKE MY FREAKING CAT!!!!!!

    PLZZZ!!!btw i loved it!|I’m A CAT LOVER TOO!!!!
    |same im a cat lover|oh this so cutt QuQ|you haven’t made my request yet ;-;|OMG I LOVE CAT(ALL
    ANIMALS)|awwww this is just cute, aand my grandmothernever wanted
    me to have a caat cuz I just keep on loosing them >^<3|Ma sono meravigliosiiii! *_*|:) sei gentilissima come sempre ^^|Grazie mille <3|thanks! ^.^|Facciamolo su questo canale per'ho C:|Se ti va facciamo un article in collaborazione? scegli tu il tema! Mandami un mex su posta personale sarebbe divertente.. P.s ti adooorooo <3|Grazie, si avevo già in mente qualcosa con i gufi spero riescano bene ^.^|che cariniiiiiiii *_* la feresti con dei gufi diversi tra loro? *_*|Sono felice che ti piacciano ^.^ <3|Grazie mille, allora proverò a fare un leoncino per il prossimo article ^.^|carinissimi! Brava! sono davvero dolcissimi… mmmm un… leone? :)|Visiti il mio canale??|Grazie sono felice ti piacciano ^.^|I love coat hangers too…..Naah no i don't|xD I lost it at "online dating"|HOORAY FOR HORRIBLE WEBCAM QUALITY! GO FRAWN! |Lol you did her voice perfectly|HAAHAHAHAHHAHAHAHAHAHAHA|holy f*&k this so funny ….loved it.|


コメントをどうぞ

このページの先頭へ