大変参考になりました。ありがとうございました。

もうひとつ教えてほしいことがあるのですが、点線や実線で囲んだ画像を横に数個並べる場合はどうすればいいのでしょうか？

お時間のあるときにでもご指南いただけないでしょうか？

(January 29, 2010 07:09:39 AM)

1697380

HOME | DIARY | PROFILE

【フォローする】【ログイン】

ものぐさ父さんの子育て

お料理メモ

(0)

高校生との日々（長男編）

(0)

年老いた母親のこと

(1)

Keyword Search

▼キーワード検索

Profile

ものぐさ父

３人の子供の子育て中のものぐさ父さんが教育費捻出のためアフィリエイトサイトの開設。ものぐさなのでスーパーアフィリエイターは、無理かもしれませんが、インターネットでの教育費稼ぎを思い立ったその日からの奮闘（？）振りをお楽しみ下さい。

フォローする

Calendar

商品画像にテキストを回り込ませるには？

(7)

テーマ： ☆テンプレート☆(358)

カテゴリ：アフィリエイト挑戦記

海外からのお客さんの来日で忙しい一週間でしたが、ようやく今日でそれも終わり久しぶりに家で家族と夕食をとりました。

さて、今日は久しぶりにアフィリエイトネタをご披露します。超初心者向けの HTML 講座です。
楽天では、自分で HTML や CSS を変更できないのですが、日記の中にスタイルを埋め込むことは認められています。日記の内容にあった商品を加えるだけで、 ただ文章だけの日記よりちょっと華やいだ感じになる ので多用しています（残念ながら、滅多に成果には結びつきませんが…）。

世界に一つだけの花／【送料無料】誕生日祝いのプレゼントに暖混色系アレンジメントフラワー

さて、やり方ですが極めて簡単です。商品リンクの前と後ろに簡単な HTML コードを加えるだけです。以前にご紹介したテーブルタグを使った方法でも似たようなことはできますが、スタイルを指定する方が自由度が高く（慣れると）わかりやすいので便利だと思います（特に、画像を罫線で囲む場合などテーブルタグだけを使って実現すると結構複雑なコードになってしまいます）。
ぜひお試し下さい（設置例→）。

商品画像にテキストを回り込ませるには？

基本的な、HTML の記述は極めてシンプルです。唯一気をつけていただきたいのは、楽天の日記の場合、改行があると自動的にが挿入されてしまいますので、HTML を記述する際には、改行しないようにして下さい（フリーページの場合は、自動改行するかしないかを選択できます）。

<div style="margin: 0px 10px 0px 0px; float: left;">▼商品リンクをここに挿入▲</div>

margin: ★px ☆px ◇px ◆ px;
指定したブロックの上下左右のマージンを指定しています。上記の記述では、上の余白が★px、右の余白が☆px、下の余白が◇px、左の余白が◆ px という意味です。上の余白から始まり、時計回りで余白を指定していると覚えておくといいと思います。

float: left;
次に続くテキストのどちら側に指定したブロック（今回紹介しているケースでは、楽天の商品画像）を配置するかを指定しています。left の部分を right にすれば、商品画像は文章の右側に配置されます。

他にブロックの周りに罫線を引くことも可能です。その場合は、

border: 1px solid #BB0000;

のように記述します。
1px は、罫線の太さ。solid は、罫線の種類（例えば破線で囲みたい場合は、ここを dotted にします）、最後の #で始まる６桁の半角数字は罫線の色を指定しています。#BB0000 などの代わりに red とか green などと指定することもできます。詳しくは、HTML の記述の仕方を紹介したページをご参照下さい（とほほの色入門・色見本）。

なお、テキストの回り込みを強制的にやめさせるためには、回り込みをさせたくない文章の前に

<br clear="all">

コピー＆ペーストですぐに使えるようにいくつかのサンプルを作ってみました。

Example 1: 商品画像の右にこの後に続くテキストを流し込む。罫線なし。

HTML

<div style="margin: 0px 10px 0px 0px; float: left;">▼商品リンクをここに挿入▲</div>

設置例

【ボーネルンド】アニマルボーリング～布でできているボーリングです（1歳から）～
*小さいお子さんはぬいぐるみとして遊ぶことでしょう。鈴の音が子どもたちの興味を引きます。ボーリングとして遊べるようになったら、家族みんなで動物たちをねらってボールを転がそう！だれが一番上手かな？

Example 2: 商品画像の左にこの後に続くテキストを流し込む。罫線なし。

HTML

<div style="margin: 0px 0px 0px 10px; float: right;">▼商品リンクをここに挿入▲</div>

設置例

【Hess社（Hess-Spielzeug)】ベビージム・ダック
赤ちゃんの手が届きやすいように高さが3段階に調節できるようになっています。ダック（あひる）の紐を引くとメロディ（オルゴール）が流れます。

ヘス社はドイツの木製玩具メーカーで、鮮やかな色合いとしっかりとした作りのおもちゃを数多く生産しており、その多くは今も手作業で作られています。ひとつひとつに愛情とぬくもりが感じられます。簡単な組み立て式で箱入りでお届けしますのでご出産祝いにも最適です。

Example 3: 商品画像の右にこの後に続くテキストを流し込む。太さ 1px の罫線で画像を囲む。罫線と画像の間の間隔は、一律 5px。

HTML

<div style="margin: 0px 10px 0px 0px; float: left; border: 1px solid #BB0000; padding: 5px">▼商品リンクをここに挿入▲</div>

設置例

【ハバ社(HABA）】組み立てクーゲルバーン・スターターセット
玉の転がるスロープのついた積み木を並べてビー玉の転がる道を作ります。入門者のためのセットです。何ができるか色々試してみましょう。ピタゴラスイッチのように遊べるかな？基尺が他のHABA社の積み木と同じですので、HABA社の積み木をお持ちでしたらより高低差をつけて遊べます。

Example 4: 商品画像の右にこの後に続くテキストを流し込む。太さ 1px の破線で画像を囲む。罫線と画像の間の間隔は、一律 5px。

HTML

<div style="margin: 0px 10px 0px 0px; float: left; border: 1px dotted green; padding: 5px;">▼商品リンクをここに挿入▲</div>

設置例

【I'm TOY】3WAYスライダー
お子様の大好きな３種類の転がし遊びが１つのおもちゃになっています。青・黄・赤の３種類の「ボール転がし」、リバーシブルキャラクターの「はしご落とし」、４本足のかわいいキャラクターの「まゆだま転がし」でお子様も夢中！リーズナブルな価格も嬉しいですね♪

お気に入りの記事を「いいね！」で応援しよう

Last updated December 17, 2005 11:25:16 PM
コメント(7) | コメントを書く

[アフィリエイト挑戦記] カテゴリの最新記事

アフィリエイト用『商品紹介ボックス』 … January 16, 2012 コメント(2)
Jimdoで作ったウェブサイトで簡単アフィリ… January 8, 2012
楽天ブログ：アフィリエート用のテンプレ… February 9, 2010

■コメント

Re:商品画像にテキストを回り込ませるには？(12/16)

すず。さん

floatを使ってボックスを並べることはできるのですが、
その並んだボックスをセンターに持っていくことが
できなくて
floatはあきらめていました。
私の使い方が間違っていたようです。
勉強させていただきます。
リンクもいただきますのでよろしくお願いします。 (December 19, 2005 09:30:55 PM)

返事を書く

Re[1]:商品画像にテキストを回り込ませるには？(12/16)

ものぐさ父さん

すず。さん
＞floatを使ってボックスを並べることはできるのですが、
＞その並んだボックスをセンターに持っていくことが
＞できなくて
＞floatはあきらめていました。
＞私の使い方が間違っていたようです。
＞勉強させていただきます。
＞リンクもいただきますのでよろしくお願いします。
-----
たしか float では、センタリングする回り込みはできなかったと思います。

りっぱなテンプレートをたくさん公開なさっている方に私などの日記にコメントをいただき恐縮しています。
今後ともよろしくお願いします。 (December 19, 2005 10:36:15 PM)

返事を書く

Re[2]:商品画像にテキストを回り込ませるには？(12/16)

すず。さん

ものぐさ父さん
-----
divの勉強を始めた頃のノートを広げてみたら
回り込みの記載もありました。floatに赤い下線も引いてあり、理解できずにいたのを思い出しました。
すこしタグをいじってみたら、なんとか
形になりそうです。
写真の隣にテキストが入る、日記テンプレを
作りたかったので、これでうまくいくのでは
と思ってます。ありがとです。また、よろしく
お願いします。
(December 20, 2005 09:21:41 PM)

返事を書く

Re:商品画像にテキストを回り込ませるには？(12/16)

ひろりんさん

ものぐさ父さん

＞大変参考になりました。ありがとうございました。
＞
＞もうひとつ教えてほしいことがあるのですが、点線や実線で囲んだ画像を横に数個並べる場合はどうすればいいのでしょうか？
＞
＞お時間のあるときにでもご指南いただけないでしょうか？
-----
参考にしていただけて嬉しいです。
数個並べるのは、単に繰り返せばいいんじゃないですかね？駄目でしたか？ (January 29, 2010 11:57:44 AM)

返事を書く

はじめまして

花梨1048 さん

画像に文章を回りこませるのをやってみたかったので
参考にさせていただきました。
とっても分かりやすいですね(*´∇｀*)
私の持っているHTMLタグの本より分かりやすくて
感激です。ありがとうございました。
また覗きに寄らせてもらいますね。 (March 28, 2010 05:11:17 PM)

返事を書く

花梨1048さん

ものぐさ父さん

＞私の持っているHTMLタグの本より分かりやすくて
＞感激です。ありがとうございました。
＞また覗きに寄らせてもらいますね。
-----
参考にしていただけてうれしいです。今後ともよろしくお願いします。 (March 30, 2010 09:44:17 PM)

返事を書く