マニュアルモードのカスタマイズ

デザイン設定の ｢ マニュアルモード ｣ では、HTML・CSSでの編集により、ウェブレコメンド上の商品名や画像の幅・高さなどを、自由にカスタマイズできます。

管理画面TOP > ショップ管理 > ウェブ表示管理
> 編集したい表示コードの [ えんぴつアイコン ] > デザイン設定の ｢ マニュアルモード ｣

designcustomize_manual01

テキストボックスと反映場所

マニュアルモードページのテキストボックスは、「表示エリア全体」と「商品情報」でわかれており、それぞれのHTML・CSSを編集できます。

  • 表示エリア全体
    ウェブレコメンド表示の全体を指します。
    ※ 下記イメージ図の ｢ 水色枠 ｣
  • 商品情報
    ウェブレコメンド表示の商品1点ずつを指します。
    設定されたデザインは、該当の表示コード内の全商品に対して反映されます。
    ※ 下記イメージ図の ｢ 緑色枠 ｣
designcustomize_sample

ランキングアイコン（王冠マーク）のデザイン編集

ランキングのアイコンを変更されたい場合は、下記の手順で操作します。

    1. 所持しているサーバ上に、ランキングアイコン用の画像をアップロードする
      ※ ファイル名は必ず、10位まで連番になるように設定しておきます
    2. 管理画面TOP > ショップ管理 > ウェブ表示管理 > 編集したい表示コードの [ えんぴつアイコン ]
      ページにて表示商品を 閲覧ランキング または 購入ランキング に切り替え、「表示内容」設定枠の下にある [ 設定保存 ] ボタンをクリックする
    3. 「デザイン設定」より「マニュアルモード」をクリックする
    4. 「商品情報」枠の [ ランキングテンプレート ] ボタンをクリックする
      ※ HTML・CSSの計2ヶ所

  2. HTML欄9行目<img>タグ内のURLをアップロードした画像のパスに書き換え、連番が入る部分へ【 $$$ranking_rank$$$ 】を入力する
    例）http://xxxxxxx.com/$$$ranking_rank$$$.png
    ※ $$$ranking_rank$$$ は順位ごとに 1 ～ 10 の数値に置換されます
  3. マニュアルモードページ下部の [ 設定保存 ] ボタンをクリックする

注意点

タグ・置換文字の使用

【表示エリア全体】
・<script>タグと<a>タグは使用できません。
・商品情報の置換文字（$$$product_html$$$）は1箇所のみ使用できます。

【商品情報】
・<script>タグは使用できません。
・<a>タグは商品のリンク用に必ず1箇所設定してください。

その他

・[ 設定保存 ] ボタンをクリックすると、以前に設定したソースへ上書きされます。
・管理画面TOP > ショップ管理 > ウェブ表示管理 > 編集したい表示コードの [ えんぴつアイコン ]
ページで表示内容を切り替えても、入力されたソースは変わりません。
※ 各テキストボックス上部の [ リセット ] をクリックすることで、入力されたソースを削除します
・マニュアルモードでの編集作業のご案内はサポート対象外です。
あらかじめご了承くださいませ。

プレビュー機能

表示コード編集ページの「コード○○のプレビュー」箇所では、表示状態が [ OFF ] の状態でも、ウェブレコメンド表示のイメージを確認できます。

管理画面TOP > ショップ管理 > ウェブ表示管理 > 編集したい表示コードの [ えんぴつアイコン ]
イメージを確認したいページのURLをフォームへ入力し、[ URL生成 ] をクリックします。
※ イメージを確認できるページは、該当の表示コードが設置されているページに限ります。

プレビュー

「プレビューページURL」欄に表示されたURLをクリックすると、プレビューページが表示されます。

プレビュー