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

第７回もっと楽しい楽天広場HP作成

どきどき初心者のための
アフィリエイトの仕組と導入方法
～第７回：もっと楽しい楽天広場ホームページ作成！～

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

第７回は、「もっと楽しい楽天広場ホームページ作成！」です。

【ホームページのデザインを変えてみよう！】
全体のデザインを変えてみましょう！

楽天広場の自分のページを表示し、いつものようにログインしてください。
（右上のログインをクリックです）
操作メニューのホームページ作成の「基本デザイン」をクリックします。右側に沢山のパターンが表示されました。
これは、ホームページの左側の日記の部分のデザインです。
これだけでは、よく判りませんので、沢山のパターンの上の「デザインテーマ一覧」をクリックします。
すると、新しいウインドウが開き、HPの一番上のロゴ（画像）の左側と日記のデザインが表示されます。
この中で、自分の好みに合うデザインの番号を覚えて、「デザインテーマ一覧」を閉じます。
そして、先ほどの画面のその番号の左側の小さい5mm位の○をクリックします。
クリックすると○中身が黒くなります。これが選ばれたという事を表します。
そして、そのページを下のほうにスクロールして、一番下の「◎設定を変更する」をクリックします。
これで、ホームページのデザインが変わりました。
画面の左上方の「ページを確認するをクリックして、確認してみましょう。
気に入らなければ、また、「基本デザイン」を選んで、再設定しましょう。

ホームページ ：
ホームページは色々な言い方があります。HP（エッチピー）、サイト、Web（ウエブ）、ホームページ、ページなどです。どれも、ほぼ、同じ意味で使われるので、あまり気にしないで下さい。

　　　 ========7/31今日はここまでか？========
【壁紙を変えてみよう！】
リクエストがあったので、今日は壁紙を変える方法を解説します。
壁紙には、画像ファイルを貼り付ける事ができます。
壁紙というのは、ホームページの背景の事です。
背景の画像を設定すると、ページ全体にその絵が繰り返し表示される事になります。
横方向にも繰り返し、縦方向にも繰り返すという事です。
サイズは問いませんが、あまり大きな画像を指定してしまうと、遅い回線の人（PHSとか、ISNDとかモデムとかで通信している人）は時間が掛かってしまいますので、ほどほどにしましょう。
遅い回線で、大きな画像があると、表示されるまでに時間がかかり、全て表示する前に、違うページに切替えてしまわれます。
まず、背景として使う画像を用意します。何でも良いのですが、例としてホームページビルダー８のサンプルから持ってきます。
●画像の用意
・ホームページビルダーを起動します
・画面の左側に「ナビメニュー」「素材集」があるので、素材集をクリック
・画像の「アニメーション」を選びます。
・すると、地球がくるくる回っている画像がありますので、これを例とします。
（画像はなんでも良いので、自分で適当に選んでください）
・地球の回っている画像（下に書いてある01.gifがファイル名)を右クリックし、メニューのコピーをクリック（これで、絵が記憶されました）
・画像を保存するフォルダを開きます。（どこでも良いです。）
　（例：デスクトップのマイドキュメントをダブルクリックして、「マイピクチャ」をダブルクリック）
・マイピクチャ（または自分の画像フォルダ）が開いた状態で、右クリックの「貼り付け」をクリックします。（または、Ctrlキーを押しながらvキーを押す）
・すると、01.gifまたは、01というファイルが出てきます。
　（この表示は、Windowsの表示設定により様々です。ただ、ファイル名の拡張子 (gifとかjpgとかhtmとか.(ドット)より後ろの部分は表示しておいた方が理解しやすいです）
●画像の画像倉庫への登録
・楽天広場の自分の管理画面にログインします
・左の操作メニューのホームページ作成の「画像の倉庫」をクリックします。
・■画像を登録するの「登録する画像を選択」の入力部分の右の参照をクリック
・ファイルの場所からマイドキュメントを選びます。
・表示されたアイコンの中から「マイピクチャ」を探し出し、ダブルクリックします
・地球の絵（01.gif）をクリックし、開くをクリック（絵をダブルクリックでも良い）
　（ここは、自分が背景にしたい画像を選んでくださいね）
・下の、「◎選択された画像を登録」をクリックします

●画像を壁紙（背景）として登録する
・左の操作メニューのホームページ作成の基本デザインをクリックします
・下にスクロールして、「背景画像」の下の入力部分をクリックすると、登録されている画像がメニューとして出てきますので、選択（クリック）します。
・一番下の「◎設定を変更する」をクリックします。

これで、背景が完成しました。
こんな感じになります。なんだか、うるさくて最低ですが…
　　　 ========8/1今日はここまでか？========
　　　 ========ここから楽天広場新機能対応========
【テンプレートを使ったホームページ作成！】
　今日からテンプレートを使ったホームページ作成の方法を解説します。
まず、楽天広場のあなたの管理画面にログインします。
－－ログイン－－
・あなたのページの右上のログインをクリック
または、
・楽天広場のページの右側からログインです
－－－－
そして、管理画面の左のメニューの「ページ作成・管理」の「トップ自由欄編集」をクリックします。
すると、上の方に、「お気に入りの商品を紹介しよう！」の紹介があり、その右側に「HTMLテンプレート集を見る」という絵があります。
その絵をクリックして下さい。
すると、新しいウインドウが開き、HTMLテンプレート集が出てきましたね。

テンプレート ：
ホームページを作る時に、元にするレイアウトが入っています。そのテンプレートの必要な部分だけ変えれば、ホームページが作れるようになっています。
マイクロソフトオフィスなどにも、よく、挨拶状のテンプレートなどがありますよね。
それの楽天広場でのアフィリエイト紹介ページ版です。

今回の例では、右の一番下のテンプレートを使って解説します。
左に交互に３つの商品紹介、右に２つの紹介がレイアウトされているやつです。
「このテンプレートを使用する」をクリックします。
すると、また新しいウインドウが開き、HTMLが表示されているはずです。
「以下のHTMLソースをコピーして使用してください」
と書いてあるウインドウです。
<table width=から始まってますね。
そのHTMLの羅列の部分で、右クリックして「全て選択」を左クリック。（または、Ctrlを押しながらAを押す）
選択された状態で、右クリックして「コピー」を左クリック（またはCtrlを押しながらcを押す）
これで、目には見えませんが、パソコンのどこか（クリップボードと呼ばれています）にこの文字の羅列（文字列）が記憶されました。
次に、これをホームページビルダーに持ってゆきます。
ホームページビルダーを起動してください。
（スタート→プログラム→IBMホームページビルダー→ホームページビルダーです）
編集スタイルとして「スタンダード」を選んでOKをクリックします。
そして、ファイルメニューから「標準モードで新規作成」をクリックします。
無地のページが現れましたね。
そして、無地のページの上のタブで「HTMLソース」をクリックします。
（ページ編集、HTMLソース、ページ/ソース、プレビューとある所）
短いHTMLのソースが表示されたと思います。
この<BODY>と</BODY>の間をクリックして、縦棒がちかちかした事を確認し、「編集」メニューの「貼り付け」をクリック。（または、Ctrl-vを押す）
そして、「ページ編集」タブをクリックすると、レイアウトされた編集画面になると思います。
ここで、ページを保存しておきます。
「ファイル」メニュー「上書き保存」をクリック。（または、Ctrl-s)
ファイル保存のダイアログが出ますので、好きな場所に保存してください。
仮に、「マイドキュメント」の「myhp」に「page.htm」として保存します。
・左上の「保存する場所」の右のフォルダが見えている所をクリック
・マイドキュメントをクリック
・「myhp」を探し出し、ダブルクリック
　（または、左から2番目のフォルダの右上が光ってるアイコンをクリックして、
　　　新しいフォルダを作り、そのフォルダの名前をmyhpにする）
・ファイル名の部分に、pageと入力して、その右の「保存」をクリック
　→pageと入力しただけで、ファイルとしてはpage.htmという名前になります。

====今日はここまで8/8====
【テンプレートに商品リンクを挿入！】
では、ページを作成してみましょう。
今回は、この時期の強い日差しに対抗する「日焼け止め」をネタにしてみます。
楽天広場の自分の管理画面にログインします。
上の方のタブのアフィリエイトをクリックします。
上の方の楽天ロゴの右のアフィリエイトという赤い文字の下の「全ての商品で」
の右の空白に「日焼け止めクリーム」と入力し、その右の検索ボタンをクリックします。
5秒程度まつと、商品のリストが表示されましたね。
一番上の商品の右の商品リンクをクリックします。
すると、商品リンクが現れます。
まず、画像リンクの部分の、四角い領域にあるタブ（<a href=で始まる部分）の中をクリックし、CTRLキーを押しながら「a」キーを押すと、全てが選択されて黒に白抜きになります。（右クリックの全て選択でも可）
その状態で、CTRLキーを押しながら「c」キーを押すと、パソコンに記憶されます。（コピーされる）（右クリックのコピーでも可）
そして、ホームページビルダーを起動して、昨日のpage.htmを開きます。
（スタート→プログラム→IBMホームページビルダー→ホームページビルダーで起動です。）
ファイルメニューの下の方に、pageという項目があるので、選択します。
（この部分には、最近開いたファイルが表示されているので、最近開いていない場合には、ファイルメニューの開くで指定する必要があります）
そして、左上の「★★★ ここに1枠目のアフィリエイト用の画像のソースを入れる ★★★」と書いてある部分をクリックします。
そして、上のタブで「HTMLソース」をクリックします。
すると、HTMLのソースが現れます。
ソースの中の、
<td width="85" valign="top">★★★ ここに1枠目のアフィリエイト用の画像のソースを入れる ★★★</td>
の部分の最初の★の左でマウスの左ボタンを押して、押したまま、一番右の★までマウスを動かし、黒く選択されたら、マウスボタンを放します。（ドラッグするといいます）
★・・・・★が黒地に白文字の選択された状態のまま、貼り付けを行います。
（CTRLを押しながら「v」キーを押す、または、右クリックの貼り付け）
すると、以下の状態になるはずです。
-----
<td width="85" valign="top"><a href="http://pt.afl.rakuten.co.jp/c/0038a27c.048b0cd5/?url=http%3a%2f%2fwww.rakuten.co.jp%2firs%2f487471%2f540346%2f544054%2f%23515627" target="_blank"><img src="http://image.rakuten.co.jp/wshop/data/ws-mall-img/irs/img64/img1043867551.jpeg" border=0 alt="★試着のオススメ　ワンピース競泳水着　speedo　スピード"></a></td>

1行が長くなりますので、ホームページビルダーで勝手に右の方にスクロールしてしまいますが、気にする必要はありません。
この状態で、タブのプレビューをクリックすると、商品が表示されているはずです。
ページ編集タブをクリックして、編集の画面に戻ると、商品のリンクの場所が変に大きくなっていますが、
気にする必要はありません。
（これは、画像が自分のパソコンではなく、インターネット上の楽天のどこかにあるためらしいです。
　ホームページビルダーが編集画面でインターネット上のファイルを参照しないので、大きさがわからないからですかね。）
下のような感じになっていると思います。
ここで、今までの分を保存しましょう。
ファイルメニューの「上書き保存」または、CTRLを押しながら「ｓ」キーを押す）

■■■

ここにタイトルを入れる

■■■

ココにタイトルを入れる

★★★ ここに1枠目のアフィリエイト用のテキストリンクのソースを入れる ★★★
★★★ ここに1枠目のアフィリエイト用の紹介文を入れる ★★★

ココにタイトルを入れる

★★★ ここに2枠目のアフィリエイト用のテキストリンクのソースを入れる
★★★ ここに2枠目のアフィリエイト用の紹介文を入れる ★★★

★★★ ここに2枠目のアフィリエイト用の画像のソースを入れる ★★★

ココにタイトルを入れる

★★★ ここに3枠目のアフィリエイト用の画像のソースを入れる ★★★

★★★ ここに3枠目のアフィリエイト用のテキストリンクのソースを入れる ★★★
★★★ ここに3枠目のアフィリエイト用の紹介文を入れる ★★★

ココにタイトルを入れる

★★★ ここに4枠目のアフィリエイト用の画像のソースを入れる ★★★
★★★ ここに4枠目のアフィリエイト用のテキストリンクのソースを入れる ★★★ ★★★ ここに4枠目のアフィリエイト用の紹介文を入れる ★★★

★★★ ここに5枠目のアフィリエイト用の画像のソースを入れる ★★★
★★★ ここに5枠目のアフィリエイト用のテキストリンクのソースを入れる ★★★ ★★★ ここに5枠目のアフィリエイト用の紹介文を入れる ★★★

====今日は、ここまで。8/9====
テンプレート集のページを紹介するページを追加しました。
　　　同じ要領で、商品リンクとタイトルを入力します。
「ここにタイトルを入れる」という部分を、「北海道のクレープ・チーズケーキ特集！！！」にして、チーズケーキの商品リンクを入力すると、下のようなページが出来上がってしまいますー。

■■■

北海道のクレープ・チーズケーキ特集！！！

■■■