スマートフォンマニュアル...2-20 マ...

最終更新日：2018/08/30

スマートフォンマニュアル

～スマートフォン用最適化ページを作成する～

(.jpg)

※モバルオプションのご契約が必要です

株式会社フューチャーショップ

営業時間：平日9:30～18:00(土日祝除く)サポートTEL：06-6485-6485

この文書は以前からのユーザー画面専用となります。コマースクリエターをご利用の場合はオンランマニュゕルをご覧ください。

https://www.future-shop.jp/manual/

Page : 2Copy r i g h t F u t u r e Shop Co . , L t d .


目　　次

89111517181920212223242527282930313233

2. 生成されるスマートフォンページの表示内容について

2-01 トップページの表示内容について2-02 商品・商品グループ一覧（商品カテゴリ）の表示内容について2-03 商品詳細（通常パターン/画像ホステゖングオプション）の表示内容について2-04 商品検索結果の表示内容について2-05 商品ごとのお問合わせの表示内容について2-06 入荷お知らせメールの表示内容について2-07 メールマガジン申込・停止の表示内容について2-08 ログン（マページ）の表示内容について2-09 ログン（ショッピングカート）の表示内容について2-10 レビューを書くの表示内容について2-11 会員登録の表示内容について2-12 ショッピングカート：お届け先指定の表示内容について2-13 ショッピングカート：お支払い方法選択の表示内容について2-14 ショッピングカート：注文完了の表示内容について2-15 マページ：トップの表示内容について2-16 マページ：注文履歴一覧の表示内容について2-17 マページ：注文履歴詳細の表示内容について2-18 マページ：会員情報の表示内容について2-19 マページ：レビュー履歴の表示内容について2-20 マページ：お気に入りの表示内容について

5253

4. その他、スマートフォンのページ作成について

4-1 デスクトップゕコンの作成方法4-2 作成されたスマートフォンページの確認方法

････････････････････････････････････････････････････････････････････････････････････････････････････････････････････････････････････････････････････････････････････････････････････････････････････････････････････････････････････････････････････････････････････････････････････････････････････････････････････････････････････････････････････････････････････････

････････････････････････････････････

346

1. スマートフォンページについて

1-1 スマートフォンページを利用するには1-2 スマートフォンの対応について1-3 PCページに切り替えボタンをクリック

･･････････････････････････････････････････････････････

3436464951

3. スマートフォンに関する設定（表示に関する設定）

3-1 スマートフォン：トップページ設定（トップページ設定）3-2 スマートフォン：基本設定（利用開始設定）3-3 スマートフォンデザン設定3-4 スマートフォン各ページ設定3-5 スマートフォンコメントパターン一覧

･･････････････････････････････････････････････････････････････････････････････････････････

※futureRecommend２は、

「futureRecommend2マニュアル」（別マニュアル）をご覧ください。




1-1 スマートフォンページを利用するには


モバイルオプションの契約が必要になります！

スマートフォンページの利用には、モバルオプション月額：5,000円（税抜）が必要になります。モバルオプションは、ご契約途中からでもお申し込みいただけます。ご希望のショップ様は、フューチャーショップサポートもしくは、メールにてご連絡ください。

スマートフォンページの運用開始（最適化ページにする）

こちらよりお申し込みくださいませ。

スマートフォンページSafari （iOS 7以上）標準ブラウザ（Android 4.0以上）※すべての端末での動作を保証するものではありません。

ご契約プランがLight300の場合プランゕップが必要になります！

スマートフォンのトップページURLは、下記となります

ドメン名に続けて「/fs/店舗KEY/c/」となります。

※スマートフォンのトップページを、上記以外のURL（ドメンの直下など）に　する場合は、「.htaccess」の設定が必要です。　設置方法は、「3-1 スマートフォン：トップページ設定」をご覧ください

推奨環境




1-2 スマートフォンの対応について


スマートフォン最適化に対応しているページ

スマートフォンページの利用を開始された場合に、最適化されるページは下記となります。

スマートフォン最適化・対応ページ

トップページ

商品グループ一覧（カテゴリ）ページ

・商品一覧ページ

商品詳細ページ

商品検索結果一覧

[管理画面での設定] モバイルメニュー＞ページ設定＞スマートフォントップページ設定■トップページに表示するグループ数の設定　→トップページに表示する、最上位階層の商品グループ表示数　　（PCショップで公開されているグループを表示）■トップページの作成　→トップページ用のHTML(ヘッダ/フッタユーテゖリテゖ/フッタコメント)の登録■SEO設定　→トップページのタトル、キーワード/説明（meta）の設定

[管理画面での設定] モバイルメニュー＞ページ設定＞スマートフォン基本設定■１ページに表示するグループ数の設定　→商品グループの初期に表示するグループ数の設定ができます。

[管理画面での設定] モバイルメニュー＞ページ設定＞スマートフォン基本設定■１ページに表示する商品数の設定　→商品一覧の初期に表示する数の設定ができます。

■PCショップで公開の商品がスマートフォンで公開になります　→商品ごとに設定されるPCショップで「公開」されている商品が　　スマートフォンの最適化ページになります。　（定期購入・頒布会商品含む）

[管理画面での設定] モバイルメニュー＞ページ設定＞スマートフォン基本設定■検索結果の表示数の設定　→検索結果の初期に表示する商品数の設定ができます。

対応ページ管理画面より設定できる内容について

商品のお問合わせ※「商品のお問合わせ」ボタンの表示は、

PCページ・スマートフォンページ共通の設定

レビューページ運用メニュー＞レビュー管理＞レビュー基本設定「注意事項」の「注意事項タトル」「注意事項コメント」

※PCページ・スマートフォンページ共通の設定

会員登録ページ構築メニュー＞入力項目設定＞会員機能に関する設定の「ログンページの設定」「会員ログンフォームへの見出し」「会員登録への誘導コメント」


メールマガジン申込・停止

構築メニュー＞ページ設定＞メルマガページ設定の設定内容が反映されます。


ショッピングカートページ

構築メニュー＞ページ設定＞購入画面の設定内容が反映されます。


入荷お知らせメール申込・停止

運用メニュー＞入荷お知らせメールの設定内容が反映されます。


マページ

マページのトップページ、注文履歴一覧、注文履歴詳細、定期・頒布会購入履歴、定期・頒布会購入履歴詳細、ゕドレス帳、ポント履歴、会員情報、会員内容編集、会員内容確認、会員内容編集完了、会員解除確認、パスワード変更、パスワード変更完了、クレジットカード一覧、クレジットカード編集、クレジットカード削除、購入商品レビュー一覧、レビュー履歴一覧、お気に入り一覧、ログン（お気に入り用）

店舗公開情報ページ個人情報の取り扱い／返品特約／送料とお支払い方法について／特定商取引法の表示




1-2 スマートフォンの対応について

PCショップとしてゕクセス解析がされ、購入コンバージョンの取得も可能です。「ユーザ＞モバル」の「携帯端末」の機種（iPhone / Android / iPad ）より各端末ごとのコンバージョンの確認ができます。

Google Analytics解析について

スマートフォンでの購入の場合、ゕフゖリエト（任意ゕフゖリエト）、PPC（注文完了ページのタグ）は、PCショップの購入として扱われます。

コンバージョンについてゕフゖリエト/PPC

受注管理画面で表示される、購入経路は「SP」になります。購入経路

FutureRecommend2(PC)オプションのご契約が必要です。FutureRecommend2

スマートフォンページは、スマートフォン専用のCSSとなります。（そのため「PCショップ」用のCSSによる非表示などは、無視されることになります）

CSSについて




1-3 PCページに切り替えボタンをクリック


PC用ページに切り替えボタンをクリックした場合

スマートフォン用の最適化ページの下部に表示される「このページをPC用に切り替え」ボタンをタップすると、確認画面が表示されます。この確認画面で「はい」をタップするとPC用ページが表示されます。切り替えを行った場合、スマートフォンのブラウザを終了するまでPCページが表示されます。

1 表示の切替時には、確認画面が表示されます。

「このページをPC用に切り替え」ボタンをタップすると、確認画面が表示されます。

2 「このページをPC用に切り替え」ボタンを非表示にする場合は、CSSを登録

「このページをPC用に切り替え」の表示を消したい場合は、CSSを利用します。CSSは、「スマートフォンデザン設定」の「デザンCSSの編集」へ登録します。

/* PC用に切り替えボタンを非表示にするCSS */#FS2_SystemNav{display:none;}

[display:none]は、画面上で表示を行わない場合に記述するCSSです

■モバイルメニュー＞デザイン設定＞スマートフォンデザイン設定＞デザイン設定


切り替えを行った場合、PCページの下部に「このページをスマートフォン用に切り替え」ボタンが表示されます。




1-3 PCページに切り替えボタンをクリック

3 「このページをPC用に切り替え」ボタンでの遷移先PCページを変更したい場合

スマートフォンのトップページを商品カテゴリ一覧（ドメン名につづいて、「/fs/店舗key/c/」）のままご利用いただいている場合、PC用に切り替えた場合も商品カテゴリ一覧が表示されます。PCでは「ドメンの直下」にオリジナルのトップページをご利用されている場合でも、商品カテゴリ一覧が表示されます。

スマートフォンで表示されているページに対するPC用ページをそのまま表示したくない場合、切り替え先のPCページURLを指定することができます。

/* 切り替え先URLを変更するタグ */<span id="FS2_redirect_url">{＠URL}</span>

{@URL}の部分を切り替えたいURLに置き換えてください。

■スマートフォン起点ページ（商品カテゴリ一覧）からの遷移先を変更する場合モバルメニュー＞ページ設定＞スマートフォントップページ設定の「スマートフォン起点ページ（自動生成）の設定」にHTMLタグを設定します。

ヘッダコメント、フッタユーテゖリテゖ、フッタコメントのいずれに設定しても動作します。

■商品カテゴリページからの遷移先を変更する場合運用メニュー＞商品管理＞商品グループ上級デザンの「スマートフォン上級デザン設定」にHTMLタグを設定します。

■商品詳細ページからの遷移先を変更する場合運用メニュー＞商品管理＞商品上級デザンの「スマートフォン上級デザン設定」にHTMLタグを設定します。

「.htaccess」によりPCトップページからスマートフォントップページにリダレクト設定を行っている場合、本タグで指定するURLはリダレクトされないURLをご指定ください。

リダレクト前のURLと同じURLを本タグで指定した場合、.htaccessによるリダレクトが実行され、PCサトへ切り替えることができず、結果的にスマートフォントップページのPCページ版が表示されてしまいます。

その場合は、<span id="FS2_redirect_url">http://example.com/index.html</span>というようにフゔル名まで記述することでPCサトへ切り替えることができます。




2-1 トップページの表示内容について


トップページの表示内容について

スマートフォン設定必ず表示される項目構築メニューの設定各商品の登録内容※CSSにより非表示にできます

表示設定モバルメニュー＞ページ設定＞スマートフォン基本設定「スマートフォン利用設定」

SEO設定モバルメニュー＞ページ設定＞スマートフォントップページ設定

ヘッダコメントモバルメニュー＞ページ設定＞スマートフォントップページ設定

商品グループ一覧

フッタコメントモバルメニュー＞ページ設定＞スマートフォントップページ設定

このページをPC用に切り替え

ヘッダコメント

フッタコメント

「構築メニュー＞ページ設定＞商品ページ設定」の「ナビゲーション（パンくずナビ）の設定」　の「ナビゲーションの起点リンクテキスト」

モバルメニュー＞ページ設定＞スマートフォントップページ設定「１ページに表示するグループ数」を「０件」に設定することにより、　ヘッダ・フッタコメントのみの表示となります。

モバルメニュー＞ページ設定＞スマートフォントップページ設定「１ページに表示するグループ数」を「０件」に設定することにより、　ヘッダ・フッタコメントのみの表示となります。

設定された件数ずつ商品グループの読み込みがされます。


デザインや表示を非表示にするCSSは、「モバルメニュー＞デザン設定＞スマートフォンデザン設定＞デザン設定」に登録してください

スマートフォン設定＞トップページ設定＞ヘッダコメントより、

ヘッダのデザンをご設定いただけます

フッタユーテゖリテゖ

フッタユーテゖリテゖ




2-2 商品・商品グループ一覧（商品カテゴリ）の表示内容について


商品グループ、一覧の表示内容について


[スマートフォン ]上部コメント

商品検索

ホーム

特定商取引法に基づく表示

送料とお支払い方法について

個人情報の取扱いについて


ﾏｲﾍﾟｰｼﾞカート


モバルメニュー＞ページ設定＞スマートフォン基本設定


商品グループ一覧

商品一覧

[スマートフォン ]下部コメント

モバルメニュー＞ページ設定＞スマートフォン基本設定「１ページに表示するグループ数」より、商品グループ一覧の初期に表示するグループ数の設定ができます。

モバルメニュー＞ページ設定＞スマートフォン基本設定「１ページに表示する商品数」より、商品一覧の初期に表示する数の設定ができます。


商品の表示状態 PCショップの商品グループ公開設定

SEO設定構築メニュー＞ページ設定＞SEO設定

※各商品の「SEO管理」より個別設定も可能


パンくずリスト「パンくずリスト」の文言、及び表示設定は、構築メニュー＞ページ設定＞商品ページ設定 [ナビゲーション（パンくずナビ）の設定 ]より設定。

商品管理：「上級デザン」の「スマートフォン上部コメント」

商品管理：「上級デザン」の「スマートフォン下部コメント」

/* 検索フォーム非表示 */ .FS2_Search{display:none;}

/* カートを見る非表示 */ li.FS2_UtilityCart{display:none;}

会員機能を利用している場合にのみ「マページ」が表示されます。

モバルメニュー＞ページ設定＞スマートフォントップページ設定「起点のリンク先を下記に設定する」が設定されいる場合に表示されます。

※「特定商取引法に基づく表示」「送料とお支払い方法について」「個人情報の取扱いについて」　の自動生成ページを利用しない場合は、「デザンCSSの編集」に上記CSSを登録して非表示に　し、フッタコメントに必要なリンク（HTMLタグ）をご登録ください。

「運用メニュー＞商品管理＞商品グループ管理」の「所属する子グループのレゕウトスタル」が「縦：0件」に設定されている場合は、何も表示されません

「運用メニュー＞商品管理＞商品グループ管理」の「所属する商品のレゕウトスタル」が「縦：0件」に設定されている場合は、何も表示されません

※スマートフォンページでは、絵文字は表示されません。

/* 特定商取引法に基づく表示非表示 */ .FS2_businessdeal{display:none;}

/* 送料とお支払い方法について非表示 */ .FS2_postagesettlelist{display:none;}

/* 個人情報の取扱いについて非表示 */ .FS2_privacypolicy{display:none;}

ログン

メルマガ申込/停止

/* ログン非表示 */ .FS2_login_logout{display:none;}

/* メルマガ申込・停止非表示 */ .FS2_mailmagazine_entry_cancel{display:none;}

デザインや表示を非表示にするCSSは、「モバル＞デザン設定＞スマートフォンデザン設定」にCSSを登録してください




2-2 商品・商品グループ一覧（商品カテゴリ）の表示内容について



モバルメニュー＞ページ設定＞スマートフォン基本設定「１ページに表示するグループ数」で設定された件数ずつ商品グループの読み込みがされます。

モバルメニュー＞ページ設定＞スマートフォン基本設定「１ページに表示する商品数」で設定された件数ずつ商品が表示されます。

並び替えの内容は、「構築メニュー＞ページ設定　＞商品ページ設定」の「並び替えリンク表示設定」で設定されたものが表示されます。※初期の並びは、各商品グループの

「表示順位」の設定になります。

/* 商品一覧のサムネル幅　110pxの場合 */.FS2_container_ItemList .thumbnail{width:110px;}

商品グループ一覧のサムネル幅は設定されてません。サムネルの幅を固定する場合は、下記のようなCSSを記述します

/* 商品一覧の在庫切れ文言のデザン */#FS2_CategoryList .FS2_noStockText{font-size:12px;color:#339900;background-color:#EEFFEE;border:#009900 1px dotted;}

在庫切れ文言のデザンを変更する場合は、下記のようなCSSを記述します。

/* 商品グループの下部コメントを非表示にする場合 */#FS2_CategoryList .FS2_lower_comment{display:none;}

/* 商品グループの上部コメントを非表示にする場合 */#FS2_CategoryList .FS2_upper_comment{display:none;}

※サンプルのCSSはグリーンになります。

【採用される商品画像】サムネル画像

スマートフォン上級デザン設定「下部コメント」

スマートフォン上級デザン設定「上部コメント」




2-3 商品詳細（通常パターン/画像ホスティングオプション）の表示内容について


商品詳細ページの表示について



商品画像

twitter

キャッチコピー /商品名

ゕキャッチゕコン

商品番号

商品価格

獲得ポント

個別送料

クール便（画像）

販売期間

項目選択肢

オプション価格

バリエーション

カートボタン（在庫切れ文言）

返品特約

[スマートフォン ]商品説明

レビューを見る/書く

入荷お知らせメール

商品についてのお問い合わせ


おすすめ商品

商品検索

ホーム





facebook

トラストマーク




「商品番号」を表示するかしないかの設定は、構築メニュー＞ページ設定＞商品ページ設定 [商品番号表示]

「ポントの表示文言」は、構築メニュー＞ページ設定＞商品ページ設定 [ポント表示設定]


「返品特約の設定」は、構築メニュー＞店舗公開情報＞返品特約設定より設定。※各商品の「上級デザン」より個別設定も可能。

「在庫切れ文言」は、構築メニュー＞ページ設定＞商品ページ設定 [在庫切れ商品のカート投入について]　※各商品の「上級デザン」より個別設定も可能。

レビューの表示数は、運用メニュー＞レビュー管理＞基本設定 [商品詳細ページでのレビュー表示設定] 設定数で初期表示がされます。

「クール便の画像」は、構築メニュー＞デザン設定の選択されているデザンの「ボタン設定」で設定された画像が表示されます。

画像ホステゖングオプションを利用されている場合は、商品画像が複数表示されます。

バリエーションは、セレクトボックス・一方のみセレクトボックス・一覧形式の3種類の表示方法が可能です。

パンくずリスト

「パンくずリスト」の文言、及び表示設定は、構築メニュー＞ページ設定＞商品ページ設定 [ナビゲーション（パンくずナビ）の設定 ]より設定。

構築メニュー＞ページ設定＞商品ページ設定 [商品詳細ページの設定 ]より設定。※各商品の「基本情報」の「商品スタルの表示設定」より個別設定も可能。


送料とお支払い方法について非表示 */ .FS2_postagesettlelist{display:none;}




/* PC用に切り替えボタンを非表示にするCSS */ #FS2_SystemNav{display:none;}

採用される商品画像■通常：画像1.2.3の画像（タップ時のポップゕップ表示は、拡大画像）■画像ホステゖングの場合：商品詳細の「大画像」　→ 商品URLコード-m-画像番号-dl.jpg（タップ時は、商品URLコード-m-画像番号-pl.jpg）

　→ 商品URLコード-s-画像番号-dl.jpg（タップ時は、商品URLコード-s-画像番号-pl.jpg）

エラー文言は、ポップゕップで表示されタップされた後「カートボタンの上」に表示されます。

商品管理：「上級デザン」の「スマートフォン下部コメント」※スマートフォンページでは、絵文字は表示されません。

スマートフォン用の「商品説明」が採用されます。※スマートフォンページでは、絵文字は表示されません。

商品管理：「上級デザン」の「スマートフォン上部コメント」※スマートフォンページでは、絵文字は表示されません。

お気に入りに登録

ログン

メルマガ申込/停止

/* ログン非表示 */ .FS2_login_logout{display:none;}

/* メルマガ申込・停止非表示 */ .FS2_mailmagazine_entry_cancel{display:none;}

デザインや表示を非表示にするCSSは、「モバル＞デザン設定＞スマートフォンデザン設定」にCSSを登録してください






上部コメント

項目選択肢

オプション価格

バリエーション

/* 商品の上部コメントを非表示にする場合 */.FS2_body_Goods_GoodsDetail .FS2_upper_comment{display:none;}

/* facebook,twitterボタンを非表示にする場合 */.FS2_body_Goods_GoodsDetail .FS2_TweetButton_area{display:none;}

商品画像は、横幅を240pxに縮小（拡大）しております。このサズのを変更する場合は、CSSを登録してください。

/* 商品画像の横幅を変更する場合 */

#FS2_ItemDetail .FS2_thumbnail_container img {width:200px;}

ゕキャッチゕコンは、PCショップで表示されているサズをそのままで表示しています。スマートフォンページのみリサズする場合は、CSSを登録してください。

/* ゕキャッチゕコン-01の横幅変更 */

.FS2_body_Goods_GoodsDetail .catch01{width:50px;}





セレクトボックス、テキストボックスの幅は、画面の幅に合わせて表示されます。※スマートフォンの仕様により、選択肢が長くなると　最後まで表示されません。オプション価格など選択肢内容で　価格が変わる場合は買物がしづらくなりますので　あらかじめ文字数の調整をお願いします。

「在庫切れ文言」は、構築メニュー＞ページ設定＞商品ページ設定 [在庫切れ商品のカート投入について]

※各商品の「上級デザン」より個別設定も可能。

トラストマーク

トラストマークは、「SSサズ」で表示されます。

twitterfacebook

商品画像

在庫切れの表示（在庫切れ文言）

商品価格上部コメントについて

商品価格上部コメントは、スマートフォンページでは表示されません。

スマートフォン上級デザン設定「上部コメント」






下部コメント

/* 商品の下部コメントを非表示にする場合 */.FS2_body_Goods_GoodsDetail .FS2_lower_comment{display:none;}

レビュー

初期の表示では、レビュー内容は表示されません。

おすすめ商品　　　　　　　　　　　　

「商品基本情報編集」の「おすすめ商品の設定」にある「商品ページ内にも表示させる」のチェックが入っている場合のみおすすめ商品が表示されます。※在庫がないものは表示されません。

商品の表示状態 PCショップの商品公開設定

SEO設定構築メニュー＞ページ設定＞SEO設定 ※各商品の「SEO管理」より個別設定も可能

登録されているすべてのおすすめ商品を表示します（最大20商品）

■レビュー件数が「0件」の場合の表示

スマートフォン上級デザン設定「下部コメント」

商品説明




画像ホスティングオプション利用の場合の商品画像表示


/* 画像ホステゖングポップゕップ画像の横幅を変更する場合 */#FS2_ItemImagePopup .FS2_thumbnail_container img {width:100%;}

画像ホステゖングオプション用レゕウト「パターンIH1～IH4」へ設定されている場合左記のように商品画像が表示されます。

メン 01 サブ 01

メンサムネル画像

サブサムネル画像

■商品画像の表示

スクロールする

スクロールする

サムネル画像は、メン画像のサムネル画像に引き続き、サブ画像のサムネル画像が表示されます。

/* 画像ホステゖングオプション：商品画像の横幅を変更 */#FS2_ItemDetail .fs_sp_flick_container img {width:180px;}

商品URLコード-m-画像番号-ds.jpg

商品URLコード-m-画像番号-dl.jpg

商品URLコード-s-画像番号-dl.jpg

商品URLコード-s-画像番号-ds.jpg

商品URLコード-m-画像番号-pl.jpg

商品URLコード-s-画像番号-pl.jpg

スマートフォン基本設定の「画像[商品詳細]にALTを表示する」にチェックすると、ALTテキストが表示されます。

スマートフォン基本設定の「画像[商品詳細]にALTを表示する」にチェックすると、ALTテキストが表示されます。




2-4 商品検索結果の表示内容について


商品検索結果の表示内容について

商品検索結果の一覧の表示について。キーワードの検索（PCショップと同様）は、「キャッチコピー」「商品名」「商品一言説明」「商品説明」「商品番号」「商品タグ」より検索します。

ヘッダコメントモバルメニュー＞ページ設定＞スマートフォン基本設定

商品検索結果一覧

モバルメニュー＞ページ設定＞スマートフォン基本設定「１ページに表示する検索結果商品数」より、商品検索結果一覧の初期に表示する数の設定ができます。


パンくずリスト「パンくずリスト」の文言、及び表示設定は、構築メニュー＞ページ設定＞商品ページ設定 [ナビゲーション（パンくずナビ）の設定 ]より設定。

ページタトル「モバル＞ページ設定＞スマートフォン各ページ設定」の「タトル」で設定

※SEO設定はありません。

商品検索

ホーム











会員機能を利用している場合にのみ「マページ」が表示されます。

「特定商取引法に基づく表示」「送料とお支払い方法について」「個人情報の取扱いについて」の自動生成ページを利用していない場合は、上記CSSを「デザンCSSの編集」に登録し、システムからの表示部分を非表示にしたうえで、フッタコメントに必要なリンク先（HTML）をご登録ください。


/* 送料とお支払い方法について非表示 */ .FS2_postagesettlelist{display:none;}




モバルメニュー＞ページ設定＞スマートフォン各ページ設定


モバルメニュー＞ページ設定＞スマートフォントップページ設定「起点のリンク先を下記に設定する」が設定されいる場合に表示されます。

デザインや表示を非表示にするCSSは、モバルメニュー＞デザン設定＞スマートフォンデザン設定＞デザン設定でCSSを登録してください






モバル＞ページ設定＞スマートフォン基本設定「１ページに表示する検索商品数」で設定された件数ずつ商品が表示されます。

並び替えの内容は、「構築メニュー＞ページ設定　＞商品ページ設定」の「並び替えリンク表示設定」で設定されたものが表示されます。※初期の並びは、各商品グループの

「表示順位」の設定になります。

/* 商品一覧の在庫切れ文言のデザン */#.FS2_GoodsSearchList .FS2_noStockText{font-size:12px;color:#339900;background-color:#EEFFEE;border:#009900 1px dotted;}

在庫切れ文言のデザンを変更する場合は、下記のようなCSSを記述します。※サンプルのCSSはグリーンになります。

/* 商品検索のサムネル幅　110pxの場合 */#FS2_GoodsSearchList .thumbnail{width:110px;}

商品グループ一覧のサムネル幅は設定されてません。サムネルの幅を固定する場合は、下記のようなCSSを記述します

2-4 商品検索結果の表示内容について




2-5 商品ごとのお問合わせの表示内容について


商品ごとのお問合わせ表示内容について

商品ごとのお問合わせページでは、「パンくずリスト」「検索フォーム」「このページをPC用に切り替え」は表示されません。





お問合わせフォーム「氏名」「メールゕドレス」

「問い合わせ内容」




ヘッタコメント

お問合わせフォーム


個人情報保護方針の同意

構築メニュー＞店舗公開情報>個人情報の取り扱いについての「個人情報取得に関する設定」の「表示設定」のチェックが入っている場合に表示※PCページ・スマートフォンページ共通の設定


ホーム









2-6 入荷お知らせメールの表示内容について


入荷お知らせメールの表示内容について

入荷お知らせメールページでは、「パンくずリスト」「検索フォーム」「このページをPC用に切り替え」は表示されません。





入荷お知らせメール申込「氏名」「メールゕドレス」「HTMLメール受信可否」





申込





停止


入荷お知らせメール停止「停止メールゕドレス」


ホーム






下部コメント

上部コメント




2-7 メールマガジン申込・停止の表示内容について


メールマガジン申込・停止の表示内容について

メールマガジン申込・停止ページでは、「パンくずリスト」「検索フォーム」「このページをPC用に切り替え」は表示されません。





メールマガジン申込「氏名」「メールゕドレス」「HTMLメール受信可否」



メールマガジン

申込




メールマガジン

停止


メールマガジン停止「停止メールゕドレス」

[スマートフォン ]中部コメント


ホーム







上部コメント

中部コメント

下部コメント




2-8 ログイン（マイページ）の表示内容について


ログイン（マイページ）の表示内容について

マページへ遷移するログンページでは、「パンくずリスト」「検索フォーム」「このページをPC用に切り替え」は表示されません。





会員登録がお済みのお客様[ログン]




ログン



会員登録

まだご登録がお済みでないお客様[会員登録]


ホーム





構築メニュー＞入力項目設定＞会員機能に関する設定の「ログンページの設定」「会員ログンフォームへの見出し」「会員登録への誘導コメント」※PCページ・スマートフォンページ共通の設定





2-9 ログイン（ショッピングカート）の表示内容について


ログイン（ショッピングカート）の表示内容について

ショッピングカートページから遷移するログンページでは、「パンくずリスト」「検索フォーム」「このページをPC用に切り替え」は表示されません。





ご利用が初めてのお客様[会員登録後に購入]

[会員登録せずに購入]




会員登録



ログン

会員登録がお済みのお客様[ログン]


ホーム





構築メニュー＞ページ設定＞購入画面の「ログン画面設定（会員制機能を利用する場合の購入途中）」「会員へのログン誘導タトル」「会員登録説明コメント」※PCページ・スマートフォンページ共通の設定





2-10 レビューを書くの表示内容について


レビューを書くの表示内容について

レビューを書くページでは、「パンくずリスト」「検索フォーム」「このページをPC用に切り替え」は表示されません。





レビューを書く「ニックネーム」「おすすめ度」

「レビュー本文」「プロフゖール公開」




レビューを書く


運用メニュー＞レビュー管理＞レビュー基本設定「注意事項」の「注意事項タトル」「注意事項コメント」※PCページ・スマートフォンページ共通の設定



ホーム





レビュー注意事項コメント





2-11 会員登録の表示内容について


会員登録の表示内容について

会員登録ページでは、「パンくずリスト」「検索フォーム」「このページをPC用に切り替え」は表示されません。





会員登録



会員登録






ホーム





構築メニュー＞入力項目設定>顧客登録項目の「項目表記名」「会員用入力項目」の設定内容が反映されます。※PCページ・スマートフォンページ共通の設定

構築メニュー＞店舗公開情報>個人情報の取り扱いについての「個人情報取得に関する設定」の「表示設定」のチェックが入っている場合に表示





2-12 ショッピングカート：お届け先指定の表示内容について


ショッピングカート：お届け先指定（単数）の表示内容について

ショッピングカートページ以降では、「パンくずリスト」「検索フォーム」「このページをPC用に切り替え」は表示されません。





お届け先



お届け先





ホーム





購入ステップ画像

モバル＞デザン設定＞スマートフォンデザン設定の「スマートフォンボタン設定」





ショッピングカート：お届け先指定（複数）の表示内容について






お届け先



お届け先





ホーム





購入ステップ画像モバルメニュー＞デザン設定＞スマートフォンデザン設定＞ボタン設定





2-13 ショッピングカート：お支払い方法選択の表示内容について


ショッピングカート：お支払い方法選択の表示内容について






お支払い方法



お支払い方法





ホーム





構築メニュー＞ページ設定＞購入画面の「お支払い方法に関する説明」「通信欄」の設定内容が反映されます。※PCページ・スマートフォンページ共通の設定

通信欄

購入ステップ画像

モバルメニュー＞デザン設定＞スマートフォンデザン設定＞ボタ

ン設定

お支払い方法に関する説明

通信欄

＜お支払い方法の説明文＞　お支払い方法ごとに表示される説明文は、　構築メニュー＞送料決済設定＞決済方法一覧の　「お客様(消費者)がお支払い方法を選択されるページに　　表示する銀行振込に関する説明」

　の【スマートフォン】用が採用されます。

構築メニュー＞入力項目設定>お届け日時の「お届け日時の設定」の設定内容が反映されます。※PCページ・スマートフォンページ共通の設定お届け先に関するご希望

お届け先に関するご希望





2-14 ショッピングカート：注文完了の表示内容について


ショッピングカート：注文完了の表示内容について






注文完了


注文完了





ホーム





モバルメニュー＞ページ設定＞スマートフォン基本設定の「注文完了ページ」の設定内容が反映されます。※PCページ・スマートフォンページ共通の設定

購入ステップ画像モバルメニュー＞デザン設定＞スマートフォンデザン設定＞ボタ

ン設定






2-15 マイページ：トップの表示内容について


マイページ：トップの表示内容について

マページ内では、「このページをPC用に切り替え」は表示されません。





マページトップ


マイページトップ





ホーム





構築メニュー＞入力項目設定＞会員機能に関する設定の「ゕカウントサービスの設定」の内容が反映されます。※PCページ・スマートフォンページ共通の設定


ログゕウト





2-16 マイページ：注文履歴一覧の表示内容について


マイページ：注文履歴一覧の表示内容について






注文履歴一覧


注文履歴一覧





ホーム






ログゕウト

～～





2-17 マイページ：注文履歴詳細の表示内容について


マイページ：注文履歴詳細の表示内容について






注文履歴一覧


注文履歴詳細





ホーム






ログゕウト





2-18 マイページ：会員情報の表示内容について


マイページ：会員情報の表示内容について






会員情報


会員情報




ホーム






ログゕウト

～～


構築メニュー＞入力項目設定＞顧客登録項目設定にて「使用する」となっている項目のみ表示されます。※PCページ・スマートフォンページ共通の設定

※以下のページもスマートフォン用に表示　最適化されています。　・会員内容編集ページ　・会員内容確認ページ　・会員内容編集完了ページ　・会員解除確認ページ　・パスワード変更ページ　・パスワード変更完了ページ





2-19 マイページ：レビュー履歴の表示内容について


マイページ：レビュー履歴の表示内容について






レビュー履歴


レビュー履歴




ホーム






ログゕウト


※以下のページもスマートフォン用に表示　最適化されています。　・購入商品レビュー一覧ページ　・レビュー書き込みページ　・レビュー内容確認ページ　・レビュー書き込み完了ページ





2-20 マイページ：お気に入りの表示内容について


マイページ：お気に入りの表示内容について






お気に入り一覧


お気に入り一覧




ホーム






ログゕウト


※以下のページもスマートフォン用に表示　最適化されています。　・ログイン（お気に入り用）ページ





3-1 スマートフォン：トップページ設定（トップページ設定）

3. スマートフォンに関する設定

スマートフォンのトップページの設定と、タイトルなどのSEO設定

スマートフォンでゕクセスされた場合のトップページに関する設定を行います

スマートフォン用トップページURLは、ドメン名に続いて、「/fs/店舗key/c/」になります。

1 スマートフォン起点ページ(自動生成)設定

【管理画面の操作する場所】モバイルメニュー＞ページ設定＞スマートフォントップページ設定

スマートフォンページの「ホーム」のURL、トップページに表示する最上位階層の商品グループ表示数、ヘッダコメント、フッタコメントの登録ができます。

２ SEO設定スマートフォン最適化トップページのページ名設定（タトル）、メタタグ（Description,keyword）の設定ができます。

「$SHOP$」は、「構築メニュー＞店舗公開情報＞ショップ基本設定」の「店舗名」に置き換わります。

①

「１ページに表示するグループ数」を「０件」に設定することにより、　ヘッダ・フッタコメントのみの表示となります。

②

③

スマートフォンページの下部に表示される「ホーム」のリンク先「パンくずリスト」のトップのリンク先

3 プレビュー

※ 発行されたURLは、24時間有効です。※ 管理画面へ同一ゕカウントでログンを行い、プレビューURLを発行した場合、24時間以内でも先に発行されたプレビューURLは無効になります。

④

②

③

①

④

「モバルメニュー＞ページ設定＞スマートフォン基本設定」の「スマートフォンページを利用する」の設定前に（スマートフォンページの利用開始前）

　スマートフォンページの表示確認を行うURLを発行します。

フッタユーテゖリテゖで「$LOGIN_LOGOUT_LINK$（ログン／ログゕウトリンク）」の置換文字が使用できます。

　<a href="https://***.future-shop.jp/fs/shopkey/Login.html">ログン</a>

　<a href="javascript:return false;" class="FS2_Logout_btn">ログゕウト</a>

ログン状態によって、いずれかに置き換わります。




ご契約時のスマートフォンのトップページのURLは、下記となります

ドメン名に続けて「/fs/店舗KEY/c/」となります。

スマートフォンのトップページを「http://契約ドメイン/」に設定する

スマートフォンでご契約ドメンへゕクセスされた際に、スマートフォントップページ（ドメン名に続けて「/fs/店舗key/c/」）へリダレク

ト（遷移）させる場合は、「.htaccess」の設定が必要です。

■「.htaccess」の作成方法とアップロード先について

１）テキストエデゖタなどを利用し、設定内容を記述します。

２）フゔル名を「.htaccess」にし、保存します。

３）作成された「.htaccess」をトップページ（index.html）と同じ階層へ　　FTPソフトを利用しゕップロードを行ってください。

3-1 スマートフォン：トップページ設定（トップページ設定）




3-2 スマートフォン：基本設定（利用開始設定）


スマートフォンの利用開始と、ヘッダ・フッタデザインの設定

スマートフォンページの利用開始の設定と、商品グループ、商品一覧で初期に表示される表示数の設定、ヘッダ・フッタコメントの設定。

スマートフォン利用設定

【管理画面の操作する場所】モバイルメニュー＞ページ設定＞スマートフォン基本設定

「利用設定」の「スマートフォンページを利用する」のチェックを入れることにより、スマートフォンでゕクセスした場合スマートフォン用の最適化ページが表示されます。

レイアウト設定

商品グループ、商品一覧で初期に表示される表示数の設定です。

①

②

③

① １ページに表示するグループ数の設定　商品グループの初期に表示するグループ数の設定ができます。 1~20件まで指定できます。

② １ページに表示する商品数の設定　商品一覧の初期に表示する商品数の設定ができます。 1~60件まで指定できます。

③ １ページに表示する検索結果の表示数の設定　検索結果の初期に表示する商品数の設定ができます。　1~60件まで指定できます。




④ ヘッダコメント

⑤ フッタコメント

④

⑤

ヘッダ・フッタコメントの設定です。ヘッダ・フッタコメントは、それぞれ2通り登録ができ、「スマートフォン各ページ設定」で切り替えて使用できます。




画像の設定

商品サムネイル画像

「一覧ページの読み込み速度を早くする」にチェックすると、ページのスクロールに合わせて商品サムネル画像を読み込む「遅延ロード」を行います。

遅延ロードについて

スマートフォンでショップ画面を表示する際、「ページの読み込み」は表示されている部分だけでなく、表示されていない部分についても行われます。

商品一覧画面（商品グループ・商品検索結果）では、商品サムネル画像が複数配置されますので、通常は、すべての商品サムネル画像の読み込み後に「ページの読み込み」が完了します。

この「遅延ロード」機能を利用すると、ページを表示する際に、スマートフォンの画面に表示されていない「商品サムネル画像」を読み込みません。その結果、「ページの読み込み」が（遅延ロード機能を利用しない場合に比べて）速く完了します。

いったんページの読み込みを完了した後、ページをスクロールすると、読み込まれていなかった「商品サムネル画像」が、画面に表示されるタミングで、読み込みます。読み込み前には「読み込み中表示画像」が表示され、画像の読み込みが完了すると、商品サムネル画像が表示されます。

「遅延ロード」機能ご利用時の注意

「読み込み中表示画像」と、登録されている「商品サムネル画像」の高さが違っていると、「商品サムネル画像」読み込み時に高さが変更されることで、画面がずれて、見づらくなる場合があります。

ご登録いただいている「商品サムネル画像」と同じ高さの「読み込み中表示画像」を登録するか、cssを利用して「商品サムネル画像」を表示する部分の高さを指定してください。「読み込み中表示画像」は、モバルメニュー＞デザン設定＞スマートフォンデザン設定＞ボタン設定の『商品サムネル画像「読み込み中表示」用画像』で登録できます。

読み込み中表示画像初期状態では横80ピクセル×縦80ピクセルのゕニメーションGIF画像を設定しています。

ページ読み込み完了時赤枠内がスマートフォンに表示される範囲

画面スクロール時赤枠内（スマートフォンに表示される範囲）に入った際に、商品サムネル画像が読み込まれ、表示されます。

画像の高さに差があるため、読み込み前後で高さが変わる場合があります。

読み込み後スマートフォンの画面に表示された際に、商品サムネル画像が読み込まれます。




商品詳細ページの設定

バリエーション表示設定商品画面にて、「カラー・サズ」などのバリエーションがある場合の表示方法を3種類から選択できます。いずれか選択してください。

すべてのバリエーションをセレクトボックスで表示バリエーションを「カラー／サズ」など「／」で区切って、セレクトボックスで表示します。1つのセレクトボックスで表示するので、画面の表示スペースが少なくて済みます。

バリエーションごとにカートボタンを表示バリエーションごとに「カートに入れる」ボタンや、在庫切れ時には「入荷お知らせメール」ボタンを表示することもできます。

一方のバリエーションを選択するバリエーションの一方を選択すると、選択したバリエーションの一覧が表示されます。バリエーションの数が多い場合に適しています。(例カラー10色で、サズが7サズ、合計70バリエーションなどの商品)

※定期・頒布会商品の場合は「すべてのバリエーションをセレクトボックスで表示」が適用されます

すべてのバリエーションをセレクトボックスで表示

バリエーション縦横配置設定

「運用メニュー＞商品管理＞商品バリエーション」で設定した「縦軸」「横軸」の項目のどちらを基準に並べるかを選択できます。

縦軸「カラー」、横軸「サイズ」とした場合「縦選択肢1／横選択肢1」を選択すると　レッド／S　レッド／M　：　ブルー／S　ブルー／M　：「横選択肢1／縦選択肢1」を選択すると　S／レッド　M／レッド　：　S／ブルー　M／ブルー　：の順にセレクトボックスに表示されます。

バリエーション表示方法は3種類から選択できます




一方のバリエーションを選択する

バリエーション縦横配置設定

「運用メニュー＞商品管理＞商品バリエーション」で設定した「縦軸」「横軸」の項目のどちらをセレクトボックスに表示するかを選択できます。なお、バリエーションが「縦軸」「横軸」のどちらかしかない場合、セレクトボックスが表示されません。

在庫切れ表示設定在庫切れの場合在庫切れの場合の表示方法を設定できます。

予約在庫切れ表示設定予約在庫切れの場合予約販売時に「予約在庫切れ」の場合の表示方法を設定できます。

×選択肢名を表示在庫切れになったバリエーションは「×」を付けて表示します。（在庫切れになったバリエーションは選択できません。）

行を削除する在庫切れになったバリエーションは表示されません。

※Lサズが在庫切れ

×選択肢名を表示予約在庫切れになったバリエーションは「×」を付けて表示します。（在庫切れになったバリエーションは選択できません。）

行を削除する予約在庫切れになったバリエーションは表示されません。




バリエーションごとにカートボタンを表示

バリエーション縦横配置設定「運用メニュー＞商品管理＞商品バリエーション」で設定した「縦軸」「横軸」の項目のどちらを基準に並べるかを選択できます。

なお、バリエーションが「縦軸」「横軸」のどちらかしかない場合、設定されているバリエーションにカートボタンを付けて表示されます。

在庫切れ表示設定通常販売時の在庫切れ表示の設定です。在庫切れ表示文言在庫切れの場合に、表示される文言を設定できます。在庫切れの場合在庫切れの場合の表示方法を設定できます。

予約在庫切れ表示設定　予約販売時の在庫切れ表示の設定です。予約在庫切れ表示文言予約在庫切れの場合に、表示される文言を設定できます。予約在庫切れの場合予約在庫切れの場合の表示方法を設定できます。

在庫僅少閾値コメント「構築メニュー＞ページ設定＞商品ページ設定」にある「在庫表示設定」の「在庫切れ設定」にて「在庫僅少表示」を選択した場合に、在庫が「僅少表示閾値」に設定した数以下になった場合に、表示される文言を設定できます。

在庫数キャプション在庫数を表示する際の文言を指定できます。「在庫数キャプション」と「在庫数は「：」で区切って表示されます。

「‐」を表示する在庫切れになったバリエーションは「カートに入れる」ボタンのかわりに「‐」を表示します。行を削除する在庫切れになったバリエーションは表示されません。「入荷お知らせメール」ボタン表示

在庫切れになったバリエーションは「入荷お知らせメール」ボタンを表示します。

「‐」を表示する在庫切れになったバリエーションは「カートに入れる」ボタンのかわりに「‐」を表示します。行を削除する在庫切れになったバリエーションは表示されません。

予約在庫僅少閾値コメント「構築メニュー＞ページ設定＞商品ページ設定」にある「予約設定」の「予約在庫表示設定」にて「予約在庫僅少表示」を選択した場合に、予約在庫が「予約在庫僅少表示閾値」に設定した数以下になった場合に、表示される文言を設定できます。

予約在庫数キャプション予約在庫数を表示する際の文言を指定できます。「予約在庫数キャプション」と「予約在庫数は「：」で区切って表示されます。

↑在庫数キャプション

↓在庫切れ表示文言

在庫僅少コメント→




価格表示設定の使用についてPC版と同じスマートフォンサトに、構築メニュー＞各ページ設定＞商品ページ設定の「価格表示設定」を適用します。下記の設定で利用するスマートフォンサトで独自の価格表示設定ができます。

価格表示パターン消費税の表示方法を選択できます。【消費税込表示】 10,800円(本体価格：10,000円〒消費税：800円) 　　　　　　　　10,800円(本体価格：10,000円) 　　　　　　　　10,000円(消費税込：10,800円) 　　　　　　　　 10,800円(税込)

【消費税抜表示】 10,000円[ ] []内に税金表示を行います。置換文字$TAX$を使用できます。消費税金額が表示されます。

税抜価格表示注記「当店はすべて税抜表示です。」などの注記を設定できます。「税抜価格の注記を表示する」にチェックすると、税込価格表示注記コメントを表示します。「HTMLタグを使用する」にチェックすると、コメントにHTMLタグを利用できます。この設定は全商品に適用されます。全商品の価格を税抜表示にした場合にご利用ください。

価格表示設定

予約設定予約商品の場合に、予約受付期間中に商品詳細ページに表示されるコメントを設定できます。「HTMLタグを使用する」にチェックすると、コメントにHTMLタグを利用できます。また、予約商品がカートに入った場合に、「カートの中身」の予約商品名欄にコメントを表示できます。

※予約設定に関して詳しくは「予約販売機能マニュゕル」（別マニュゕル）をご参照ください。




画像ホスティング設定（オプション）

「画像[商品詳細]にALTを表示する」にチェックすると、商品追加画像（画像ホステゖングオプション）に設定したALTテキストを、商品ページ（商品詳細ページ・画像拡大画面）に表示します。

スマートフォンサトのみの設定です。PCサトについては、「構築メニュー＞ページ設定＞商品ページ設定」の画像ホステゖング設定（オプション）で設定できます。

ALTテキストについて「ALTテキスト」は「運用メニュー＞商品管理＞商品基本情報編集」の画像ホステゖングパターンを利用して、商品追加画像を登録する場合に、各画像の説明として登録するテキストです。

カートページ設定

バンドル販売用カートコメントショッピングカートにバンドル対象商品が入っている場合に表示する、まとめ買いを促すコメントを設定します。

バンドル対象商品一覧へのリンク表示件数バンドル販売用カートコメントの直後に表示する、バンドル対象ページ一覧へのリンク件数を、「全件」または1～5件から設定できます。

バンドル販売価格キャプション必須項目です。割引確認ページ（ショッピングカートのバンドル詳細表示）またはご注文確認画面で表示される「バンドル値引き後の商品販売価格」の表記名です。

バンドル販売割引金額キャプション必須項目です。ショッピングカート、割引確認ページ（ショッピングカートのバンドル詳細表示）、またはご注文確認画面で表示される「バンドルによる値引き額」の表記名です。

このサイトでお支払いボタン説明コメント(HTMLタグ)設定Amazon PayまたはApple Payご使用時に、ショッピングカート画面に表示される「このサトでお支払いボタン」の説明コメントです。「このサトでお支払いボタン」から遷移する「通常のご注文フォーム」ではAmazon Pay以外のお支払い方法をご利用いただけます。HTMLタグを使用して登録してください。

Amazon Payボタンの説明コメントは構築メニュー＞ページ設定＞Amazon設定-Amazonゕカウントでお支払いボタン説明コメント(HTMLタグ)設定(スマートフォン)で変更できます。Apple Payボタンの説明コメントは構築メニュー＞ページ設定＞Apple Pay設定ショッピングカート画面-コメント設定-ApplePay設定コメント（HTMLタグ）設定で変更できます。




3-2 スマートフォン：基本設定

注文確認ページ設定

ご注文確認ページで注文確定ボタンを押した時に表示する文言の設定です

注文確定ボタンを押すと、ボタンが消えて注文処理中の文言が表示されます。

機種によっては注文処理中のコメントが表示されない場合があります。

ソーシャルボタン設定

各種ソーシャルボタン表示タグを設定できます。

予約商品が含まれる場合に表示するコメント（スマートフォン）

予約商品を注文する場合に、注文確定ボタンの上ににコメントを表示できます。




注文完了ページ設定

ご注文完了のページに表示する文言の設定です。

購入商品数分繰り返されます。




3-3 スマートフォンデザイン設定


スマーフォン最適化ページのデザインに関する設定

「スマートフォンデザン設定」で設定されるCSS「original_smp.css」は、スマーフォン（最適化）ページのみに適用されるCSSとなります。

1 デザイン設定：スマートフォンページで使用するCSSの設定

<link rel="stylesheet" type="text/css" href="/shop/css/smartphone.css" /><link rel="stylesheet" type="text/css" href="/shop/item/店舗key/smartphone/design/template01/css/original_smp.css" />

futureshopのスマートフォンページのデザン用CSSは、ここへ設定します。設定されたCSSは、外部CSSフゔル「original_smp.css」として読み込まれます。

■スマートフォンページの２つの「CSS」　※「smartphone.css」の編集は行えません。

original_smp.css

futureshopのスマートフォンページでは、２つの外部CSSフゔルが<head>内に記述されています。「デザン設定」で設定するCSSは、「original_smp.css」として２つ目のフゔルとして読み込まれます。

スマートフォンページのソースを確認する方法

スマートフォンページのページソース（HTMLソース）を確認する場合、Firefoxなどブラウザにユーザーエージェントを偽造する「ゕドオン」をンストールし、スマートフォンページを閲覧し、「右クリック」メニューの「ページのソース表示」よりHTMLソースをご確認ください。




3-3 スマートフォンデザイン設定

2 ボタン設定：スマートフォンページで表示されるボタンの設定

「レビュー評価」「購入ステップ」画像以外のボタンは、スマートフォンページでは、初期は、画像ボタンではなくCSSを利用したボタン風デザンになっています。「参照」よりオリジナルボタンに変更、もしくは、CSSを利用しボタンデザンの変更が行えます。

※ボタン画像を登録すると、任意のボタン画像に変更できます。

※レビュー用の画像を、別の画像に差し替えることができます。

※購入ステップ用の画像を、別の画像に差し替えることができます。




商品サムネイル画像「読み込み中表示」用画像

「一覧ページの読み込み速度を早くする」機能（モバルメニュー＞ページ設定＞スマートフォン基本設定画面の「画像の設定」）を利用する場合に使用する、商品サムネル画像が読み込まれる前に表示される「読み込み中表示画像」です。

「一覧ページの読み込み速度を早くする」機能は、モバルメニュー＞ページ設定＞スマートフォン基本設定＞画像の設定の「商品サムネル画像」で設定できます。

読み込み中表示画像初期状態では横80ピクセル×縦80ピクセルのゕニメーションGIF画像を設定しています。登録されている商品サムネル画像の（縦）サズにあわせて作成してください。（推奨）

※ボタン画像を登録すると、任意のボタン画像に変更できます。

※購入ステップ用の画像を、別の画像に差し替えることができます。




3-4 スマートフォン各ページ設定


スマーフォン最適化ページの「タイトル」「ヘッダ・フッタコメント」「上部/下部コメント」の設定

スマーフォン（最適化）ページの「上部/下部コメント」「タトル」の設定が行えます。表示を行う「コメントパターン」は、『コメントパターン一覧』より設定が行えます。

1 スマートフォン各ページ設定

タトルには、下記の置換え文字を使用することが出来ます。・ショップ名を挿入したい場合 … $SHOP$ ・商品名を挿入したい場合 … $ITEM$ （商品検索結果一覧以外で有効）・会員氏名を挿入したい場合 … $NAME$ （ゕカウントサービストップのみ有効）・ニックネームを挿入したい場合 … $NICKNAME$ （会員別レビュー一覧のみ有効）

2 ヘッダ・フッタコメントの設定

スマートフォン基本設定で登録した「ヘッダコメント」「フッタコメント」を選択して設定できます。「利用しない」を選択することもできます。

なお、「商品ページ」「商品グループページ」には、ヘッダコメント1/フッタコメント1が表示されます。

また、トップページに関しては、「スマートフォントップページ設定」で表示するコメントを設定できます。




■ 商品検索結果の場合

3 「上部/下部コメント」の設定

表示を行う「コメントパターン」は、『コメントパターン一覧』より設定したものを選択して表示します。

「アカウントサービストップ（会員マイページトップ画面）」のコメントパターンで、以下の置換え文字を使用することができます。コメントパターンに登録し、「アカウントサービス」ページの上部/下部コメントに設定してください。

会員ステージ名・・・・・・・$MEMBER_STAGE_NAME$

※会員登録直後、または購入がないなど、会員ステージが判定されていない場合は「運用メニュー＞会員管理＞会員ステージ設定」の会員ステージ基本設定「会員ステージ名（判定前）」に設定した名称が表示されます

会員ステージ表示順・・・・・$MEMBER_STAGE_ORDER_NO$

※会員ステージが判定されていない場合は「999」が表示されます。

お客様の利用可能ポイント・・$POINT$氏名・・・・・・・・・・・・$NAME$




3-5 スマートフォンコメントパターン一覧


スマーフォン最適化ページの「上部/下部コメント」の表示内容の設定

スマーフォン（最適化）ページの「上部/下部コメント」へ表示を行う「コメントパターン」の内容の登録は、『コメントパターン一覧』の「パターン新規登録」より行えます。

1 スマートフォンコメントパターン

「コメント名」リンクをクリックすると、コメントパターン設定へ遷移します。登録出来るコメントパターン(スマートフォン)は、最大50件です。




4-1 デスクトップアイコンの作成方法


スマートフォンのデスクトップアイコンの作成方法と、登録について

iPhoneの場合、Safari（ブラウザ）から「ホーム画面に追加」を選択した際に、ホーム画面に表示されるゕコンの設定の設定方法について（iPhoneの場合）

1 サイズ「114ピクセル×114ピクセル」のPNGファイルを作成する

iPhone のホーム画面に表示されるゕコンのサズは、画像処理ソフトなどを利用し「114ピクセル×114ピクセル」のPNGフゔルを作成し、決められたフゔル名「apple-touch-icon-precomposed.png」にして保存します。

2 アイコン「apple-touch-icon-precomposed.png」をアップロードする

作成したPNGフゔルのゕコンフゔル「apple-touch-icon-precomposed.png」をトップページと同階層（public_html内）へゕップロードを行います。※<meta>タグなどの記述の必要はありません。




4-2 作成されたスマートフォンページの確認方法


スマートフォンページは、実機もしくは、シミュレーターなどで確認

スマートフォンの最適化ページは、管理画面のモバルタブにある「ページ設定＞スマートフォン基本設定」にある「利用設定」の「スマートフォンページを利用する」のチェックが入った状態で、実機もしくは、シミュレーター表示確認を行います。※スマートフォンページを利用しない設定の場合、PCページが表示されます。

1 スマートフォン（実機）で確認

iPhone、Androidの違いや画面サズによって、見え方が違いますので、スマートフォン（実機）での表示確認をおすすめします。

2 ブラウザのシミュレーターを利用する

Firefoxなどブラウザに「ゕドオン」をンストールし、ユーザーエージェントの偽装（スマートフォンのゕクセスと偽装）することでスマートフォンページを閲覧することができます。

【ユーザーエージェントを偽装するアドオン】

■User Agent Switcherhttps://addons.mozilla.org/ja/firefox/addon/user-agent-switcher/

ユーザーエージェントを偽装する主なゕドオンを利用する場合は、ンストールが必要です。

＜非公開商品の表示も確認できます＞非公開商品を確認する場合、「プレビュー」状態でウンドウを立上げ、ユーザーエージェントを切替えることで表示確認ができます。


スマートフォン マニュアル...2-20 マ...

Documents

スマートフォンマニュアル...2-20 マ...