BASE管理画面->デザイン編集->画面左側「ショップロゴ」からサイトのロゴを設定できます。

ロゴ画像を使用する

ONにすると「ロゴ画像アップロード」が表示され、任意の画像をアップロードして使用できるようになります。
OFFの場合は、「ロゴタイトル」に任意の文字を入力し、「カラー」から文字色を調整することができます。

オリジナルロゴを作成

「ショップロゴ作成App」をインストールしている場合は「オリジナルロゴを作成」と表示され、自分でロゴ画像を簡単に作ることができます。

※「ショップロゴ作成App」の詳細についてはBASE Appsのページからお調べください。

BASE管理画面->デザイン編集->画面左側「背景」からサイトの背景を設定できます。

カラーから選ぶ

好きな色を選んで指定することで背景色が変更されます。

パターンから選ぶ

BASEが用意しているパターン画像から好きなものを選択することでパターン画像が背景に設定されます。
「+」ボタンから任意の背景画像をアップロードして設定することも可能です。
「背景画像を繰り返す」をONにすると画像を繰り返し表示します。
OFFにすると画像を画面固定表示します。

サイトの配色を一括設定できる項目を用意しています。
4色を設定するだけでサイト全体をお好きな配色にできます。

テキストカラー

サイト全体の基本的なテキストの文字色を変更できます。

リンクカラー

ブログ記事やショップ説明などの文章内にあるテキストリンクの基本文字色を変更できます。

ボタンカラー：背景

商品をさらに表示する「VIEW MORE」ボタンや、商品ページの購入ボタン、お問い合わせフォーム のボタンなど、サイト全体で使っているボタンの背景色を一括で変更できます。

ボタンカラー：文字

商品をさらに表示する「VIEW MORE」ボタンや、商品ページの購入ボタン、お問い合わせフォーム のボタンなど、サイト全体で使っているボタンの文字色を一括で変更できます。

ロゴのサイズ調整が可能です。
PC／スマホそれぞれでヘッダー・フッターで個別に調整できます。

PC ヘッダーロゴサイズ

PC表示時のヘッダーロゴの表示サイズを調整できます。
最大サイズを100%として10%~100%の間で大きさを調整できます。

PC フッターロゴサイズ

PC表示時のフッターロゴの表示サイズを調整できます。
最大サイズを100%として10%~100%の間で大きさを調整できます。

スマホ ヘッダーロゴサイズ

スマホ表示時のヘッダーロゴの表示サイズを調整できます。
最大サイズを100%として10%~100%の間で大きさを調整できます。

スマホ フッターロゴサイズ

スマホ表示時のフッターロゴの表示サイズを調整できます。
最大サイズを100%として10%~100%の間で大きさを調整できます。

「ショップロゴ」でロゴを画像ではなくテキストに設定した場合にフォントサイズや字体の変更が可能です。
ヘッダー・フッターで個別に調整できます。

テキストロゴ：字体

欧文フォント10種類、和文フォント5種類の中から選べます。

ヘッダーロゴ：文字サイズ

ヘッダーロゴの文字の大きさをPC・スマホそれぞれ5段階で変更できます。

フッターロゴ：文字サイズ

フッターロゴの文字の大きさをそれぞれ5段階で変更できます。

テキスト全体のフォント（字体）を設定できます。

テキスト全体に明朝体を使う

ONにするとテキスト全体を明朝体にします。
OFFにするとゴシック体になります。

明朝体：種類

「テキスト全体に明朝体を使う」をONにした時に明朝体の種類を変更できます。
「游明朝」「さわらび明朝」「はんなり明朝」「こころ明朝」「Noto Serif」の5種類から選択できます。
※「テキスト全体に明朝体を使う」をONにしている場合のみ変更が反映されます。

PC表示時は左側メニュー、スマホ表示時は左側からスライドして出てくるメニュー内のSNSアイコンについての設定ができます。

SNSアイコンを表示にする

ONにすると表示、OFFにすると非表示になります。

SNSアイコンを白にする

ONにすると、SNSアイコンの色を白にします。
OFFにするとデフォルトの黒になります。
背景によって視認性が悪くなる場合があるので、背景を変えた場合に見やすい方に合わせてください。

PC表示時は左側、スマホ表示時は左側からスライドして出てくるメニューの設定ができます。

スマホ：背景色

スマホ表示時に左側からスライドして出てくるメニューの背景色を変更できます。
デフォルトは#ffffffになります。

スマホ：文字色

スマホ表示時に左側からスライドして出てくるメニューの文字色を変更できます。
デフォルトはテーマカラーの「テキストカラー」の項目で設定した色になります。

PC：背景色

PC表示時のサイドメニューの背景色を変更できます。
デフォルトは#ffffffになります。

PC：文字色

PC表示時のサイドメニューの文字色を変更できます。
デフォルトはテーマカラーの「テキストカラー」の項目で設定した色になります。

文言変更

ナビゲーションに表示されるページ名を任意のものに変更できます。
例えば「ABOUT」を「ショップ情報」など任意の文言に変更できます。
変更できるのは「HOME」「ABOUT」「BLOG」「NEWS」「COMMUNITY」「CONTACT」「FAQ」「COIN」の文言です。
※リンクの順番を変更する機能はありません。
※文言が長すぎると改行したり崩れることがあります。できるだけ短い文言をオススメします。
※「ナビゲーションを変更可能にする」をONにしている場合のみ変更が反映されます。

メニュー追加リンク❶〜❺：テキスト

メニューに任意のリンクを5つまで追加できます。
追加するリンクのテキストをここに設定します。
※空欄の場合はリンクが表示されません。表示するには「テキスト」と「リンクURL」が必須になります。

メニュー追加リンク❶〜❺：リンクURL

メニューに追加するリンクのURLを設定します。
※空欄の場合はリンクが表示されません。表示するには「テキスト」と「リンクURL」が必須になります。

メニュー追加リンク❶〜❺：リンクを新規ウィンドウで開く

ONにするとボタンをクリックした時にリンク先を別ウィンドウで開きます。

バナーを表示

メニューの下の方にバナー画像を5枚まで追加できます。 ONにすると表示、OFFにすると非表示になります。

スクロール時に画面に追従させる

「バナーを表示」をONにしてバナーを表示させている場合、
ONにすると、PC表示時に画面をスクロールしていきバナーに到達したときに画面固定させます。
OFFにすると画面に固定しません。
縦に長いページでサイドメニューの左上に追従する形になり、余白を有効に使えます。

❶〜❺バナー画像

各バナー用の画像をアップロードできます。
推奨サイズ：横600×縦270（px）
縦サイズに関しては特に制限はありませんので、縦長のバナーを配置することも可能です。
ただし、縦長の場合は「スクロール時に画面に追従させる」を設定すると画面サイズを超えると途切れる場合がありますのでご注意ください。

❶〜❺リンクURL

各バナーのリンク先のURLを入力します。

❶〜❺リンクを新規ウィンドウで開く

ONにすると各バナーのリンクを新規ウィンドウで開きます。
OFFにすると通常のページ遷移になります。

TOPページのメインビジュアルになるスライド画像の設定ができます。
スライドは表示非表示の変更がボタン一つででき、スマホ・PC別々の画像で最大4枚設置可能です。

スライド①〜④：PC画像

PC用のスライド画像を設定できます。
推奨サイズ：横2280×縦1680（px）
※BASEでアップロードできる画像容量の上限は1MBですので、おさまらない場合は圧縮・または縮小してください。

スライド①〜④：SP画像

スマホ用のスライド画像を設定できます。
空にするとPC用の画像が適用されます。
PCに合わせた画像を使い回すと、画面の比率が違うので見えづらくなる場合があります。そのためスマホに最適化した画像を使うことをおすすめします。
推奨サイズ：横750× 縦720（px）
※BASEでアップロードできる画像容量の上限は1MBですので、おさまらない場合は圧縮・または縮小してください。

スライド①〜④：代替テキスト

画像の説明（alt属性に入れる文言）を設定できます。
特に画面上のどこかに表示されるものではありませんが、もしも画像が表示されなかった場合に代替でこちらがテキスト表示されます。
また、Googleの画像検索のキーワードとしても使われます。

スライド①〜④：リンク

URLを入力してスライドにリンクURLを付けられます。

スライド①〜④：リンクを新規ウィンドウで開く

ONにするとリンクを新規ウィンドウで開きます。
OFFにすると通常のページ遷移になります。

BlogApp利用時に「この記事を固定にする」機能でTOPに記事タイトルを表示させることができます。

価格や各種タグの文字色など商品一覧周りの設定ができます。

TOPページ：商品一覧を表示

ONにするとTOPページの商品一覧を表示にします。
OFFにすると非表示になります。
TOPページから商品一覧をなくしてコンパクトなサイトに見せたい場合にお使いください。

SALEタグ：文字色（セールApp利用時）

セールApp利用時に「SALE」と表示されるタグの文字色を変更できます。
周りの枠線も同じ色に変わります。
デフォルトは#e47171です。

セール価格：文字色（セールApp利用時）

セールApp利用時に割引が適用された商品の商品価格の文字色を変更できます。
デフォルトは#e47171です。

割引タグ：文字色（セールApp利用時）

セールApp利用時にし、割引が適用された商品の商品価格の横に付く「10%OFF」などの割引タグの文字色を変更できます。
周りの枠線も同じ色に変わります。
デフォルトは#e47171です。

最大4件まで簡単なお知らせを表示できます。

NEWSを表示

ONにすると表示、OFFにすると非表示になります。

❶~❹ 日時

NEWSの更新日時を任意のテキストで入力します。

❶~❹ 詳細

NEWSの詳細を任意のテキストで入力します。

❶~❹ リンク先URL

NEWSにリンクを付けたい場合にこちらにURLを入力します。

❶~❹ リンクを新しいタブで開く

ONにするとリンクを新規ウィンドウで開きます。
OFFにすると通常のページ遷移になります。

BLOG App利用時にTOPページに表示できるブログリストの設定ができます。
表示の順番は新着順となります。（変更不可）
表示件数は最大4~10件から選択できます。

ブログリストを表示

ONにすると表示、OFFにすると非表示になります。

最大記事数

表示する記事数の最大値4~10記事の間で変更できます。

ABOUTページに表示されるメイン画像の設定ができます。

メイン画像を表示

ONにすると表示、OFFにすると非表示になります。

メイン画像

ABOUTページのメイン画像をアップロードできます。
推奨サイズ：横1560×縦1100（px）
※BASEでアップロードできる画像容量の上限は1MBですので、おさまらない場合は圧縮・または縮小してください。

メイン画像 代替テキスト

画像の説明（alt属性に入れる文言）を設定できます。
特に画面上のどこかに表示されるものではありませんが、もしも画像が表示されなかった場合に代替でこちらがテキスト表示されます。
また、Googleの画像検索のキーワードとしても使われます。

ABOUTページにショップのコンセプトをキャッチコピーと概要説明のセットで掲載できるエリアです。

コンセプトを表示

ONにすると表示、OFFにすると非表示になります。

キャッチコピー(brタグで改行)

キャッチコピーの内容を任意のテキストで入力します。
brタグを使うことで任意の位置で改行できます。

キャッチコピーを縦書きにする

ONにするとキャッチコピーを縦書きにします。
OFFにすると横書きになります。

概要

キャッチコピーの下にテキストを入力できます。
brタグを使うことで任意の位置で改行できます。

ABOUTページの「ショップ説明」の表示設定ができます。
このエリアは、BASE管理画面->右上->ショップ設定->ショップの説明に記載した情報が表示されるエリアです。「ショップ設定」に設定した「ショップ名」が見出しになり、「ショップ説明」が説明文になる形で表示されます。

ABOUTページ：ショップ情報を表示

ONにすると表示、OFFにすると非表示になります。

ABOUTページに任意のリンクを見出しとセットで5件まで掲載するエリアを設定することができます。

ABOUTページ：リンクエリアを表示

ONにすると表示、OFFにすると非表示になります。

❶〜❺ リンク：見出し

リンクの上に見出しを付けることができます。
リンク先のページ名やサイト名などを付けることでそのリンクがどこのページに飛ぶのかわかりやすくなります。

URL

リンクURLをここに入力します。
※空欄の場合は「見出し」も含めて表示されません。

リンクを新規ウィンドウで開く

ONにするとボタンをクリックした時にリンク先を別ウィンドウで開きます。

ABOUTページにFAQ（よくある質問）エリアを表示できます。
最大10件まで追加できます。

FAQを表示（ABOUTページ下）

ONにするとABOUTページ下にFAQエリアを表示させます。
OFFにすると非表示になります。

❶〜➓ FAQ：質問1〜10

質問内容を入力します。

❶〜➓ FAQ：答え1〜10

質問内容の答えをテキストで入力します。
リンクを入れたい場合はhtmlを使用します。
<a href="リンク先URL">リンクにするテキスト</a>の形式で入力するとリンクになります。
<a href="リンク先URL" target="_blank" rel="noopener">リンクにするテキスト</a>の形式で入力すると新規ウィンドウで開くリンクになります。

購入ボタンの配色を任意で変更できます。

購入ボタン：文字色

背景色

購入ボタンの配色を変更できます。

再入荷ボタン：文字色

再入荷ボタン：背景色

在庫切れの際に表示される「再入荷案内」のボタンの配色を変更できます。

お知らせ希望ボタン：文字色

お知らせ希望ボタン：背景

販売開始前ボタン：文字色

販売開始前ボタン：背景色

販売期間設定Appを利用の際に、販売期間前に表示される「販売開始前」のボタンの配色を変更できます。

お問い合わせボタン：文字色

お問い合わせボタン：背景色

販売期間設定Appを利用の際に、販売期間終了後に表示される「販売終了」のボタンの配色を変更できます。

商品ページの下に表示される「関連商品」の表示設定ができます。

関連商品を表示

ONにすると表示、 OFFにすると非表示になります。

見出し

関連商品の見出しを任意のテキストに変更できます。

メールマガジンAppをインストールするとフッターの上に自動的にメールマガジン登録フォームが設置されます。
テーマ編集から説明文の変更が可能です。

説明文

説明文を変更できます。
デフォルトは「新商品やキャンペーンなどの最新情報をお届けいたします。」となっています。

お問い合わせページの必須ラベル・ボタンの配色を変更できます。

必須ラベル：文字色

必須ラベル：背景色

お問い合わせフォームの項目の「必須」と書かれているラベルの配色を変更できます。

ボタン 文字色

ボタン 背景色

お問い合わせフォームのボタンの配色を変更できます。

フッター：ロゴを表示する

ONにするとフッターにロゴを表示、OFFにすると非表示にします。

独自のスタイルシートを追加する【上級者向け】

こちらにCSSを貼り付けるとstyleタグが追加され、CSSを上書きできます。独自拡張になりますので上級者向けです。意味がわかる方のみご使用ください。
こちらで用意しているCSSファイルの詳細についての質問には、お問い合わせいただいても細かくお答えできかねます。上書きする場合は確かな知識をお持ちの方が自己責任でお願いいたします。

スマートフォン用のデフォルトテーマを使用する

BASE側で用意されているデフォルトのスマートフォン用テーマを使う設定です。
「Vegetable」においてはレスポンシブ対応しておりますので、こちらはチェックを外すことをオススメします。