レスポンシブデザイン対応テーマ(上級者向け)の利用手順

■本テーマの利用条件


本テーマを利用するには、HTMLやCSSの知識が必要です。
HTML や CSS の記述方法については、ストアーデスクでサポートいたしかねます。
貴社で制作が難しい場合は、Eストアーページ制作代行をご用意しておりますので、ストアーデスクまでご相談ください。

1 レスポンシブデザイン対応テーマ(上級者向け)に変更する

■デザインを決めます

レスポンシブデザイン対応テーマ(上級者向け)に変更する前に、どんなデザインかプレビューで閲覧できます。 このテーマは選択した後に、HTMLやCSSで編集が必要です。各テーマのマニュアルを確認して、貴社で編集できるか確認してみましょう。
マニュアル一覧: ホワイト | ブラウン | ブルー

各テーマのデザインを確認する方法

  1. 管理画面メニュー「 デザイン設定 > テーマ > テーマの選択 」を開き、画面下までスクロールしてください。
    レスポンシブデザイン対応テーマ(上級者向け)の中から、いずれかを選びクリックすると、ポップアップウィンドウが開きます。
  2. 右上の「プレビューを見る」ボタンをクリックすると、別ウィンドウでサンプルのデザインが開きます。
  3. ウィンドウのサイズを変更して、PC、タブレット、スマートフォンの各デザインを確認します。
    上部メニューをクリックすると、トップページ、商品一覧ページ、商品詳細ページのレイアウトも確認できます。



    デザインの確認が終わったら、プレビュー画面を閉じます。
  4. テーマ選択画面の右上の「×」をクリックするとポップアップウィンドウが閉じられ、元の画面に戻ります。
    1~4の手順で、別のテーマのデザインも確認します。


    デザインを確認する時は、テーマ選択画面の「このデザインを選択する」ボタンはクリックしないでください。

1-1 テーマを切り替える事前準備を行う

レスポンシブデザイン対応テーマ(上級者向け)は、他のテーマのHTMLやCSSの構造が異なるため、テーマを変更するとレイアウトが崩れる可能性があります。 テーマ切り替え後、元のデザインに戻せるように、事前準備を行ってからテーマを切り替えましょう。

  • ショップサーブ新規店舗さんの場合
    お店ページを作り込んでいない、開店準備中の新規店舗さんは、事前準備はスキップして構いません。
    次の「1-2 テーマを切り替える 」にすすんでください。
  • カート専用CSSの利用している場合
    カート専用CSSは、レイアウトに影響が出るため非推奨です。
    管理画面メニュー「 デザイン設定 > テーマ > CSSのカスタマイズ 」の画面で、「利用中のテーマから作成する」ボタンをクリックし、表示されたdefault.css の内容を参考にして、カート専用テーマのカスタマイズを行ってください。

■現在の「利用中のテーマ」を確認します

  1. 管理画面メニュー「 デザイン設定 > テーマ > テーマの選択 」にアクセスします。
  2. 画面上の「お店ページで利用中のテーマ」を確認します。

    お店ページで利用中のテーマ(CSSや画像)に戻せるように、
    現在、利用している「テンプレート」と「テーマ名」を覚えておきます。


    【 表示形式 】
    テンプレート名 >テーマ名

    CSSをカスタマイズせずに利用している場合、選択したテーマ名がそのまま表示されます。


    カスタム > カスタムテーマ名
    CSSをカスタマイズしている場合、CSSを編集する時に決めた「カスタムテーマ名」が、お店ページで利用中のテーマとして表示されます。

■現在の「CSSのカスタマイズ」を確認します

  1. 管理画面メニュー「 デザイン設定 > テーマ > CSSのカスタマイズ 」にアクセスします。
  2. 現在、利用しているテーマのCSSを編集している場合、「テーマ1~5」のどれをお店ページに適用しているか確認しておきます。
    また、「編集元」のテンプレートを確認しておきましょう。



    CSS のインポートを利用している場合
    管理画面メニュー「 デザイン設定 > テーマ > CSSのインポート 」で、貴社で作成されたスタイルシートと 画像をインポートしている場合、現在設定している「インポートテーマ名」や「編集元」を確認しておきましょう。



    CSSのカスタマイズが無ければ、この画面は確認する必要はありません。

■現在の「ボタンのカスタマイズ」を確認します

  1. 管理画面メニュー「 デザイン設定 > テーマ > ボタンのカスタマイズ 」にアクセスします。
  2. ボタン・アイコン画像をカスタマイズしているか確認します。

    この画面のボタン・アイコン画像は、選択したテーマに基づいたデザインの画像に切り替わります。貴社で用意した画像に変更している場合は、この画面を印刷しておくと、元に戻しやすいです。

  3. お店ページで利用中のテーマのボタンやアイコン画像を、そのまま変更せずに利用している場合は、この画面を印刷する必要はありません。

■現在の「HTMLのカスタマイズ」をダウンロードします

  1. 管理画面メニュー「 デザイン設定 > テーマ > HTMLのカスタマイズ 」にアクセスします。
  2. 画面下部の「ダウンロード」ボタンをクリックします。
    現在、お店ページで利用しているテンプレートのHTMLのカスタマイズ内容が、圧縮したzipファイル(html_customize_tpls.zip)でダウンロードできます。



    すぐ下のアップロード機能で、ダウンロードしたzipファイルを登録すると元に戻すことができますので、バックアップをとっておきましょう。

    ベーシックテンプレート利用している場合
    管理画面メニュー「 デザイン設定 > トップページ > ヘッダとSEOの設定 」の「HTMLカスタマイズ(ベーシックテンプレート用/上級者向け)」の編集内容は、メモ帳などにバックアップをとっておきましょう。



    「カスタマイズあり」の表示が1つも無ければ、この画面でダウンロードは必要ありません。(ダウンロードボタンは表示されません。)

■自作ページのバックアップをとります

テーマを変更する際に、管理画面からお店ページの更新を行います。
自作ページがある場合は、サーバー内のファイルも更新されるため、バックアップをとっておきましょう。

【 注意例 】
・ 自動生成のトップページ「/index.html」をカスタマイズしている
・ テーマの標準画像に、サーバーで直接上書きしてアップロードしている
・ テーマの default.css に、サーバーで直接上書きして更新している



自作ファイルのサーバーのアップロード先が、「docs」ディレクトリ内の場合、お店ページの更新に伴う影響はありません。また、自作トップページ「/index.htm」は影響ありません。

1-2 テーマを切り替える

ここでは、カスタムテンプレートの「 E-ホワイト 」から「 レスポンシブ(上級者)-ホワイト 」に切り替える手順をご案内します。

■カスタムテンプレートを選択します

 

■テーマを選択します

  1. 画面下部の「レスポンシブデザイン対応テーマ(上級者向け)」より、
    テーマをクリックします。

    ポップアップウィンドウで選択したテーマが開きます。

■デザインをプレビューで確認します

  1. 「プレビューを見る」をクリックします。
    別のタブで、サンプルデザインが開きます。

    トップページ・商品一覧・商品詳細ページの各デザインが確認できます。また、ウィンドウサイズを変更すると、PC、タブレット、スマートフォンの各レイアウトも確認できます。

■必要なデータをダウンロードします

  1. 「デザインパーツダウンロード」をクリックします。
    このテーマを選択後、アップロードするデータを zipの圧縮ファイルで、まとめてダウンロードできます。
  2. 「現在のレイアウト設定ダウンロード」をクリックします。
    管理画面メニュー「 デザイン設定 > トップページ > 全体のレイアウト 」の設定が記載している
    現在のレイアウト(page_layout.txt)をダウンロードできます。


    テーマに切り替え後に元のテーマに戻したい時に、現在の設定に戻すことができます。

■デザインを決定します

  1. 「このデザインを選択する」ボタンをクリックします。

    ポップアップウィンドウが閉じられて、元の画面に戻ります。

■選択したテーマの編集ができるようになります

  1. 選択したテーマは「現在の使用中のテーマ」と表示されます。

    管理画面で編集ができるようになります。

2 必要なデータをアップロードする

必要なデータをアップロードし、レスポンシブデザインを適用します。

■ダウンロード内容を確認します

【 デザインパーツ(ホワイト).zip の場合 】
  1. html_customize_tpls.zip
    管理画面メニュー「 デザイン設定 > テーマ > HTMLカスタマイズ 」から、 アップロードするzipファイルです。
  2. 画像
    画像一括登録するファイルです。
    アイコン・・・・・・ ・・PNG形式の画像ファイル
    サンプル画像・・・・ ・・PNG形式の画像ファイル
    imageupload .csv ・・・ 画像一括登録用のCSVファイル

2-1 画像をアップロードする

ダウンロードした画像ファイルを FTPサーバーにアップロード後、画像台帳に一括で登録する手順をご案内します。

■画像カテゴリを追加します

  1. 画像カテゴリ名に「テーマ名」を入力します。

  2. 「 追加 」ボタンをクリックします。

  3. ダウンロードしたCSVファイル(imageupload .csv) をExcelで開くと D列の「カテゴリ」に選択したテーマ名が入力されています。
    画像カテゴリ名は、テーマ名と 完全一致で入力してください。


    このテーマで使用している画像をカテゴリで検索できるようになり、画像台帳で探しやすくなります。

■画像を一括アップロードします

  1. FTPソフトで、ショップサーブのサーバーに接続します。
    ダウンロードした画像ファイルを「pict」の直下にアップロードします。


    「pict」の中に、さらにフォルダを入れると画像台帳に登録できません。
    画像ファイルだけ をアップロードしてください。  


    FTPサーバーの接続方法は、他のページで詳しくご案内しています。
    >>詳しくは、オンラインサポート「094」で検索


■CSVファイルを登録します

次に、ダウンロードしたCSVファイル( imageupload .csv ) を管理画面から登録します。

  1. レスポンシブデザイン対応テーマ(上級者向け)の選択画面で、
    ダウンロードしたCSVファイル(imageupload .csv)を選択します。
  2. 「登録」ボタンをクリックします。
    管理画面メニュー「 お店運営 > 画像管理 >画像台帳 」にアクセスし、必要な画像がすべて登録されたか確認します。

  3. テーマの選択画面でダウンロードしたCSVファイル(imageupload .csv)には、すでにアップロードに必要な画像情報が入っています。

    画像のファイル名(拡張子png)を変更しなければ、CSVファイルも編集せずにそのままアップロードができます。



2-2 テンプレートをアップロードする

選択した レスポンシブデザイン向けに、カスタマイズしているテンプレートをアップロードします。

■初期値に戻します

  1. 「HTMLを編集」ボタンをクリックします。
  2. 「初期値に戻す」ボタンをクリックします。
    「カスタマイズあり」の表示が消えます。

    同様の手順で、この画面の「カスタマイズあり」の表示は、
    すべて初期値に戻してください。


    既にカスタマイズがある状態で、zipファイルはアップロードしないで下さい。レスポンシブデザインの表示に影響が出る可能性があります。


    「ベーシックテンプレート」から「カスタムテンプレート」のテーマに切り替えは、この画面は初期値の状態です。
    カスタムテンプレート同士のテーマ切り替えの場合、こちらの画面は初期値に戻りません。そのため、初期値に戻す必要があります。

■zipファイルをアップロードします

  1. レスポンシブデザイン対応テーマ(上級者向け)の選択画面で、
    ダウンロードしたzipファイルを選択します。
  2. 「登録」ボタンをクリックしアップロードします。
    正常に完了すると画面上部に「アップロードされました」と表示がでます。

3 全体のレイアウトを設定する

レスポンシブデザイン対応テーマ(上級者向け)は、デザインを綺麗にみせる推奨するレイアウトがあります。

3-1 テーマ推奨のレイアウトを確認する

管理画面に設定する前に、推奨レイアウトと表示コンテンツを確認します。
テーマ名 推奨レイアウト設定 表示コンテンツ
サイド センター
レスポンシブ(上級者)-ホワイト
管理画面の設定を見る
商品のカテゴリ
定休日カレンダー
新着商品
おすすめ商品
ショップからのお知らせ
レスポンシブ(上級者)-ブラウン
管理画面の設定を見る
商品検索
商品のカテゴリ
フリーページのカテゴリ
店長紹介
定休日カレンダー
新着商品
おすすめ商品
ショップからのお知らせ
レスポンシブ(上級者)-ブルー
管理画面の設定を見る
商品のカテゴリ
定休日カレンダー
ショップからのお知らせ

3-2 全体のレイアウトを設定する

■コンテンツを表示します

  1. 表示するコンテンツを「非表示」→「表示」に切り替えます。
  2. 「↓表示レイアウト設定へ反映」をクリックします。


推奨レイアウト以外を設定を行って表示が崩れた場合は、
HTML・CSSの調整を行ってください。

< ホワイト 推奨外の設定例 >
・定休日カレンダー ・・・・・・・表示
・ショップからのお知らせ ・・・・非表示

上記設定の場合、定休日カレンダーが横幅100%で表示します。管理画面メニュー「 デザイン設定 > テーマ > CSSのカスタマイズ 」で調整が必要になります。

■レイアウトを設定します

  1. 「上へ」「下へ」ボタンをクリックして、
    必要に応じて 選択したコンテンツを上下に移動します。
  2. 表示位置が確定したら、「設定を保存する」をクリックします。

  3. 全体のレイアウトの設定について、他のページでご案内しています。
    >>詳しくは、オンラインサポート「037」で検索

4 店舗さん自身でページを編集する

お店ページに表示する商品画像、文言、リンク先を編集してください。

管理画面でHTMLを編集する

管理画面の編集箇所は、各テーマごとにマニュアルをご用意していますのでご確認ください。

レスポンシブ(上級者)ホワイト

レスポンシブ(上級者)ブラウン

レスポンシブ(上級者)ブルー

5 転送設定を行い、お店ページを更新する

スマートフォン端末からアクセスがあった場合は、カート画面のみ、スマートフォンサイト(Eストアーモバイル)が表示されるように転送設定を行います。


レスポンシブデザイン対応テーマは、スマートフォンのアプリ内ブラウザから閲覧した場合、
カート画面において一部正常に動作しないことがあります。こちらの転送設定で、カゴ落ちを防止しましょう。

カート画面のみスマートフォンサイトを表示する


■転送設定を行います

  1. 左から2番目の転送設定をクリックします。

    < 推奨する転送設定 >
    スマートフォン 「カート画面のみスマートフォンサイトを表示」
    パソコン 「すべてPCサイトを表示」
  2. 「リダイレクトの方法の確認と更新(上級設定)」をクリックします。
  3. 「302リダイレクト」または「301リダイレクト」を選択します。


    「302リダイレクト」から「301リダイレクト」の違いを理解した上で切り替えましょう。詳しくはこちらをご覧ください。

  4. 「設定を保存する」をクリックします。


    /docs/.htaccess は、「設定を保存する」ボタンをクリックすると初期化されます。貴社でカスタマイズしている場合、バックアップをとりましょう。


    お店ページの更新を行わないと、お店ページが真っ白になったり、無限ループしたり、ページが正しく表示されないことがあります。 「設定を保存する」ボタンをクリックした後は、「お店ページの更新」が必要です。

■お店ページを更新します

  1. 管理画面の左上「お店ページの更新へ」ボタンをクリックします。
  2. 「注意事項に同意する」にチェックを入れます。
  3. 「編集中のテーマでお店を更新」ボタンをクリックします。
    サイト更新が完了するまでお待ちください。
  4. 更新が完了したら、お店ページを確認してみましょう。


店舗さん自身でページを編集する前に「編集中のテーマでお店ページの更新」を行った場合、サンプルの画像やサンプル文言のままのため、お店ページは未完成です。

お客さん側だけお店ページが閲覧できないようにするには、管理画面メニュー「 お店設定 > 開店・閉店 > 開店・閉店の切替 」で「開店準備にする」または「開店にする (ログイン制限付き)」に設定を行ってください。

■元のカスタムテンプレートに戻す手順

レスポンシブデザイン対応テーマ(上級者向け)から、元のカスタムテンプレートのテーマに戻す手順です。
※2~5の手順では、元のテーマをカスタマイズしてない画面は、スキップして構いません。
  1. 管理画面メニュー「 デザイン設定 > テーマ > テーマの選択 」
    元のテーマ(例:カスタムテンプレートのE-ホワイト)を選択します。
  2. 管理画面メニュー「 デザイン設定 > テーマ > ボタンのカスタマイズ 」
    印刷しておいた画面を見ながら元に戻します。
  3. 管理画面メニュー「 デザイン設定 > テーマ > CSSのカスタマイズ 」
    テーマ1~5の中から、元のカスタムテーマを適用します。
    ※CSSのインポートを利用している場合は、インポートテーマ名を設定します。
  4. 管理画面メニュー「 デザイン設定 > テーマ > HTMLカスタマイズ 」
    「カスタマイズあり」をすべて初期値に戻し、テーマを切り替える前にダウンロードしておいたzipファイル(html_customize_tpls.zip)をアップロードします。
  5. 管理画面メニュー「 デザイン設定 > テーマ > カート専用CSS 」
    テーマ1~5の中から、元のカスタムテーマを適用します。
  6. 管理画面メニュー「 デザイン設定 > トップページ > 全体のレイアウト 」
    テーマ選択画面で事前にダウンロードしておいたファイル(page_layout.txt)を見て、元のレイアウトに戻します。
  7. 編集中のテーマでお店ページを更新します。