基本デザイン

 

目次

 

【1】基本のデザインとは

ここでは、サイト全体に共通する部分のデザインを設定します。
「デフォルト」を使用することで、簡単に設定いただけます。
また、「カスタム」や「HTML」を使用し、こだわりのデザインを作成いただくことも可能です。

 

「カスタム」や「HTML」で設定した内容は、「デフォルト」に戻した場合も記録されたまま保持されます。
切り替えることで、いつでも作成したオリジナルデザインに戻すことが可能です。
※入力内容を記録する場合、必ず「更新」ボタンを押して状態を保存してください。

頻繁に使用されるHTMLと色の選択については、別ページで解説しております。

 

【2】デザインを設定する

 

テーマ

ショップ全体のデザインテーマを設定します。

サイト背景

サイトの背景を変更します。プルダウンリストでデフォルト・簡易設定を切替え可能です。

デフォルト デフォルトの場合、背景色は「#ffffff」になっています。

簡易設定の場合、さらに2通りの設定があります。

背景色

下記画像の赤枠内の背景全体の色を変更できます。

フォームをクリックすると色選択ができます。

色の選択については、こちらをご覧ください。

背景画像

背景に任意の画像を選択できます。

画像の選択方法は「ファイルマネージャー」をご確認ください。

表示方法は4種類から選べます。(左上詰めで表示)

繰り返さない:画像1枚だけ表示

繰り返し:ページ全体に並べて表示

横方向繰り返し:横に1行分並べる

縦方向繰り返し:縦に1列分並べる

ヘッダー フリー HTML スペース

ヘッダー内に任意のHTMLを挿入できます。バナー、リンク、告知などを自由に設置できます。

ヘッダーデザイン

ヘッダーメニューの上部に表示される部分のデザインです。デフォルト・HTML使用を切替え可能です。

デフォルト

簡単にロゴ表示を変更できます。

  1. 画像パス
  2. 画像の設定方法は「ファイルマネージャの使い方」をご覧ください。

  3. リンク先URL
  4. ヘッダーロゴのクリック先を設定できます。空欄時はトップページへ遷移します。

  5. altテキスト
  6. 画像を読み込めない場合に表示される代替テキストです。未設定時は「ショップネーム」が表示されます。

HTML使用

HTMLで自由にデザインできます。(HTML使用

※HTML設定時、599px以下のデフォルトのハンバーガーメニューは利用できません。

ヘッダーメニュー(600px以上)

PC表示時のグローバルメニューを編集できます。(デフォルト/カスタム/HTML)

デフォルト 表示順は固定です。変更する場合は「カスタム」または「HTML」を選択します。
カスタム

最大6項目を表示できます。空欄の項目がある場合、左詰め表示されます。

  1. テキスト
  2. メニュー名として表示されます。

  3. リンク
  4. クリック時の遷移先URLです。

HTML使用 HTMLにて自由に記述できます。(HTML使用
ヘッダーメニュー(599px以下)

599px以下では格納式(ハンバーガー)メニューが表示されます。

ヘッダーデザインがHTMLの場合、デフォルトのハンバーガーメニューは使えません。
599px以下側もHTMLで作成が必要です。

デフォルト 表示順は固定です。変更する場合は「カスタム」または「HTML」を選択します。
カスタム

最大6項目まで表示できます。

下図赤枠(会員メニューより上)の部分のみ編集可能です。

  1. テキスト
  2. メニュー名です。

  3. リンク
  4. クリック時の遷移先です。

HTML使用 HTMLにて自由に作成できます。(HTML使用
フッター

ページ最下部のリンク/表記エリアの表示内容を編集できます。

デフォルト 表示順は固定です。
カスタム

6項目まで表示可能です。

  1. テキスト
  2. メニュー名として表示されます。

  3. リンク(絶対パス)
  4. クリック時の遷移先URLです。(https:// から入力)

HTML使用 HTMLで自由に記述できます。

「サイトマップ」は自動生成のため編集不可です。

URLはフッターメニューがデフォルト時のみ自動表示されます。

カスタム/HTMLで導線を作る場合、デフォルトでURLを確認しコピーしてご利用ください。

表示グループ限定フリースペース1〜3

任意のHTMLやテキスト、画像などを自由に配置できる共通フリースペースです。
指定した会員グループのみ閲覧できるコンテンツを設定できます。

ファビコン

サイトのタブなどに表示されるアイコンを設定できます。

アップルタッチアイコン

スマホのホーム画面に追加した際に表示されるアイコンです。