どきどき初心者のためのアフィリエイトの仕組と導入方法

第５回アフィリエイトのリンクを張る

どきどき初心者のための
アフィリエイトの仕組と導入方法
～第５回：アフィリエイトのリンクを張る～

アフィリエイト 初心者限定 のアフィリエイトの仕組と導入方法の解説です。
皆さんも、どきどきアフィリエイト体験をして、楽しみながらお小遣い稼ぎをして見てください。

第５回は、「アフィリエイトのリンクを張る」です。

【楽天のトップにアフィリエイトの商品リンクを張る】
さあ、いよいよ、楽天広場の自分のホームページに、アフィリエイト商品のリンクを張る方法について、解説します。
しかし、その前に、リンクの仕組を説明しておく必要があります。

【リンクの仕組】
　リンクというのは、文字の部分や画像の部分をクリックすると、違うページが表示されますよね。その違うページにジャンプする指定の事をリンクを張ると言います。
あるページAがあり、ページAの画像Aに「ページBを表示」と書いておきます。
すると、画像Aをクリックすると、ページBにジャンプします。
この、「ページBを表示」と書く事をリンクを張るといいます。

具体的にHTMLでは、どのようになるのでしょうか？

例えば、テキスト（文字）にリンクを張る場合を考えます。

どきどきアフィリエイトトップ
↑こうなります。
この部分のHTMLソースは、以下の様になっています。
<A href="http://plaza.rakuten.co.jp/dokiafi">どきどきアフィリエイトトップ</A>

これは、「どきどきアフィリエイトトップ」をクリックすると、
http:/plaza.rakuten.co.jp/dokiafi
を表示するｔと書いてあります。
画像の場合には、こうなります。

ソースを見ると、
<A href="http://plaza.rakuten.co.jp/dokiafi"><IMG src="http://plaza.rakuten.co.jp/img/user/29/60/6432960/2.gif"></A>

こうなります。
判りやすいように、改行を入れてみると、
<A href="http://plaza.rakuten.co.jp/dokiafi">
　　<IMG src="http://plaza.rakuten.co.jp/img/user/29/60/6432960/2.gif">
</A>
こうなります。
先ほどのテキストの場合と同じ事で、テキストの変わりに、画像を示す、
　<IMG src="画像の場所">というタグが入っています。

リンク（Link） ：
ハイパーリンクとの言われており、Webページの最大の特徴の一つである機能です。
元々、この機能はハイパーテキストという概念の一部で、テッドネルソンという人が考えたといわれています。時は1970年代というから、すごいですね。

====今日はここまででーす。7/18　明日は、商品リンクの張り方です====
【楽天アフィリエイトのリンクをトップページに張る】
さあ、いよいよ、楽天アフィリエイトのリンクをトップページに貼り付ける方法です。
まず、これまでの通り、自分の管理画面にログインしてください。
そして、楽天ICHIBAのロゴの直ぐ下にタブが並んでいますね。
「広場トップ」「グリーティングカード」「占い」「アフィリエイト」
と並んでいるはずです。（黄色い部分が表示されているページを示してます）
現在、「広場トップ」が黄色になっていますよね。
「アフィリエイト」タブを右クリックして、「リンクを新しいウインドウで開く」を左クリックします。
すると、新しいウインドウあ開き、楽天ICHIBA　アフィリエイトの画面が表示されたはずです。
ここがアフィリエイトのページです。
では、楽天アフィリエイトのリンクを作ってみましょう。
まず、画面上から３cm位の右側にボタンがあると思います。
その「リンク作成」を押します。
（「リンク作成」「レポート」「ユーザ情報」「ヘルプ」と並んでいる部分の一番左のボタンです）
すると、表が現れ、左側に分類（カテゴリー）が縦に並んでいますね。
「ファッション」「グルメ（フード）」…という具合です。
例として、一番上のファッションのリンクを作ってみましょう。
ファッションの文字をクリックします。
すると、「楽天ICHIBAネットで買えば断然お得！バッグ・ジュエリー・ベビー用品」の バナー （画像）がありますね。

これです。この画像リンクを作りますを作ります。
バナーの右の「ファッションジャンル　リンク作成」のボタンを押します。
すると、画像リンク、テキストリンク、メールリンクが縦に並んでおり、それぞれのHTMLの記述があるはずです。
画像リンクは、下の様になっています。

改行をいれて判りやすく表示すると、以下のようになります。

<a　href=	Aタブの始まりと次に続く文字列へのリンクを表しています。
"http://pt.afl.rakuten.co.jp/c/002fe8d0.aa18debd/? url=http%3a%2f%2fwww.rakuten.co.jp %2fcategory%2ffashion%2f"	クリックした場合にジャンプするURLを示しています。この中にあなたの楽天IDなどが含まれていて、このリンクをクリックした人が商品を購入した場合に、成果として、あなたにポイントが付きます。
target="_blank">	クリックしてリンクを開く時に、新しいウインドウが開いて、その中に表示します。
<img src=	画像の元はどこかを次に続く文字列で指定します。
"http://image.rakuten.co.jp/com/inc/directory-afl/ share/img/icn/bnr_fashion.gif"	画像の場所を示しています。このURLをコピーして、IEのアドレスバーに貼り付けると、ファッションの画像が表示されます。
border=0	境界線の太さを示します。この場合は太さ０です。
alt="【楽天市場】ファッション・ブランド">	マウスをこの画像の上に置いたときに表示される名前を指定します。
</a>	A（アンカー）タブの終了マークです

次に、このHTMLタグをコピーして、トップページに貼り付けを行います。
まず、画像リンクの下の、お手軽リンクと書いてある部分の下の四角い領域にある、タグをコピーします。まず、タグを選択します。

【タグの選択方法】
　方法1：タグの部分で右クリックし、「全てを選択」を左クリック
　方法2：最初の部分で左ドラッグして、下にマウスを動かす
　方法３：トリプルクリック（3回連続クリック）
　方法４：キーボードのCtrlを押しながら「A」キーを押す

上のいずれかの方法で、タグの部分が黒地に白抜きになったと思います。
方法４を覚えると、素早く作業が出来るようになります。
＃Windowsは、一つの作業を行う場合でも複数の方法を用意してあります。
　レベルに合わせて、使用すると効率的に作業ができますので、研究しましょう。

そしてコピーします。コピーの方法も複数ありますが、前回に出てきているので、省略します。
（右クリックのコピーorCtrl-C）
コピーしたら、自分の管理画面に戻ります。
先ほど、アフィリエイト画面を開いた時に、新しいウインドウで開いたので、管理画面のウインドウは残っているはずです。一番下のタスクバーのインターネットエクスプローラのアイコンで選択すれば、簡単に管理画面に戻ります。（WidowsXPの場合には、IEアイコンをクリックして、「楽天広場」を選択）
管理画面で、左側の操作メニューの下、ホームページ作成の直下の「トップページ編集」をクリックします。
入力画面のタグが書いてある部分の下をクリックすると、そこに入力を即す縦棒（キャレット）が現れます。
そこで、貼り付けを行います。（Ctrl-ｖ or 右クリックで貼り付け）
そして、「＠このHTMLを登録」ボタンを押します。
すると、「＠このHTMLを登録」ボタンの下のほうにプレビュー（試し表示）が現れ、ファッションのバナーが現れましたね。
ページ右上の（ページを確認）をクリックして見ましょう。
あなたのトップページに、楽天アフィリエイトのファッション画像が現れましたね。
こんな感じです。
誰かがこの画像をクリックして、何かを購入したら、あなたの成果として、楽天スーパーポイントがGetできます！
========今日はここまで7/19========
【商品リンクを日記に貼り付ける】
　今日は、出張中なので軽めに…
商品リンクを日記に貼り付ける方法です。
まず、前述の方法で楽天アフィリエイトのページにログインします。
（管理画面の上方のアフィリエイトのタブを右クリックで「リンクを新しいウインドウで開く」）
左クリックだと、管理画面に戻らなければいけないので、新しいウインドウで開くと便利です。
楽天のロゴの下の赤いバックの部分で「すべての商品で」の右側に入力できるフィールドがあります。そこに、例として「夕張メロン」と入力します。
そして、その右の検索ボタンをクリック。
すると、夕張メロンの商品がずらーっと表示されます。
今回は、一番上の商品をリンクする方法です。
一番上の夕張メロンの右側の「商品リンク」ボタンをクリックします。

「セキュリティーうんぬん」のダイアログ（ウインドウのボタンつき）が出たらOKをクリック。

HTMLが表示されますので、画像リンクの下のHTMLの部分をクリックして右クリック→すべて選択。

黒く選択されている部分で右クリック→コピー。（昨日と同じ方法です。Ctrl-A後にCtrl-Cでも可）

そして、自分の管理画面のウインドウに戻って、管理メニューの日記に書き込むをクリックします。

日記タイトルの入力フィールドに、「夕張メロンの紹介」と入力します。

本文のフィールドに「こんな夕張メロンが食べたい！」と書き込み、その右に「貼り付け」（右クリック→貼り付け）ます。

すると、先ほどコピーした商品リンク用のHTMLが表示されます。

この状態で、一番下の「＠日記に書き込む」をクリックします。

これで、商品リンクが日記に追加されました。

管理画面の左上の「ページを確認する」をクリックすると、自分のページが表示されます。
見てみるとわかりますが、自分のトップページには、画像は表示されません。
でも、安心してください。
左側のメニューの「DIARY」または「日記」をクリックすると、画像が表示されます。
====今日はここまで。ちょっと、ノートPC＆＠FreeDではつらいです====

ジャンル別一覧