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

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

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

~第7回:もっと楽しい楽天広場ホームページ作成!~


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


直線上に配置
第7回は、「もっと楽しい楽天広場ホームページ作成!」です。

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


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

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

これで、背景が完成しました。
こんな感じになります。なんだか、うるさくて最低ですが…
    ========8/1今日はここまでか?========
    ========ここから楽天広場新機能対応========
【テンプレートを使ったホームページ作成!】
 今日からテンプレートを使ったホームページ作成の方法を解説します。
まず、楽天広場のあなたの管理画面にログインします。
--ログイン--
・あなたのページの右上のログインをクリック
または、
楽天広場のページの右側からログインです
----
そして、管理画面の左のメニューの「ページ作成・管理」の「トップ自由欄編集」をクリックします。
すると、上の方に、「お気に入りの商品を紹介しよう!」の紹介があり、その右側に「HTMLテンプレート集を見る」という絵があります。
その絵をクリックして下さい。
すると、新しいウインドウが開き、HTMLテンプレート集が出てきましたね。
テンプレート
ホームページを作る時に、元にするレイアウトが入っています。そのテンプレートの必要な部分だけ変えれば、ホームページが作れるようになっています。
マイクロソフトオフィスなどにも、よく、挨拶状のテンプレートなどがありますよね。
それの楽天広場でのアフィリエイト紹介ページ版です。

今回の例では、右の一番下のテンプレートを使って解説します。
左に交互に3つの商品紹介、右に2つの紹介がレイアウトされているやつです。
「このテンプレートを使用する」をクリックします。
すると、また新しいウインドウが開き、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を押しながら「s」キーを押す)

■■■ ここにタイトルを入れる ■■■
ココにタイトルを入れる

★試着のオススメ ワンピース 競泳水着 speedo スピード ★★★ ここに1枠目のアフィリエイト用のテキストリンクのソースを入れる ★★★
★★★ ここに1枠目のアフィリエイト用の紹介文を入れる ★★★

ココにタイトルを入れる

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

ココにタイトルを入れる

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

 
ココにタイトルを入れる

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

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

ミルクレープ2個セット ミルクレープ2個セット
一枚一枚丁寧に焼き上げたクレープチョコ味!

ココにタイトルを入れる

カフェミルクレープ(7号)
クレープで織り込んだカフェ味とコーヒーを一緒に!
カフェミルクレープ(7号)

ココにタイトルを入れる

チーズケーキミルクレープとミルクレープのセット(8個) チーズケーキミルクレープとミルクレープのセット(8個)
チーズケーキも入っている嬉しいセットで色んな味を楽しめます。

 
スタンダードクレープ

クレープ(生チョコ)
クレープ(生チョコ)
スタンダードな生チョコクレープがまたたまりません。
クレープ(キャラメルソース)
クレープ(キャラメルソース)
香ばしいキャラメルソースです。私は、キャラメル味が大好きなんですー!






© Rakuten Group, Inc.