PR
Category
カテゴリ未分類
(41)お料理メモ
(0)子育て雑記帳
(1166)読み聞かせのすすめ
(112)小学生向けの本
(53)教育＆習い事
(151)中学受験（長男）
(89)中学受験（長女）
(35)バイオリンのおけいこ
(102)最近読んだ本・おすすめの本
(239)中学生との日々（長男編）
(37)中学生との日々（長女編）
(5)こどもの頃の思いで
(46)夫婦喧嘩は犬も食わない、とは言うけれど…
(35)こどもの病気
(78)海外出張報告書・番外編
(112)おすすめ＆商品レビュー
(36)うちの大事件
(36)アフィリエイト挑戦記
(32)サイト運営
(47)英語の修行
(143)減量大作戦
(22)Macintosh の話題
(19)iPhone の話題
(19)その他いろいろ
(123)高校生との日々（長男編）
(0)年老いた母親のこと
(1)Keyword Search
▼キーワード検索
ものぐさ父
３人の子供の子育て中のものぐさ父さんが教育費捻出のためアフィリエイトサイトの開設。ものぐさなのでスーパーアフィリエイターは、無理かもしれませんが、インターネットでの教育費稼ぎを思い立ったその日からの奮闘（？）振りをお楽しみ下さい。
Calendar
November , 2024
October , 2024
September , 2024
August , 2024
July , 2024
October , 2024
September , 2024
August , 2024
July , 2024
June , 2024
May , 2024
April , 2024
March , 2024
February , 2024
May , 2024
April , 2024
March , 2024
February , 2024
Comments
「感じる楽しさ、や…
New!
森の声さん
老後の楽しい過ごし…
New!
英玲さん
子育て＆自分育て奮… ぽっかりたかべえさん
あのねぇ。おとうさ… oyabakatosanさん
ひなたぼっこ meimei1016さん
３びきのこぶた pooh941さん
Lotus Room Cafe ☆ tommy ☆さん
ひなたぼっこ えみまま310さん
朴念仁半兵衛之閑話 もろ9さん
aaa paintboxさん
老後の楽しい過ごし…
New!
英玲さん子育て＆自分育て奮… ぽっかりたかべえさん
あのねぇ。おとうさ… oyabakatosanさん
ひなたぼっこ meimei1016さん
３びきのこぶた pooh941さん
Lotus Room Cafe ☆ tommy ☆さん
ひなたぼっこ えみまま310さん
朴念仁半兵衛之閑話 もろ9さん
aaa paintboxさん
December 16, 2005
テーマ： ☆テンプレート☆(358)
カテゴリ： アフィリエイト挑戦記
海外からのお客さんの来日で忙しい一週間でしたが、ようやく今日でそれも終わり久しぶりに家で家族と夕食をとりました。
さて、今日は久しぶりにアフィリエイトネタをご披露します。超初心者向けの HTML 講座です。
楽天では、自分で HTML や CSS を変更できないのですが、日記の中にスタイルを埋め込むことは認められています。日記の内容にあった商品を加えるだけで、 ただ文章だけの日記よりちょっと華やいだ感じになる ので多用しています（残念ながら、滅多に成果には結びつきませんが…）。
さて、やり方ですが極めて簡単です。商品リンクの前と後ろに簡単な HTML コードを加えるだけです。以前にご紹介したテーブルタグを使った方法でも似たようなことはできますが、スタイルを指定する方が自由度が高く（慣れると）わかりやすいので便利だと思います（特に、画像を罫線で囲む場合などテーブルタグだけを使って実現すると結構複雑なコードになってしまいます）。
ぜひお試し下さい（設置例→）。
<div style="margin: 0px 10px 0px 0px; float: left;">▼商品リンクをここに挿入▲</div>
style= の後の「"」と「"」に囲まれた部分で <div style="…"> と </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: 商品画像の右にこの後に続くテキストを流し込む。罫線なし。
Example 2: 商品画像の左にこの後に続くテキストを流し込む。罫線なし。
Example 3: 商品画像の右にこの後に続くテキストを流し込む。太さ 1px の罫線で画像を囲む。罫線と画像の間の間隔は、一律 5px。
Example 4: 商品画像の右にこの後に続くテキストを流し込む。太さ 1px の破線で画像を囲む。罫線と画像の間の間隔は、一律 5px。
さて、今日は久しぶりにアフィリエイトネタをご披露します。超初心者向けの HTML 講座です。
楽天では、自分で HTML や CSS を変更できないのですが、日記の中にスタイルを埋め込むことは認められています。日記の内容にあった商品を加えるだけで、 ただ文章だけの日記よりちょっと華やいだ感じになる ので多用しています（残念ながら、滅多に成果には結びつきませんが…）。
ぜひお試し下さい（設置例→）。
商品画像にテキストを回り込ませるには？
基本的な、HTML の記述は極めてシンプルです。唯一気をつけていただきたいのは、楽天の日記の場合、改行があると自動的にが挿入されてしまいますので、HTML を記述する際には、改行しないようにして下さい（フリーページの場合は、自動改行するかしないかを選択できます）。<div style="margin: 0px 10px 0px 0px; float: left;">▼商品リンクをここに挿入▲</div>
style= の後の「"」と「"」に囲まれた部分で <div style="…"> と </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スライダー
お子様の大好きな３種類の転がし遊びが１つのおもちゃになっています。青・黄・赤の３種類の「ボール転がし」、リバーシブルキャラクターの「はしご落とし」、４本足のかわいいキャラクターの「まゆだま転がし」でお子様も夢中！リーズナブルな価格も嬉しいですね♪
お気に入りの記事を「いいね！」で応援しよう
[アフィリエイト挑戦記] カテゴリの最新記事
-
アフィリエイト用 『商品紹介ボックス』 … January 16, 2012 コメント(2)
-
Jimdoで作ったウェブサイトで簡単アフィリ… January 8, 2012
-
楽天ブログ：アフィリエート用のテンプレ… February 9, 2010
【毎日開催】
15記事にいいね！で1ポイント
© Rakuten Group, Inc.
