商品ディスプレイ （その３）
| ステップA 商品のディスプレイ （その3） |
|---|
| その３では、HTMLテンプレート（あらかじめ出来上がった、そのままお使いいただけるようにデザインされたHTML言語の文章）を使って、商品を、ホームページに陳列していきましょう。 楽天アフィリエイトでは、簡単なHTMLテンプレートが無料で用意されております。HTML言語が苦手な方は、まずは、この中から、お気に入りのテンプレートを利用して、あなたのページを充実させていくことになります。 ここでは、楽天アフィリエイトの簡単HTMLテンプレートを使っての、商品陳列の方法を説明します。 1. 楽天アフィリエイトの簡単HTMLテンプレート まずは、楽天アフィリエイトの簡単HTMLテンプレートが、どこに置いてあるか、説明します。 楽天広場TOPページの「アフィリエイト」タグをクリックして、アフィリエイトのTOPページをよびます。   このTOPページの左側の「はじめての方はこちら」の中に、「■HTMLテンプレート集」がありますので、ここをクリックします。  すると、「HTMLテンプレート集」のページになります。  このページに説明があるように、利用方法としては、 １．テンプレートを選ぶ → ２．ボタンを押すとHTMLソースが表示される → ３．HTMLソースをにコピーしてあなたのページに貼り付ける → ４．画像やテキストの部分に、あなたのアフィリエイト用のソースを入力する の手順となります。 HTMLテンプレート集は、下記の6種類しかありませんので、この中から、自分のホームページに適した、HTMLテンプレートを選ぶ必要があります。 1. 商品イメージをたくさん見せたい時のテンプレート 2. 画像とテキスト、メリハリをつけたい時のテンプレート 3.枠でくくって目立たせたい時のテンプレート 4.タイムリーな情報を載せたい時のテンプレート 5.ランキング形式で表示したい時のテンプレート 6.縦に商品を並べたい時のテンプレート    2. HTMLテンプレートを自分のホームページへコピー＆ペースト ここでは、「商品イメージをたくさん見せたい時のテンプレート」を、そのまま、自分のホームページの「練習」のフリーページへコピー＆ペーストします。 実際、あなたが、自分が選んだ商品を陳列する場合は、このHTMLテンプレートを、自分のホームページのトップページに張りつけましょう。 まず、「商品イメージをたくさん見せたい時は」の「このテンプレートを使用する」をクリックします。  すると、別ウィンドウが、現われてきます。枠の中の「＜table width=xxxxxxxxx 」が、HTMLソースといわれていますが、HTML言語です。ここを、最初の行から最後の行まで、うまくコピーしましょう。行数は、100行以上ありますので、注意してください。  次ぎに、自分の楽天広場のホームページに入って、フリーページの作成・編集のところで、以前使用した「練習」のページを使います。 もし、枠の中に、以前入力したHTML言語が記載されていたら、削除しましょう。  用意ができたら、先ほどコピーしたHTML言語（テンプレート）を、ここへペースト（張りつけ）ます。 うまく張りつけたら、「ページを作成する」または「更新する」のボタンをクリックします。  その後、先ほどの「練習」のページを呼ぶために、「編集」ボタンをクリックし、その後、ページ下の「登録したページを確認する」のボタンをクリックします。   何も入れていない（未加工）のテンプレートが、ホームページ上で、下記のように表示されるのが、おわかりになると思います。  3. HTMLテンプレートの中身は？ 下記にあるように、ホームページでは、 ★ ★★ここにタイトルを入れる★★★（赤の枠）が、1個所と、 下記の3種類を1セット（1個の商品：紫の点線の枠）として、8セット分（8個の商品）があることが判ります。 ★ ★★ここにアフィリエイト用の画像のソースを入れる★★★（緑の枠） ★ ★★ここにアフィリエイト用のテキストリンクのソースを入れる★★★（ピンクの枠） ★ ★★ここに紹介文を入れる★★★（青の枠）  つまり、このHTMLのテンプレートは、商品を、画像、テキスト（商品名）、紹介文の３つで陳列しています。 次ぎに、HTML言語（HTMLのソース）では、具体的にどのようになっているか、中身をちょっと見てみましょう。 下記のHTML言語を見て頂ければ判るように、最初の方に、 ★★★ここにタイトルを入れる★★★（赤の枠） があります。  下記のHTML言語を見て頂ければ判るように、その後に、 ★ ★★ここにアフィリエイト用の画像のソースを入れる★★★（緑の枠） ★ ★★ここにアフィリエイト用のテキストリンクのソースを入れる★★★（ピンクの枠） ★★★ここに紹介文を入れる★★★（青の枠） が、続いてあるのが判ります。  これら3つ（最も近い3つ）で、1つの商品を陳列することとなります。 このセットが、これ以降、HTML言語の中で、あと7回（7セット）登場します。 4. 商品「ゴディバ・チョコレート」を陳列してみよう 実際に、このHTML言語（ソース）の中に、商品「ゴディバ・チョコレート」の ・画像のソース、 ・テキストリンクのソース ・紹介文 を入れていきます。 今回、片岡物産セレクト・フーズ・マートの「ゴディバ・チョコレート・アソートメントG40」の商品 を陳列していきます。下記は、商品リンク作成用のページです。  画像のソースは、ここの枠から取ります。  テキストリンクのソースは、ここの枠から取ります。  紹介文は、自分で考えたものが一番良いのですが、それができない方は、片岡物産の商品のコメント文を流用しましょう。 具体的には、画像リンクの所にある、リンク先のURLをクリックすると、その商品のところに行きますので、ここのコメント文を流用します。   これで準備が完了です。 これから、実際に、商品のソースを入力していきましょう。 先ほどの「練習」のフリーページにて、 「★★★ここにタイトルを入れる★★★」を消去して、「おすすめ ゴディバ・チョコレート」（赤の枠）と入力します。  次ぎに、同じように、 「★★★ xxxxxxx ★★★」を消去して、 ・画像のソース（緑の枠） ・テキストリンクのソース（ピンクの枠） ・紹介文（青の枠） を、それぞれ入れていきます。   うまく入力ができたら、ホームページで確認してみましょう。   今回は、1つの商品しか入力していませんが、実際に、あなたのホームページでは、同じ方法にて、多数の商品を入力して、商品陳列することになります。 また、同じテンプレートを何回も使用するだけでなく、他のテンプレートも織り交ぜて使ったら、ホームページの構成に変化を持たせることができるでしょう。 以上 |
当サイト内の内容・画像の無断転載・転用については固くお断りします。
© Rakuten Group, Inc.
