iQ shop 管理マニュアル【携帯表示編】

iQ shop
管理マニュアル【携帯表示編】
1/23
iQspec Inc. Copyright 2014 · All Rights Reserved.
～～目次～～
1.サイドボックスの設定(1)…………………………………………………………4
2.サイドボックスの設定(2)…………………………………………………………7
3.サイドボックスの設定(3)…………………………………………………………9
4.サイドボックスの表示設定………………………………………………………11
5.基本デザインの設定………………………………………………………………13
6.携帯端末からのトップ画像例……………………………………………………15
7.携帯用画像の設定…………………………………………………………………17
8.携帯商品タイプの設定……………………………………………………………19
9.携帯端末からのトップ画像例……………………………………………………21
10.その他の設定……………………………………………………………………22
11.詳細検索&ログイン画面…………………………………………………………23
2/23
iQspec Inc. Copyright 2014 · All Rights Reserved.
■ 管理画面のアドレスからアクセスすると、まず「ログイン」
画面で「管理ユーザーID」と「管理者パスワード」を要求
されます。
■ ID とパスワードを入力して「Login」ボタンをクリックします。
3/23
iQspec Inc. Copyright 2014 · All Rights Reserved.
１．サイドボックスの設定(１)
◆ レイアウトの基本
■ 表示させたいボックスをブロックＬかブロ
ックＲへ
表示順序を指定して登録します。
※登録していないボックスは表示されません
※１つのボックスを２つのブロックに登録は出
来ません
4/23
iQspec Inc. Copyright 2014 · All Rights Reserved.
《表示可能な必要なサイドボックス》
5/23
iQspec Inc. Copyright 2014 · All Rights Reserved.
《注意の必要なサイドボックス》
《携帯では利用できないサイドボックス》
6/23
iQspec Inc. Copyright 2014 · All Rights Reserved.
２．サイドボックスの設定(２)
◆両方のブロックが表示されるページ
7/23
iQspec Inc. Copyright 2014 · All Rights Reserved.
ページレイアウト
8/23
iQspec Inc. Copyright 2014 · All Rights Reserved.
３．サイドボックスの設定(３)
◆ブロック R だけが表示されるページ
9/23
iQspec Inc. Copyright 2014 · All Rights Reserved.
【ページレイアウト】
※ ブロック R は非表示
※記述されていないその他のページについては、メインコンテンツと
ヘッダ・フッタのみの表示となります。
10/23
iQspec Inc. Copyright 2014 · All Rights Reserved.
４．サイドボックスの表示設定
① 通常モードのメインメニューにある「追加設定・ツール」のドロップダウン
より「サイドボックスの表示設定」を選択します。
②「言語定義」ドロップダウンから「mobile」（携帯）を選択してください。
携帯表示専用のサイドボックス設定メニューが表示されます。
※ パスの部分が赤く表示されている部分は携帯専用のサイドボックスになり
ます。
赤く表示されていないサイドボックスは、ＰＣ用と共通です。
バナー等は、ＰＣに表示されているものと同じものが表示されます。
11/23
iQspec Inc. Copyright 2014 · All Rights Reserved.
③
表示サイド(左/右)ステータス でそのサイドボックスを表示するかどうか
を設定します。
表示サイド左または右 で、 ブロックＬ（左） に表示させるか、ブロッ
クＲ（右）に表示させるかを設定します。
④ 設定が完了したら、
「更新」ボタンをクリックして保存します。
※ 各ボックスファイル名と、サイドボックスの対応は、「サイドボックスの設
定 - １」の対応表をご覧ください。
シングルボックスステータスは利用しません。
12/23
iQspec Inc. Copyright 2014 · All Rights Reserved.
５．基本デザインの設定
① 通常モードのメインメニューにある「携帯」のドロップダウンより「携帯- デ
ザイン」を選択します。
色の指定は、セーフカラー216 色 RGB の 16 進数で指定してください。
※ キャリアにより解釈が違う場合がありますので、実機で表示の確認をしてく
ださい。
13/23
iQspec Inc. Copyright 2014 · All Rights Reserved.
◆表の設定項目名 ◆解説
1
ページ全体の背景色
全ページ共通の背景色
2
ページ全体の基本文字色
全ページ共通の基本文字色
3
基本リンク色
リンクの設定されたテキストの文字色（共通）
4
基本アクティブリンク色
選択中のリンクテキストの文字色（共通 キャリア依存大
5
基本既リンク色
以前に表示させたリンクの文字色（共通）
6
ページの基本フォントサイズ
全ページ共通の基本文字サイズを指定します
機種による依存あり
7
サイドボックスタイトルのマーク
サイドボックスのタイトルにつけるリストマーク
絵文字パレットからの絵文字指定も可能
8
サイドボックス（上）タイトルの基本文字色
上（左）に表示設定されたサイドボックスのタイトル文字色
9
サイドボックス（上）タイトルの基本背景色
上（左）に表示設定されたサイドボックスのタイトル背景色
10
サイドボックス（下）タイトルの基本文字色
下（右）に表示設定されたサイドボックスのタイトル文字色
11
サイドボックス（下）タイトルの背景色
下（右）に表示設定されたサイドボックスのタイトル背景色
12
ヘッダ タイトルの囲み====== の色
ページタイトル上下の飾り部分の色指定
13
フッタ等に表示されている表示項目のマーク
共通メニューにつけるリストマーク
絵文字パレットからの絵文字指定も可能
14
上記マークの色
上記リストマークの色（絵文字の場合は指定不可）
15
マーキー背景色
ヘッダに表示されるマーキーの背景色
16
マーキー文字色
上記マーキーの文字色
17
マーキーの文章(空欄で非表示)
上記マーキーの表示内容（全ページに対して表示されます
18
商品詳細ページでのナビゲーションバーの位
「前へ 戻る 次へ」 ナビゲーションの表示と位置設定
置
19
この商品をお買い求めに～を表示
商品詳細ページでの「クロスセル」の表示設定
20
トップページショップバナー
トップページに表示させるバナーの指定
バナー画像のパスとファイル名を指定します
21
バナーの alt 文字(代替テキスト)
上記バナーの代替えテキストを指定します
22
バナーのリンク
上記バナーのリンク先を指定できます
23
hr タグのスタイル
区切り線の色とサイズをスタイルで指定します
例） style="border-color:red; width:75%"
24
カテゴリヘッダマーク
カテゴリ名の前に表示するリストマークを指定します
絵文字パレットからの絵文字指定も可能
14/23
iQspec Inc. Copyright 2014 · All Rights Reserved.
６．携帯端末からのトップ画像例
21 トップページショップバナー
22 バナーの alt 文字(代替テキスト)
23 バナーのリンク
12 ヘッダ タイトルの囲み====== の色
10 サイドボックス（下）タイトルの
基本文字色
11 サイドボックス（下）タイトルの
基本背景色
24 カテゴリヘッダマーク
8 サイドボックス（上）タイトルの基
本文字色
9 サイドボックス（上）タイトルの基
本背景色
13 フッタ等に表示されている表示項
目のマーク
14 上記マークの色
15/23
iQspec Inc. Copyright 2014 · All Rights Reserved.
◆携帯端末からの商品詳細画面例
18 商品詳細ページでのナビゲーショ
ンバーの位置
10 ドボックス（下）タイトルの基本
文字色
11 ドボックス（下）タイトルの基本
背景色
24 ゴリヘッダマーク
13 フッタ等に表示されている表示
項目のマーク
14 上記マークの色
16/23
iQspec Inc. Copyright 2014 · All Rights Reserved.
７．携帯用画像の設定
① 携帯端末で表示する画像のリサイズと表示の設定を行います。
② 通常の商品登録時にアップロードされた画像は、PC 用の画像と共に携帯用
に自動リサイズされ既定のディレクトリに保存されます。
③ 携帯用画像に関しては、もし既定のディレクトリに対応の携帯用画像がない
場合には、初めにその画像にアクセスされたタイミングで自動生成します。
17/23
iQspec Inc. Copyright 2014 · All Rights Reserved.
◆ 設定項目名 ◆
1 携帯用拡大画像保存ディレクトリ
◆ 解説 ◆
携帯電話用テンプレートの拡大画像保存ディレクトリ
必ず実在するディレクトリを指定してください
2 携帯用拡大画像プリフィックス
必要なければ空欄でもかまいません
携帯用拡大画像の画像名につけるプリフィックス
3 携帯用拡大画像横幅
携帯用拡大画像の横幅を指定します
表示サイズと共に、自動リサイズ処理の基準ともなり
ます
4 携帯用拡大画像縦幅
携帯用拡大画像の高さを指定します
表示サイズと共に、自動リサイズ処理の基準ともなり
ます
5 携帯用縮小画像保存ディレクトリ
縮小画像の保存ディレクトリを指定します。
必ず実在するディレクトリを指定してください
6 携帯用縮小画像プリフィックス
携帯用拡大画像の画像名につけるプリフィックス
必要なければ空欄でもかまいません
7 携帯用縮小画像横幅
携帯電話用テンプレートの携帯用縮小画像横幅
表示サイズと共に、自動リサイズ処理の基準ともなり
ます
8 携帯用縮小画像縦幅
携帯電話用テンプレートの携帯用縮小画像縦幅
表示サイズと共に、自動リサイズ処理の基準ともなり
ます
18/23
iQspec Inc. Copyright 2014 · All Rights Reserved.
８．携帯商品タイプの設定
19/23
iQspec Inc. Copyright 2014 · All Rights Reserved.
◆商品詳細ページで表示する項目を設定します。
◆ 設定項目名 ◆
1
ベース価格の表示
◆ 解説 ◆
「ベース価格」という表示がでます
「ベース価格」という文字列の表示・非表示の設定
オプションなどで価格が変わる場合、商品価格表示の前に
2
型番表示
商品型番の表示・非表示を設定
3
重量表示
商品重量の表示・非表示を設定
4
在庫数表示
在庫数の表示・非表示を設定
5
メーカーの表示
メーカー名の表示・非表示を設定
6
カート内の数量表
カート内の商品数量を表示
示
同一商品がすでにカートに入っている場合、カート内の該当
商品数を表示します。
7
友達に知らせる表
「友達に知らせる」リンクの表示・非表示を設定
示
8
レビューリンク表
「レビュー」リンクの表示・非表示を設定
示
9
レビュー数表示
商品に関する投稿されたレビュー数の表示・非表示を設定
10
登録日表示
商品が登録された日の表示・非表示を設定
「提供開始日」の表示がある場合には「登録日は表示されません」
11
提供開始日の表示
「提供開始日」の表示・非表示を設定
登録されている提供開始日が未来の場合のみ表示されます
12
商品 URL 表示
切れる可能性がありますので非表示にして置く事を推奨します。
商品ＵＲＬの表示・非表示を設定
※携帯電話では外部サイトに移動した時点でセッションが
13
追加画像を表示し
商品画像の切り替え表示機能の表示・非表示を設定
ますか
ＰＣサイトと同様に、登録されている商品画像名に接尾辞
をつけた画像を準備する事で、追加画像として表示します
14
送料無料商品の画
送料無料商品の場合、画像もしくは、送料無料のコメントを表示
像ステータ
させかどうかを設定します。
20/23
iQspec Inc. Copyright 2014 · All Rights Reserved.
９．携帯端末からのトップ画像例
2 型番表示
4 在庫数表示
5 メーカーの表示
1 ベース価格の表示
6 カート内の数量表示
7 友達に知らせる表示
8 レビューリンク表示
9 レビュー数表示
21/23
iQspec Inc. Copyright 2014 · All Rights Reserved.
１０．その他の設定
◆その他の携帯端末用の設定を行います。
1
携帯用詳細検索画面でカテゴリ選択を表示
詳細検索画面で、検索条件として表示するかどうかを設定します
2
携帯用詳細検索画面でメーカー選択を表示
詳細検索画面で、検索条件として表示するかどうかを設定します
3
携帯用詳細検索画面で価格による検索を表
詳細検索画面で、検索条件として表示するかどうかを設定します
示
4
携帯用詳細検索画面で日付による検索を表
示
5
簡単ログインを利用しますか？
6
簡単ログイン利用時にパスワードの入力
7
サブカテゴリ一覧でトップサブカテゴリ画
像を表示
8
セッション情報変換ワード
会員ログイン時に、携帯端末情報を元に簡易ログインす機能を有
効にするかどうかを設定します。利用にはユーザーがマイページ
から選択する必要があります
簡易ログイン時に、パスワード入力を求めるかどうかを
設定します。
簡易ログイン時に、パスワード入力を求めるかどうかを
設定します
カテゴリ一覧画面で、上記カテゴリの画像を表示するか
どうかを設定します
セッション情報引き継ぎのためのキーワードを設定します
HTML 編集可能なエリアでサイト内リンクを直接タグで記する場合
のセッション付加のためのキーワードを設定します。
9
機種依存文字置き換えコード
携帯で機種依存文字（絵文字等）が検出された際の
置き変えを設定を行います。通常は〓に変換されます
22/23
iQspec Inc. Copyright
2014
· All
Rights
Reserved.
iQspec Inc. Copyright
2014
· All
Rights
Reserved.
１１．詳細検索＆ログイン画面
◆ 携帯詳細検索画面
◆携帯端末からのログイン画面例
23/23
iQspec Inc. Copyright 2014 · All Rights Reserved.