【カテゴリ：パソコン Tips等】
以前、以下のような記事を書いたことがありますが、その内容としては『ネットショップ』のページを作ったというようなものでした。2012年04月05日 気分爽快！！『ネットショップ』開店しました。
↓上の記事の中で書いた『ネットショップ』の例．
気分爽快！！パソコン・グッズ
http://astore.amazon.co.jp/kingpcfx-01-22
今回はその種明かしと言うほどのものでもありませんが、この『ネットショップ』の作り方について書こうと思います。
この『ネットショップ』のページについては知っている人が見れば一目瞭然だと思いますが、このページは『Amazon』の『インスタントストア(TM)』というのを利用して作成しています。
知らない人が見ると本格的なオンラインストアに見えるかもしれませんが、作成するにあたってプログラミングの知識や技術はまったく必要ありません。
しかも１度作って要領が理解できてしまえば、２回目からは、わずか１分とかからずに追加作成することも可能です。
以降、作り方です。
．．．
スポンサーリンク
『Amazon』の『アソシエイト・プログラム』とは、要するに『アフィリエイト』のことです。
これには、ブログやホームページなどのサイトを持っていれば簡単に参加できます。
サイトを持つというと利用料が気になるところですが、例えば自分は『Seesaa ブログ』を利用しており、この『Seesaa ブログ』だと利用料は無料です。
また、ホームページにしても探せば無料で利用できるサービスがたくさん見つかります。
参考までに、以下の記事の中では『@pages』という無料のレンタルサーバを借りる方法について書いています。
2012年03月26日 『WordPress』を使ってみた（その2)
サイトが用意できたら、以下の『Amazon』のページから『アソシエイト・プログラム』に申し込むことができます。
Amazon アソシエイト (アフィリエイト): アフィリエイトで副収入！:
https://affiliate.amazon.co.jp/
もちろん『Amazon アソシエイト・プログラム』への参加は無料です。
．．．
以降、『Amazon』の『インスタントストア』の作り方について具体的な例を書きます。
『Amazon アソシエイト・プログラム』に『サインイン』（＝ログイン）すると、以下のようなメニューが表示されます。
↓メニューの『インスタントストア』タブをクリックします。
すると、以下のように表示されます。（以下は自分の場合の例であり、既にいくつか作成済みの状態です。）
例として、下段に表示されている『インスタントストアのテンプレート』の中から、『LOHAS store』の『このテンプレートを使う』をクリックします。
以下のように『インスタントストアを追加する』と表示されたら、『トラッキングID』を選択します。
『トラッキングID』とは『アソシエイトID』の配下に作成できる識別IDのことであり、この『トラッキングID』ごとにページをいくつも作ることができます。
この『トラッキングID』は、早い話が以下のように URL 上に含まれる内容と同じです。
http://astore.amazon.co.jp/kingpcfx-05-22
上の URL の例において、『kingpcfx-05-22』の部分が『トラッキングID』と同じ。
↓『トラッキングID』を選択したら、『次に進む』をクリックします。
以下のような『インスタントストアのページを作成する』という画面が表示されます。
↓とりあえず『次に進む』をクリックします。
以下のような『カラーとデザインを編集する』という画面が表示されます。
↓とりあえず『次に進む』をクリックします。
以下のような『サイドバー』という画面が表示されます。
↓とりあえず『この設定でHTMLを取得する』をクリックします。
以下のような『あなたのストアが作成されました』という画面が表示されます。
↓試しに『プレビューする』をクリックします。
以下のような画面が表示されました。
．．．
これだけでもう作成できてしまった訳ですが、もの足りないので、少し編集（＝カスタマイズ）してみます。
編集の例として『パソコンケース』カテゴリーを追加し、他のカテゴリーはすべて削除してみます。
メニューの『インスタントストア』タブをクリックして、以下の『インスタントストアの管理』画面を表示します。
↓『編集』をクリックします。
以下のような『インスタントストアのページを作成する』という画面が表示されます。
↓『カテゴリーページを追加』をクリックします。
↓一番下に『新しいカテゴリー(XX)』が追加されました。
追加したカテゴリーのタイトルを変更します。
↓『カテゴリーのタイトル』に『パソコンケース』と入力し、『Amazon.co.jpのカテゴリーから商品を追加する』を選択します。
↓『Amazonのカテゴリーを選択する』をクリックします。
すると、以下のような画面が表示されます。
↓『パソコン・周辺機器』→『PCパーツ』→『PCケース』の順にクリックして選択します。
↓『保存』をクリックします。
以下のように表示されました。（一番下に『パソコンケース』カテゴリーが表示されています。）
カテゴリーは、以下のようにマウスでドラッグして移動することができます。
↓ドラッグして移動中。
↓『パソコンケース』カテゴリーを先頭に移動しました。
↓『おすすめ商品ページ』を選択して『削除』をクリックしてみます。
↓『おすすめ商品ページ』が削除されました。
↓同様に操作し、『パソコンケース』以外のカテゴリーをすべて削除しました。
↓『次に進む』をクリックします。
以下のような『カラーとデザインを編集する』という画面が表示されます。
ここでは、背景色やテキストの色などが変更できます。
とりあえず色などはデフォルトのままとし、例として、ストア名を”『パソコンケース』ストア”に変更します。
↓ストア名の変更前
↓ストア名の変更後
↓『次に進む』をクリックします。
以下のような『サイドバー』という画面が表示されます。
ここでは、サイドバーを左右のどちらに表示するかと、サイドバーに表示する項目を指定できます。
サイドバーはデフォルトの右側のままとし、表示項目の変更例として『おすすめ商品とカテゴリページ』という欄に表示されている『ほしいものリスト』のチェックを外してみます。
↓チェックを外しました。
↓『この設定でHTMLを取得する』をクリックします。
以下のような『あなたのストアが作成されました』という画面が表示されます。
↓『プレビューする』をクリックします
作成した『インスタントストア』が以下のように表示されました。
ちなみに、今回作成したページのアドレス（＝インスタントストアへのリンク）は、以下となっています。
『パソコンケース』ストア - パソコンケース:
http://astore.amazon.co.jp/kingpcfx-05-22
．．．
今回作成したインスタントストアへのリンクは『単独のページとして利用する場合』として作成していますが、『iframe形式』や『フレーミング形式』を指定すると、Webサイトに組み込むような形のリンクを作成できます。
↓iframe形式でインスタントストアをWebサイトに組み込む場合
↓フレーミング形式でインスタントストアをWebサイトに組み込む場合
『Webサイトに組み込む場合』はホームページのコンテンツの一部として表示することができるので、その場合、アイデア次第ではページをより本物のショッピングサイトっぽく見せられると思います。
おわり。
スポンサーリンク
【カテゴリ：パソコン Tips等】の最新記事
- 『Windows XP』上のブラウザで『メイリオ』フォントを表示できるようにする為の手順
- 『Virtual Store』の機能により『MetaTrader 4』のデータが実際に保存される場所について
- 『Windows 7』と『Windows 8』のデュアルブートで規定のオペレーティングシステムを切り替える手順
- 『Amazon インスタントストア』をブログの記事の中に表示させる方法について
- 『短縮URL』を展開してジャンプ先を調べる方法
- 『Windows 7』で『ISO』形式のディスクイメージファイルをDVD-Rに書き込んでみた
- 『Windows 7』で画面をキャプチャする際にマウスカーソルを含める方法
- 『Firefox』に『Grab and Drag 2.8.2』アドオンをインストールした
- 『Firefox』で『URLプレビュー』をウィンドウ幅全体に広げて表示する方法
- 『Ubuntu 11.10』と『Windows 7』のデュアルブートで起動メニューのデフォルト起動OSを『Windows 7』に変更
- 『Firefox 8.0』でウェブページ全体をキャプチャする方法について
- 『Firefox』でウェブページ全体を一発でキャプチャする方法について
- 『刀３』付属の取り付け金具からプッシュピンを取り外す方法について
- 『光る！KAMAKAZEの風 92』のファンコンの『つまみ』のはずし方について
- テキストを多く含むキャプチャ画像は『PNG』形式で保存することにした
- 『Windows 7』で『Thunderbird』を使い、他のOS（＝例 Windows 2000）上のメールを共有して使用する方法について
フリー素材*ヒバナ * *
市川明彦 (03/26)
早速、アマゾンのインスタントストアを作ってブログに貼り付けましたが、画像がブチ切れています。２カラム、３カラムと試しましたが同じ結果です。⇒http://kurodai-turi.seesaa.net/
キチンとインスタントストアをSeeSaaブログに反映させるにはどうしたら良いのかをご教授願えませんでしょうか？
よろしくお願いいたします。
この横幅のサイズを広げてやれば、インスタントストア全体が表示できるようになると思います。
スタイルシートの内容を変更するには、以下のようにして編集画面を表示します。
・ブログの管理画面から『デザイン』⇒『デザイン設定』と進み、（タイトルの欄に表示されている）該当デザインのリンクをクリック。
具体的な変更箇所ですが、スタイルシートにおいて以下の2箇所を変更すれば良さそうな気がします。
（全体の横幅を定義している箇所）
#container{
width:960px; ⇒ width:1460px; のように変更
（記事のカラムの横幅を定義している箇所）
#content{
width:400px; ⇒ width:900px; のように変更
上記の値は例ですので、実際には調整が必要になるかと思います。
インスタントストアへのリンクコードを以下のように変更することで、限られた狭いスペースの中でもスクロールバー付きで表示させることができます。
変更前
width="90%" height="4000" frameborder="0" scrolling="no"
変更後の例
width="100%" height="1000" frameborder="0" scrolling="auto"
ポイントは、scrolling の値を"auto"にすることです。