トップページデザイン

設定画面：ショップデザイン / トップページデザイン

ショップページトップにメインの画像またはスライド画像、およびショップ紹介画像とテキストを表示することができます。
取扱商品の利用イメージ、ショップの雰囲気を表現する大きなイメージ（画像）を表示することで、ショップのコンセプトや売りを購入者に伝えることができます。

トップページイメージ

「イメージタイプ」で、トップページに表示する画像の種類を選択します。

• 画像タイプ：
  1点の画像を登録します。（初期設定）
• スライドショータイプ：
  複数の画像を切り替えて表示します。

画像サイズは任意ですが、目安として下記をご参考ください。
横幅：PCの画面幅（1440〜1920px程度）を想定し、できる限り大きいサイズ
縦幅：バランスを見て400px～800px程度など

画像タイプを選択した場合

• 「画像を追加」ゾーン
  ドラッグアンドドロップまたは「画像を追加」ボタンから、トップページに表示する画像を1点登録できます。
  対応形式：GIF・JPG・PNG・Webp
  ファイルサイズ：2MB以内（専用サーバをご利用の場合は100MB以内）

スライドショータイプを選択した場合

• 「スライドを追加」ボタン
  クリックするとスライドを追加します。
• 「画像を追加」ゾーン
  ドラッグアンドドロップまたは「画像を追加」ボタンから、画像を最大10枚まで登録できます。
  対応形式：GIF・JPG・PNG・Webp
  ファイルサイズ：2MB以内（専用サーバをご利用の場合は100MB以内）
• デモショップで使用している画像サイズは幅1024px 高さ800pxです。複数登録する場合、登録画像サイズはそろえることをおすすめします。

各スライドでは、以下の項目を設定できます。

• 画像名（alt）
  画像の代替テキストを入力します。（半角200文字まで）
• リンク先URL
  画像をクリックした際の遷移先URLを入力します。（半角200文字まで）
• リンク表示
  リンク先の開き方を「同じ画面のまま移動」「別ウィンドウで開く」から選択します。
• 字幕
  スライドショーの下部に表示する文字を入力します。（半角200文字まで、HTMLタグは使用不可）表示する場合は、「スライドショー詳細設定」で字幕表示「あり」を選択してください。
• 登録済みの画像右上 3点リーダー
  「画像を差し替え」より、ロゴを変更することができます。「画像を削除」より、削除することができます。

• 表示順の変更（6点リーダー・「表示順」）
  スライド左側のアイコン（6点リーダー）をドラッグすると、並べ替えができます。
  スライドが多い場合、「表示順」で移動先の番号を指定し、「移動」ボタンをクリックして移動できます。
  
   
• スライド右上の「削除」アイコン
  クリックすると、確認のうえスライドを削除できます。
  

スライドショー詳細設定

• 停止時間：
  画像が切り替わるまでの停止時間をミリ秒で設定します。（1～99999の半角数字）
• スライドの速さ：
  画像が切り替わる速さをミリ秒で設定します。（1～99999の半角数字）
• スライド方法：
  「横スライド」「縦スライド」から選択します。横スライドは右から左へ、縦スライドは下から上へ切り替わります。逆方向の切り替えはできません。
• 字幕表示：
  「あり」にすると、各スライドに入力した字幕をスライドショー下部に表示します。表示方法の変更はできません。
• 矢印表示：
  「あり」にすると、スライドショーの両端に画像を切り替える矢印を表示します。

ショップ紹介コメント

トップページに表示するショップ紹介文を入力できます。（半角10,000文字まで）
※旧：トップページデザインの設定です。

• 「HTML入力」「リッチテキスト」の2つのモードを切り替えて入力できます。（初期表示：HTML入力）

ショップ紹介画像

ドラッグアンドドロップまたは「画像を追加」ボタンから、ショップ紹介コメント内の [MAINLOGO] タグの位置に表示する画像を、1点登録できます。
※旧：トップページデザインの設定です。

• 対応形式：GIF・JPG
• ファイルサイズ：2MB以内（専用サーバをご利用の場合は100MB以内）

▼画像を登録済みの場合

• 登録済みの画像右上 3点リーダー
  「画像を差し替え」より、ロゴを変更することができます。「画像を削除」より、削除することができます。

• 設定を保存

上記の設定を変更する際は、必ず「更新」ボタンをクリックして反映してください。

トップページイメージの表示例

スライドショータイプ例

デモショップをみる

スライドショータイプを設定すると、ワイド幅の動きがあるイメージを表示することができます。

画像タイプ例（ベーシックモード）

デモショップをみる

ワイド幅の静止画像をトップに表示することができます。

運営ノウハウ集

■スライドショー

• スライドショーで左右の画像をチラ見せしたいときの、カスタマイズ方法！
• スライドショーの画像サイズは何ピクセルにすればいいの？「目安のサイズを教えて！」

■旧デザインモード：ベーシックモード

• スライドショーを囲むシャドウ（グレーの線）を消したい
• スライドショーのサイズを小さくしたい（対象テンプレート: WIDELY／ENKEL）
• スマホでスライドショーのサイズを小さくしたい（対象テンプレート: Wabisabi）