商品ディスプレイ（その２） | 楽天アフィリエイトのABC

商品ディスプレイ　（その２）

ステップA　商品のディスプレイ（その2）
その１で、商品をさがしました。その２では、その商品「ゴディバ・チョコレート」を、あなたのホームページ、ここでは「練習」というページに陳列していきましょう。実際は、これから説明するHTML言語（ホームページを表現するのに必要な言葉）を使って、商品の陳列をしますなお、商品の陳列には、大きく分けて、「商品画像の陳列」と「商品名の陳列」の２種類があります。ホームページに商品を陳列するというのは、具体的にどのようなことなのか説明します。 1.「商品画像の陳列」の場合・お客様が画像をクリックすると、その商品が紹介されているページへ飛ぶような仕組みです。・「商品画像」を陳列するということは、下記の３つの情報（HTML言語）を陳列するということです。「商品画像」＝商品画像＋商品が紹介されているページのURL＋あなたのホームページ経由という情報 2.「商品名の陳列」の場合・お客様が商品名をクリックすると、その商品が紹介されているページへ飛ぶような仕組みです。・「商品名」を陳列するということは、下記の３つの情報（HTML言語）を陳列するということです。「商品名」＝商品名＋商品が紹介されているページのURL＋あなたのホームページ経由という情報馴れないと判りにくいですが、商品「ゴディバ・チョコレート」を、あなたのホームページに陳列していきましょう。 1. 商品画像の陳列その１で、商品リンクをクリックした時のページを呼びます。このページの最初の、「画像リンク」の部分を見てみましょう。「お手軽リンク：コピーして、そのままご利用いただけます。」の下の部分に、何か意味不明の文字列がたくさんありますが、これが、HTML言語（ホームページを表現するのに必要な言葉）です。ここに、先ほど説明した、３つの情報が埋められています。次に、あなたのホームページの管理メニュー（左側）から、「ページ作成・編集」の所にある「フリーページ作成・編集」をクリックします。注釈ですが、これからホームページを充実させていき、何ページにも及ぶホームぺージに商品を陳列することになります。楽天広場のホームページは、トップ（1ページ目）とフリーページ（2ページ目～300ページ目）と呼び分けています。ここでは、フリーページに、「練習」という名前のページ作って、ここで商品の陳列をしていきます。「ページタイトル」のところに、「練習」と入れます。その後、一番下にある「ページを作成する」をクリックします。ここでは、フリーページの一覧が確認できます。先ほど作成した「練習」のページの、右側にある、赤色で囲った「編集」ボタンをクリックして、再び、「練習」のページに戻ります。「練習」のページの、中ほどにある赤色で囲ってある、「自動改行なし（＜BR＞タグで指定）」の○の部分をクリックして、こちらを選びます。次に、先ほど説明した、「ゴディバ・チョコレート」の商品リンクのページにある、「お手軽リンク：コピーして、そのままご利用いただけます。」の文字列（HTML言語）をコピーして、青色の枠の中にペースト（張りつけ）します。うまくペーストできたら、緑色の枠の中の「更新する」をクリックします。「更新が完了しました」のメッセージが出たら、これは、HTML言語が正しく、記述されたということです。同じページの一番下にある、赤色の枠で囲まれた、「登録したページを確認する」をクリックします。「練習」のページに、「ゴディバ・チョコレート」の商品画像が、うまく陳列されているのが確認できました。その商品画像を、クリックして見ると、当たり前ですが、その商品のページに飛びました。 2. 商品名の陳列商品画像の陳列と同じように行います。その１で、商品リンクをクリックした時のページを呼びます。このページの中段にある、「テキストリンク」の部分を見てみましょう。「お手軽リンク：コピーして、そのままご利用いただけます。」の下の部分に、同じように、HTML言語（ホームページを表現するのに必要な言葉）で、先ほど説明した３つの情報が埋められています。次に、あなたのホームページの管理メニュー（左側）から、「ページ作成・編集」の所にある「フリーページ作成・編集」をクリックして、先ほどの「練習」のページを呼びます。ページの中ほどにある赤色で囲ってある、「自動改行なし（＜BR＞タグで指定）」の○の部分をクリックして、こちらを選びます。次に、先ほど説明した、「ゴディバ・チョコレート」の商品リンクのページのテキストリンクにある、「お手軽リンク：コピーして、そのままご利用いただけます。」の文字列（HTML言語）をコピーして、青色の枠の中にペースト（張りつけ）します。（すでに商品画像対応のHTML言語に上書きするように。）うまくペーストできたら、緑色の枠の中の「更新する」をクリックします。「更新が完了しました」のメッセージが出たら、これは、HTML言語が正しく、記述されたということです。同じページの一番下にある、赤色の枠で囲まれた、「登録したページを確認する」をクリックして、「練習」のページに、商品名「2005ホワイトデーゴディバチョコレートG40」が、うまく陳列されているのが確認できました。 3. 商品画像と商品名の両方の陳列最後に、商品画像と商品名の両方を、陳列してみましょう。両方のHTML言語をコピー・ペーストします。先ほどと同じ手順で更新すると、「練習」のページに、商品画像と商品名の両方が、陳列されているのが判ります。以上

ステップA　商品のディスプレイ（その2）

その１で、商品をさがしました。その２では、その商品「ゴディバ・チョコレート」を、あなたのホームページ、ここでは「練習」というページに陳列していきましょう。

実際は、これから説明するHTML言語（ホームページを表現するのに必要な言葉）を使って、商品の陳列をします
なお、商品の陳列には、大きく分けて、「商品画像の陳列」と「商品名の陳列」の２種類があります。ホームページに商品を陳列するというのは、具体的にどのようなことなのか説明します。

1.「商品画像の陳列」の場合
・お客様が画像をクリックすると、その商品が紹介されているページへ飛ぶような仕組みです。
・「商品画像」を陳列するということは、下記の３つの情報（HTML言語）を陳列するということです。
「商品画像」＝商品画像＋商品が紹介されているページのURL＋あなたのホームページ経由という情報

2.「商品名の陳列」の場合
・お客様が商品名をクリックすると、その商品が紹介されているページへ飛ぶような仕組みです。
・「商品名」を陳列するということは、下記の３つの情報（HTML言語）を陳列するということです。
「商品名」＝商品名＋商品が紹介されているページのURL＋あなたのホームページ経由という情報

馴れないと判りにくいですが、商品「ゴディバ・チョコレート」を、あなたのホームページに陳列していきましょう。

1. 商品画像の陳列

その１で、商品リンクをクリックした時のページを呼びます。

商品画像_1

このページの最初の、「画像リンク」の部分を見てみましょう。
「お手軽リンク：コピーして、そのままご利用いただけます。」の下の部分に、何か意味不明の文字列がたくさんありますが、これが、HTML言語（ホームページを表現するのに必要な言葉）です。ここに、先ほど説明した、３つの情報が埋められています。

商品画像_3

次に、あなたのホームページの管理メニュー（左側）から、「ページ作成・編集」の所にある「フリーページ作成・編集」をクリックします。

注釈ですが、これからホームページを充実させていき、何ページにも及ぶホームぺージに商品を陳列することになります。楽天広場のホームページは、トップ（1ページ目）とフリーページ（2ページ目～300ページ目）と呼び分けています。
ここでは、フリーページに、「練習」という名前のページ作って、ここで商品の陳列をしていきます。
「ページタイトル」のところに、「練習」と入れます。その後、一番下にある「ページを作成する」をクリックします。

商品画像_4

ここでは、フリーページの一覧が確認できます。先ほど作成した「練習」のページの、右側にある、赤色で囲った「編集」ボタンをクリックして、再び、「練習」のページに戻ります。

商品画像_6

「練習」のページの、中ほどにある赤色で囲ってある、「自動改行なし（＜BR＞タグで指定）」の○の部分をクリックして、こちらを選びます。
次に、先ほど説明した、「ゴディバ・チョコレート」の商品リンクのページにある、「お手軽リンク：コピーして、そのままご利用いただけます。」の文字列（HTML言語）をコピーして、青色の枠の中にペースト（張りつけ）します。
うまくペーストできたら、緑色の枠の中の「更新する」をクリックします。

商品画像_7

「更新が完了しました」のメッセージが出たら、これは、HTML言語が正しく、記述されたということです。商品画像_8

同じページの一番下にある、赤色の枠で囲まれた、「登録したページを確認する」をクリックします。商品画像_9

「練習」のページに、「ゴディバ・チョコレート」の商品画像が、うまく陳列されているのが確認できました。商品画像_10

その商品画像を、クリックして見ると、当たり前ですが、その商品のページに飛びました。

商品画像_11

2. 商品名の陳列

商品画像の陳列と同じように行います。
その１で、商品リンクをクリックした時のページを呼びます。
このページの中段にある、「テキストリンク」の部分を見てみましょう。
「お手軽リンク：コピーして、そのままご利用いただけます。」の下の部分に、同じように、HTML言語（ホームページを表現するのに必要な言葉）で、先ほど説明した３つの情報が埋められています。

商品画像_12

次に、あなたのホームページの管理メニュー（左側）から、「ページ作成・編集」の所にある「フリーページ作成・編集」をクリックして、先ほどの「練習」のページを呼びます。
ページの中ほどにある赤色で囲ってある、「自動改行なし（＜BR＞タグで指定）」の○の部分をクリックして、こちらを選びます。
次に、先ほど説明した、「ゴディバ・チョコレート」の商品リンクのページのテキストリンクにある、「お手軽リンク：コピーして、そのままご利用いただけます。」の文字列（HTML言語）をコピーして、青色の枠の中にペースト（張りつけ）します。（すでに商品画像対応のHTML言語に上書きするように。）
うまくペーストできたら、緑色の枠の中の「更新する」をクリックします。

商品画像_13