ものぐさ父さんの子育て

このブログでアフィリエイト画像にテキストを回り込ませるのに使っているタグをご紹介します。頻繁につかうので、私は「まるぎん」、「まるぎんみぎ」、「ぢぶた」という読みで単語登録して使っています。

アフィリエイト画像（別に普通の画像でも可）を左端に配置する場合

<div style="margin: 0px 10px 0px 0px; float: left;">（私は、「まるぎん」と単語登録しています）
と
</div>（私は、「ぢぶた」と単語登録しています）
の間に <a href=" で始まるアフィリエイトのタグや <img で始まる画像のタグを置きます。この後に続けて文章を書けば画像が文章の左に配置されてそれを回り込むように文章が配置されます。画像と文章の間の間隔は、上・右・下・左の順番で margin: の後の px の数値を変更すれば変わります（数値を大きくすると間隔が広くなります）。

アフィリエイト画像（別に普通の画像でも可）を右端に配置する場合

もうお分かりかもしれませんが、画像を右端に配置したい場合には、
<div style="margin: 0px 0px 0px 10px; float: right;"><a href=“....>・・・</a></div>（太字の部分にアフィリエイトの画像タグなどをコピーして下さい）
とするだけです。
（<div style="margin: 0px 0px 0px 10px; float: right;"> を「まるぎんみぎ」と単語登録しています。）

HTML のタグなんて難しくてよくわからないという人も、以上のように単語登録しておくと、

1. 「まるぎん」と入力後
   
2. 上記タブに変換して、
   
3. アフィリエイトのページからコピーしてきた【HTMLソース】をペーストし、
   
4. その後に「ぢぶた」と入力後
   
5. </div>に変換させる

だけで、回り込みのためのタグの入力が完了します。なお、回り込ませるテキストが短い場合には、<br clear=all>というタグをテキストの終わりに挿入して回り込みを終了させておく必要があるので、ご注意下さい。

---

* ちなみに他に単語登録しておくと便利なタグをあげておくと

<a href="	：　「りんくる」
"></a>	：　「りんくた」
<blockquote>	：　「いんようる」
</blockquote>	：　「いんようた」

なども登録しておくと便利です。

Example

実際の例をあげてみましょう。

楽天アフィリエイトで『かわいそうなぞう』を検索していただくとわかりますが、画像の【HTMLソース】として指定される画像タグは以下の通りです。

<a href="http://hb.afl.rakuten.co.jp/hgc/01d21791.25f27f06.039bc4d0.9cef0923/?pc=http%3a%2f%2fitem.rakuten.co.jp%2fbook%2f1059361%2f&m=http%3a%2f%2fm.rakuten.co.jp%2fbook%2fi%2f10769893%2f" target="_blank"><img src="http://hbb.afl.rakuten.co.jp/hgb/?pc=http%3a%2f%2fthumbnail.image.rakuten.co.jp%2f%400_mall%2fbook%2fcabinet%2f3230%2f32303301.jpg%3f_ex%3d80x80&m=http%3a%2f%2fthumbnail.image.rakuten.co.jp%2f%400_mall%2fbook%2fcabinet%2f3230%2f32303301.jpg%3f_ex%3d64x64" border="0"></a>

この画像に文章を回り込ませるには、以下のように記述するだけです。実際に前の段落がどうきじゅつされているかを以下にお示しします（ただし、『かわいそうなぞう』の部分はリンクをはずしています）。

<div style="margin: 0px 10px 0px 0px; float: left;"><a href="http://hb.afl.rakuten.co.jp/hgc/01d21791.25f27f06.039bc4d0.9cef0923/?pc=http%3a%2f%2fitem.rakuten.co.jp%2fbook%2f1059361%2f&m=http%3a%2f%2fm.rakuten.co.jp%2fbook%2fi%2f10769893%2f" target="_blank"><img src="http://hbb.afl.rakuten.co.jp/hgb/?pc=http%3a%2f%2fthumbnail.image.rakuten.co.jp%2f%400_mall%2fbook%2fcabinet%2f3230%2f32303301.jpg%3f_ex%3d128x128&m=http%3a%2f%2fthumbnail.image.rakuten.co.jp%2f%400_mall%2fbook%2fcabinet%2f3230%2f32303301.jpg%3f_ex%3d80x80" border="0"></a></div>左の写真は、『かわいそうなぞう』という本のアフィリエイト画像です。かわいそうなぞうは土家由岐雄作のノンフィクション童話です。絵本や紙芝居として出版されています。1968年から2002年の35年に渡り、毎年8月15日の終戦記念日にTBSラジオ「秋山ちえ子の談話室」で秋山ちえ子により朗読されていた事でも知られているそうで、2005年までの発行部数は220万部を超えるという大ベストセラーです。

どうですか？そんなに難しくないと思います。他にもテーブルタグを使う方法もあるのですが、私はこちらの方が使いやすいと思います。
どうぞお試しあれ。