デザイン設定
～ ストアロゴ ～

1. ストアロゴ変更画面への遷移方法

• デザイン設定画面左側にある「ストアロゴ」アイコンを押します。
  押下後、ストアロゴ変更画面が表示されます（画面はページ遷移後の状態です）。

2. ストアロゴ変更画面のページ構成

ページ構成（PC表示）

• 
  【ストアロゴ編集エリア】
  ストアロゴの設定を変更できるエリアです。
  変更した内容は画面右側のプレビュー画面に反映されます。
  以降で説明する画面の切り替えもこのエリアで行います。
• 
  【ロゴエリア】
  1で編集した内容はプレビュー画面のこのエリアに反映されます。
  ※メニュー2-4の設定によってロゴの配置が変わる場合があります。
• 
  【表示デバイス切替タブ】
  プレビュー画面で表示されるデバイスを切り替えるタブです。
  タブを切り替えると、1の編集エリアの内容も切り替わります。
  ※この説明ではPC表示を基準にしています。
• 
  【TOP画面個別設定タブ】
  TOP画面の設定を他ページと異なる仕様に変更可能になります。
  ※9. TOP画面だけを個別編集する方法でこのタブの詳細を説明します。
• 
  【プレビューボタン】
  現在の編集内容のプレビュー画面に遷移します。
  遷移先のプレビュー画面は編集画面が消え、ウィンドウ全体で編集内容を閲覧できるようになります。
• 
  【保存ボタン】
  現在の編集内容を保存します。
• 
  【終了ボタン】
  デザインの編集を終了して、TOPページに戻ります。
  ※6の保存を行わない状態で終了すると、変更内容は保存されません。

ページ構成（スマホ表示）

• 
  【ストアロゴ編集エリア】
  ストアロゴの設定を変更できるエリアです。
  変更した内容は画面右側のプレビュー画面に反映されます。
  以降で説明する画面の切り替えもこのエリアで行います。
• 
  【ヘッダーエリア】
  1のヘッダーエリア（6のタブで切り替え）で編集した内容は、プレビュー画面のこのエリアに反映されます。
  ※メニュー2-4の設定によってロゴの配置が変わる場合があります。
• 
  【ロゴエリア】
  1のロゴエリア（6のタブで切り替え）で編集した内容は、プレビュー画面のこのエリアに反映されます。
  ※メニュー2-4の設定によってロゴの配置が変わる場合があります。
• 
  【表示デバイス切替タブ】
  プレビュー画面で表示されるデバイスを切り替えるタブです。
  タブを切り替えると、1の編集エリアの内容も切り替わります。
  ※この説明ではPC表示を基準にしています。
• 
  【TOP画面個別設定タブ】
  TOP画面の設定を他ページと異なる仕様に変更可能になります。
  ※9. TOP画面だけを個別編集する方法でこのタブの詳細を説明します。
• 
  【編集エリア切り替えタブ】
  編集を行うエリア（ヘッダー、ロゴ）を切り替えるタブです。
  ※mobile表示でのみヘッダー設定が必要になります。
• 
  【プレビューボタン】
  現在の編集内容のプレビュー画面に遷移します。
  遷移先のプレビュー画面は編集画面が消え、ウィンドウ全体で編集内容を閲覧できるようになります。
• 
  【保存ボタン】
  現在の編集内容を保存します。
• 
  【終了ボタン】
  デザインの編集を終了して、TOPページに戻ります。
  ※6の保存を行わない状態で終了すると、変更内容は保存されません。

3. 【PC表示】テキスト形式のストアロゴ適用方法

※以降では前述した、タブの設定に応じた手順を説明します。
パソコンサイズの画面でテキスト形式のストアロゴを適用する手順は以下のとおりです。

• 
  TOP画面個別設定タブをOFF（画像のようにタブが灰色になっている状態）にします。
  すでに「OFF」が選択されている場合は、次の手順に進みます。
  ※9. TOP画面だけを個別編集する方法でこのタブの詳細を説明します。
• 
  表示デバイス切替タブを「PC」に切り替えます。
  すでに「PC」タブが選択されている場合は、次の手順に進みます。
• 
  画像を使用するをOFF（画像のようにタブが灰色になっている状態）にします。
  OFFにすると、テキスト入力欄が表示されます。
  すでに「OFF」が選択されている場合は、次の手順に進みます。
• 
  テキストにお店の名前（ロゴエリアに表示させたい文字）を入力します。
  入力した内容はプレビュー画面のロゴエリアに反映されます。
  ※ロゴエリアにテキストを入れない場合は、登録されている店名がデフォルトで表示されます。
• 
  ロゴエリアに表示されるテキストの色を選択します。
  選択した内容はプレビュー画面のロゴエリアに反映されます。
  色は基本の15色と右下の虹色のカラーパレットからカスタムできます。
• 
  ロゴエリアに表示されるテキストのサイズを調整します。
  スライドバーを右に動かすほどテキストサイズが大きくなります。
  選択した内容はプレビュー画面のロゴエリアに反映されます。
• 
  ロゴエリアに表示されるテキストのフォントを選択します。
  使いたいフォントを選択すると、プレビュー画面のロゴエリアのテキストに選択したフォントが適用されます。
• 
  編集内容は画面右上の保存ボタンを押すことで保存されます。
  ※保存ボタンを押さない状態で画面更新や移動、閉じてしまうと、変更内容は保存されません。

4. 【PC表示】画像形式のストアロゴ適用方法

パソコンサイズの画面で画像形式のストアロゴを適用する手順は以下のとおりです。

画面サイズが「画面幅に合わせる」の場合

• 
  TOP画面個別設定タブをOFF（画像のようにタブが灰色になっている状態）にします。
  すでに「OFF」が選択されている場合は、次の手順に進みます。
  ※9. TOP画面だけを個別編集する方法でこのタブの詳細を説明します。
• 
  表示デバイス切替タブを「PC」に切り替えます。
  すでに「PC」タブが選択されている場合は、次の手順に進みます。
• 
  画像を使用するをON（画像のようにタブが水色になっている状態）にします。
  ONにすると、テキスト入力欄が表示されます。
  すでに「ON」が選択されている場合は、次の手順に進みます。
• 
  画像をアップロードにお店のロゴ画像（ロゴエリアに表示させたい画像）をアップロードします。
  入力した内容はプレビュー画面のロゴエリアに反映されます。
  （マニュアルの画像はすでに画像がアップロードされた状態です。）
• 
  画像サイズを画面幅に合わせるに設定します。
  画像サイズを画面幅に合わせるに設定すると、アップロードした画像が表示画面（ウィンドウ）の幅に合わせて拡大・縮小されます。
• 
  編集内容は画面右上の保存ボタンを押すことで保存されます。
  ※保存ボタンを押さない状態で画面更新や移動、閉じてしまうと、変更内容は保存されません。

画面サイズが「画面幅を調整する」の場合

• 
  TOP画面個別設定タブをOFF（画像のようにタブが灰色になっている状態）にします。
  すでに「OFF」が選択されている場合は、次の手順に進みます。
  ※9. TOP画面だけを個別編集する方法でこのタブの詳細を説明します。
• 
  表示デバイス切替タブを「PC」に切り替えます。
  すでに「PC」タブが選択されている場合は、次の手順に進みます。
• 
  画像を使用するをON（画像のようにタブが水色になっている状態）にします。
  ONにすると、テキスト入力欄が表示されます。
  すでに「ON」が選択されている場合は、次の手順に進みます。
• 
  画像をアップロードにお店のロゴ画像（ロゴエリアに表示させたい画像）をアップロードします。
  入力した内容はプレビュー画面のロゴエリアに反映されます。
  （マニュアルの画像はすでに画像がアップロードされた状態です。）
• 
  画像サイズを画面幅を調整するに設定します。
  画像サイズを画面幅を調整するに設定すると、アップロードした画像を後述の設定で拡大・縮小できます。
• 
  スライドバーで画像サイズの調整を行います。
  スライドバーを右に動かすほど画像サイズが大きくなります。
• 
  画像の配置位置を選択します。
  配置位置は、左寄せ、中央寄せ、右寄せのいずれかを選択できます。
• 
  編集内容は画面右上の保存ボタンを押すことで保存されます。
  ※保存ボタンを押さない状態で画面更新や移動、閉じてしまうと、変更内容は保存されません。

5. 【スマホ表示:ヘッダーエリア】テキスト形式のストアロゴ適用方法

スマホサイズの画面でヘッダーエリアにテキスト形式のストアロゴを適用する手順は以下のとおりです。

• 
  TOP画面個別設定タブをOFF（画像のようにタブが灰色になっている状態）にします。
  すでに「OFF」が選択されている場合は、次の手順に進みます。
  ※9. TOP画面だけを個別編集する方法でこのタブの詳細を説明します。
• 
  表示デバイス切替タブを「Mobile」に切り替えます。
  すでに「Mobile」タブが選択されている場合は、次の手順に進みます。
• 
  編集エリア切り替えタブ「ヘッダーエリア」に切り替えます。
  すでに「ヘッダーエリア」タブが選択されている場合は、次の手順に進みます。
• 
  画像を使用するをOFF（画像のようにタブが灰色になっている状態）にします。
  OFFにすると、テキスト入力欄が表示されます。
  すでに「OFF」が選択されている場合は、次の手順に進みます。
• 
  テキストにお店の名前（ロゴエリアに表示させたい文字）を入力します。
  入力した内容はプレビュー画面のロゴエリアに反映されます。
  ※ロゴエリアにテキストを入れない場合は、登録されている店名がデフォルトで表示されます。
• 
  ロゴエリアに表示されるテキストの色を選択します。
  選択した内容はプレビュー画面のロゴエリアに反映されます。
  色は基本の15色と右下の虹色のカラーパレットからカスタムできます。
• 
  ヘッダーエリアに表示されるテキストのサイズを調整します。
  スライドバーを右に動かすほどテキストサイズが大きくなります。
  選択した内容はプレビュー画面のヘッダーエリアに反映されます。
• 
  ロゴエリアに表示されるテキストのフォントを選択します。
  使いたいフォントを選択すると、プレビュー画面のロゴエリアのテキストに選択したフォントが適用されます。
• 
  編集内容は画面右上の保存ボタンを押すことで保存されます。
  ※保存ボタンを押さない状態で画面更新や移動、閉じてしまうと、変更内容は保存されません。

6. 【スマホ:ヘッダーエリア】画像形式のストアロゴ適用方法

スマホサイズの画面でヘッダーエリアに画像形式のストアロゴを適用する手順は以下のとおりです。

画面サイズが「画面幅に合わせる」の場合

• 
  TOP画面個別設定タブをOFF（画像のようにタブが灰色になっている状態）にします。
  すでに「OFF」が選択されている場合は、次の手順に進みます。
  ※9. TOP画面だけを個別編集する方法でこのタブの詳細を説明します。
• 
  表示デバイス切替タブを「Mobile」に切り替えます。
  すでに「Mobile」タブが選択されている場合は、次の手順に進みます。
• 
  編集エリア切り替えタブ「ヘッダーエリア」に切り替えます。
  すでに「ヘッダーエリア」タブが選択されている場合は、次の手順に進みます。
• 
  画像を使用するをON（画像のようにタブが水色になっている状態）にします。
  ONにすると、テキスト入力欄が表示されます。
  すでに「ON」が選択されている場合は、次の手順に進みます。
• 
  画像をアップロードにお店のロゴ画像（ロゴエリアに表示させたい画像）をアップロードします。
  入力した内容はプレビュー画面のロゴエリアに反映されます。
  （マニュアルの画像はすでに画像がアップロードされた状態です。）
• 
  画像サイズを画面幅に合わせるに設定します。
  画像サイズを画面幅に合わせるに設定すると、アップロードした画像が表示画面（ウィンドウ）の幅に合わせて拡大・縮小されます。
• 
  ロゴエリアの背景に表示されるテキストの色を選択します。
  選択した内容はプレビュー画面のロゴエリアの背景に反映されます。
  色は基本の15色と右下の虹色のカラーパレットからカスタムできます。
• 
  編集内容は画面右上の保存ボタンを押すことで保存されます。
  ※保存ボタンを押さない状態で画面更新や移動、閉じてしまうと、変更内容は保存されません。

画面サイズが「画面幅を調整する」の場合

• 
  TOP画面個別設定タブをOFF（画像のようにタブが灰色になっている状態）にします。
  すでに「OFF」が選択されている場合は、次の手順に進みます。
  ※9. TOP画面だけを個別編集する方法でこのタブの詳細を説明します。
• 
  表示デバイス切替タブを「Mobile」に切り替えます。
  すでに「Mobile」タブが選択されている場合は、次の手順に進みます。
• 
  編集エリア切り替えタブ「ヘッダーエリア」に切り替えます。
  すでに「ヘッダーエリア」タブが選択されている場合は、次の手順に進みます。
• 
  画像を使用するをON（画像のようにタブが水色になっている状態）にします。
  ONにすると、テキスト入力欄が表示されます。
  すでに「ON」が選択されている場合は、次の手順に進みます。
• 
  画像をアップロードにお店のロゴ画像（ロゴエリアに表示させたい画像）をアップロードします。
  入力した内容はプレビュー画面のロゴエリアに反映されます。
  （マニュアルの画像はすでに画像がアップロードされた状態です。）
• 
  画像サイズを画面幅に合わせるに設定します。
  画像サイズを画面幅に合わせるに設定すると、アップロードした画像が表示画面（ウィンドウ）の幅に合わせて拡大・縮小されます。
• 
  スライドバーで画像サイズの調整を行います。
  スライドバーを右に動かすほど画像サイズが大きくなります。
• 
  画像の配置位置を選択します。
  配置位置は、左寄せ、中央寄せ、右寄せのいずれかを選択できます。
• 
  ロゴエリアの背景に表示されるテキストの色を選択します。
  選択した内容はプレビュー画面のロゴエリアの背景に反映されます。
  色は基本の15色と右下の虹色のカラーパレットからカスタムできます。
• 
  編集内容は画面右上の保存ボタンを押すことで保存されます。
  ※保存ボタンを押さない状態で画面更新や移動、閉じてしまうと、変更内容は保存されません。

7. 【スマホ表示-ロゴエリア】テキスト形式のストアロゴ適用方法

スマホサイズの画面でロゴエリアにテキスト形式のストアロゴを適用する手順は以下のとおりです。

• 
  TOP画面個別設定タブをOFF（画像のようにタブが灰色になっている状態）にします。
  すでに「OFF」が選択されている場合は、次の手順に進みます。
  ※9. TOP画面だけを個別編集する方法でこのタブの詳細を説明します。
• 
  表示デバイス切替タブを「Mobile」に切り替えます。
  すでに「Mobile」タブが選択されている場合は、次の手順に進みます。
• 
  編集エリア切り替えタブ「ロゴエリア」に切り替えます。
  すでに「ロゴエリア」タブが選択されている場合は、次の手順に進みます。
• 
  ロゴを表示するをON（画像のようにタブが水色になっている状態）にします。
  ONにすると、ロゴエリアにロゴの情報が表示されます。
  すでに「ON」が選択されている場合は、次の手順に進みます。
• 
  画像を使用するをOFF（画像のようにタブが灰色になっている状態）にします。
  OFFにすると、テキスト入力欄が表示されます。
  すでに「OFF」が選択されている場合は、次の手順に進みます。
• 
  テキストにお店の名前（ロゴエリアに表示させたい文字）を入力します。
  入力した内容はプレビュー画面のロゴエリアに反映されます。
  ※ロゴエリアにテキストを入れない場合は、登録されている店名がデフォルトで表示されます。
• 
  ロゴエリアに表示されるテキストの色を選択します。
  選択した内容はプレビュー画面のロゴエリアに反映されます。
  色は基本の15色と右下の虹色のカラーパレットからカスタムできます。
• 
  ヘッダーエリアに表示されるテキストのサイズを調整します。
  スライドバーを右に動かすほどテキストサイズが大きくなります。
  選択した内容はプレビュー画面のヘッダーエリアに反映されます。
• 
  ロゴエリアに表示されるテキストのフォントを選択します。
  使いたいフォントを選択すると、プレビュー画面のロゴエリアのテキストに選択したフォントが適用されます。
• 
  編集内容は画面右上の保存ボタンを押すことで保存されます。
  ※保存ボタンを押さない状態で画面更新や移動、閉じてしまうと、変更内容は保存されません。

8. 【スマホ表示:ロゴエリア】画像形式のストアロゴ適用方法

スマホサイズの画面でロゴエリアに画像形式のストアロゴを適用する手順は以下のとおりです。

画面サイズが「画面幅に合わせる」の場合

• TOP画面個別設定タブをOFF（画像のようにタブが灰色になっている状態）にします。
  すでに「OFF」が選択されている場合は、次の手順に進みます。
  ※9. TOP画面だけを個別編集する方法でこのタブの詳細を説明します。
• 
  表示デバイス切替タブを「Mobile」に切り替えます。
  すでに「Mobile」タブが選択されている場合は、次の手順に進みます。
• 
  編集エリア切り替えタブ「ロゴエリア」に切り替えます。
  すでに「ロゴエリア」タブが選択されている場合は、次の手順に進みます。
• 
  ロゴを表示するをON（画像のようにタブが水色になっている状態）にします。
  ONにすると、ロゴエリアにロゴの情報が表示されます。
  すでに「ON」が選択されている場合は、次の手順に進みます。
• 
  画像を使用するをON（画像のようにタブが水色になっている状態）にします。
  ONにすると、テキスト入力欄が表示されます。
  すでに「ON」が選択されている場合は、次の手順に進みます。
• 
  画像をアップロードにお店のロゴ画像（ロゴエリアに表示させたい画像）をアップロードします。
  入力した内容はプレビュー画面のロゴエリアに反映されます。
  （マニュアルの画像はすでに画像がアップロードされた状態です。）
• 
  画像サイズを画面幅に合わせるに設定します。
  画像サイズを画面幅に合わせるに設定すると、アップロードした画像が表示画面（ウィンドウ）の幅に合わせて拡大・縮小されます。
• 
  編集内容は画面右上の保存ボタンを押すことで保存されます。
  ※保存ボタンを押さない状態で画面更新や移動、閉じてしまうと、変更内容は保存されません。

画面サイズが「画面幅に合わせる」の場合

• 
  TOP画面個別設定タブをOFF（画像のようにタブが灰色になっている状態）にします。
  すでに「OFF」が選択されている場合は、次の手順に進みます。
  ※9. TOP画面だけを個別編集する方法でこのタブの詳細を説明します。
• 
  表示デバイス切替タブを「Mobile」に切り替えます。
  すでに「Mobile」タブが選択されている場合は、次の手順に進みます。
• 
  編集エリア切り替えタブ「ロゴエリア」に切り替えます。
  すでに「ロゴエリア」タブが選択されている場合は、次の手順に進みます。
• 
  ロゴを表示するをON（画像のようにタブが水色になっている状態）にします。
  ONにすると、ロゴエリアにロゴの情報が表示されます。
  すでに「ON」が選択されている場合は、次の手順に進みます。
• 
  画像を使用するをON（画像のようにタブが水色になっている状態）にします。
  ONにすると、テキスト入力欄が表示されます。
  すでに「ON」が選択されている場合は、次の手順に進みます。
• 
  画像をアップロードにお店のロゴ画像（ロゴエリアに表示させたい画像）をアップロードします。
  入力した内容はプレビュー画面のロゴエリアに反映されます。
  （マニュアルの画像はすでに画像がアップロードされた状態です。）
• 
  画像サイズを画面幅を調整するに設定します。
  画像サイズを画面幅を調整するに設定すると、アップロードした画像を後述の設定で拡大・縮小できます。
• 
  スライドバーで画像サイズの調整を行います。
  スライドバーを右に動かすほど画像サイズが大きくなります。
• 
  画像の配置位置を選択します。
  配置位置は、左寄せ、中央寄せ、右寄せのいずれかを選択できます。
• 
  編集内容は画面右上の保存ボタンを押すことで保存されます。
  ※保存ボタンを押さない状態で画面更新や移動、閉じてしまうと、変更内容は保存されません。

9. TOP画面だけを個別編集する方法

この項目では、TOP画面だけを個別編集するの仕様方法について説明します。

• 
  TOP画面だけを個別編集するをON（画像のようにタブが水色になっている状態）にします。
  すでに「ON」が選択されている場合は、次の手順に進みます。
  ※「ON」にすると、2で選択するタブが表示されます。
• 
  1で表示されるタブを「TOP」に切り替えます。
  タブが「TOP」の状態で編集をした場合はTOP画面の固有の設定が可能になります。
  タブを「全体」に切り替えた場合はTOP画面以外の基本の設定を編集可能です。
  1,2のタブ以外の項目は、本項目以前で説明した内容と同様になります。