ホームページビルダー/応用編
アフィリエイト/商品の挿入
- ビルダー上で商品を検索して、アフィリエイトのタグを簡単挿入する
- アフィリエイト機能の設定
- 紹介商品の検索
- 商品を挿入する
- ランダムに紹介商品を表示する
- アフィリエイト機能の部品から挿入したソースを削除する
商品を挿入する
紹介したい商品をクリックして、[挿入]ボタンをクリック。または、商品を[ページ編集]画面にドラッグして挿入します。[アフィリエイト商品の挿入]ウィザードが開始されるので、商品の表示方法等を設定して商品を挿入します。
※『ビルダーのブログ編集機能』を利用してブログへ投稿する際の[形式とリンク方法の指定]画面では挿入形式を[ページに商品情報を挿入]、リンクの方法は[<A>タグでアフィリエイトリンクをつける]を選択します。
アフィリエイト機能を利用して挿入してみました。
【ウィザードでの設定1】
- 商品画像を含める・・「大きい画像」
- 【挿入形式】・・「ページに商品情報を挿入」
- 【リンクの方法】・・「<A>タグでアフィリエイトリンクをつける」
ランダムに商品を表示する
アフィリエイトビューの[部品]タブをクリックして「縦並び」「横並び」のいずれかを選択して[挿入]ボタンをクリックします。[アフィリエイト部品の条件設定]ダイアログが開くので画面を確認しながら条件を設定していきます。([検索パラメーター]の[検索キーワード]は必須です。)
■sample ランダムに表示する
※商品名の長さで画面が上下に動き、ページが見にくくなってしまったため、ここではスタイルシートを利用して表示する高さを設定しています。
【参考】指定したサイズでテキストを表示
訪問者がキーワード入力で商品を探せるようにする
[アフィリエイト部品の条件]ダイアログの[閲覧ユーザーが可能な操作]項目で[キーワードの入力]をチェックします。
[商品画像の表示]で選択した大きさで検索結果が表示されます。
文字の大きさや色を変更する
スタイルシートで設定します。クラス名は .hpb-affeliate-part です。(IE7で確認)
(IE6では、 .hpb-affiliate-name のクラス名にスタイルを設定しないと反映されないようです。)
- スタイルシートとは
- 名前を付けてスタイルを設定し、指定した個所に定義したスタイルを適用する(class/ ID)
アフィリエイト機能の部品から挿入したソースを削除する(ランダムに商品を表示するのを取り消す)
アフィリエイト部品を挿入すると、「商品を表示するためのプログラム(JavaScript)」と「プログラムを読み込むためのイベント」と「商品紹介のための詳細な設定」が挿入されます。[ページ編集]画面で削除しただけではJavaScriptやイベントが残ってしまい、ページ読み込みの際にエラーがでてしまう可能性があります。
HTMLソースで直接挿入されたソースを削除するのが早いのですが、どの部分を削除してよいのか迷う場合は、下記の方法でも削除可能です。
- まず、「プログラムを読み込むためのイベント」を削除します。メニューバーより、[編集]→[ページの属性]→[ページ情報]タブにある[イベント]ボタンをクリックします。
- [イベント]欄のOnLoadをクリックして[削除]ボタンをクリックします。
- 続けて、「商品を表示するためのプログラム(JavaScript)」を削除します。開いている[イベントの編集]画面にて[スクリプト]ボタンをクリックします
- スクリプトを編集するための画面が表示されます。<HEAD>と<BODY>箇所に挿入されたスクリプトが確認できます。それらの行を一行ずつ右クリックして、[削除]を選択します。
- 次に「商品紹介のための詳細な設定」を削除します。[HTMLソース]を開き、<div class="hpb-affeliate-part">から</script></form>の後ろにある</div>までを選択して削除します。