HOME › #1 全体設定

#1 全体設定
カラー、ヘッダー、サイドバー、フォント、ウィジェット

カラー設定

背景色（基本設定） メインの背景色は「テーマ設定」ではなく、デザイン設定画面の左側にある「背景」というところから設定します。
メッセージApp（App利用時） メッセージAppをインストールしている場合に表示されます。チャットを開くアイコンの色を設定します。
テキストカラー サイト全体のテキストカラー。背景色の上にのる色になります。
アクセントカラー 「カートに入れる」ボタン、各所のデザインパーツのカラーです。目を引く目的で目立つ色がおすすめです。あえて背景色などと少しだけトーンを変えた類似色にすることで、クールな印象にもなります。
⌊ アクセントカラー上の文字色 ボタンなど、アクセントカラーに文字がのる場合の文字色を指定します。アクセントカラーの濃淡に応じて読みやすい色を指定します。
セール価格テキストカラー セール価格表示の文字色を設定します。赤などにしてチラシ感を出しても良いですし、テキストカラーと同色にして落ち着いた感じにしても良いです。
コンテンツエリアに白背景を敷く コンテンツエリアに白枠の背景を敷きます。一番最初に設定した背景に奇抜な色やパターン画像を選びつつ、コンテンツは読みやすく白背景にしたい場合にONにします。この白枠の角丸は、別項目で設定する「かどまるオプション」が反映されます。
ヘッダーカラー サイトのヘッダーの色を設定します。全てのページで目に入るため、ショップのイメージカラーとなります。もししっかりとデザインされたロゴ画像などがある場合、イメージカラーはそちらに任せ、白や極めて薄い色に留めておくことで、色が散らかりにくくなります。

※ヘッダー部分の各パーツ色は、このヘッダーカラーをベースにした濃淡色によって表現されます。
※ヘッダーカラーを「真っ白」にする場合、2つ下の項目をチェックしてください。
⌊ ヘッダー上のテキストカラー ヘッダーカラーの上にあるナビゲーションなどの文字色です。
⌊ 配色コントラスト ヘッダーは指定されたヘッダーカラーを元に濃淡をつけて配色されます。希望の色で濃淡が分かりにくい場合に調整できます。

・色差を強く：ヘッダーカラーが薄い場合により見やすくなる場合があります。
・色差を弱く：ヘッダーカラーが濃い場合により見やすくなる場合があります。
・ヘッダーカラーが「真白」の場合、各パーツを識別する濃淡表現ができません。その場合「ヘッダーカラーが真白の場合」を選択することで薄いグレーで各パーツの境界を示します。

ヘッダーの色設定はフッターにも反映されます。1つカラーを下に配色されることで、統一感のあるサイトデザインが可能です。

ヘッダーデザインのオプションとして、ヘッダーエリアに画像を配置することもできます。その他設定のヘッダー背景画像をご参照ください。

ヘッダーのアイコンやリンク設定

ヘッダーとはショップ名、ナビゲーションがある上部のエリアです。

◾ヘッダー：ロゴレイアウト ショップロゴを中央に配置するか、左に寄せて配置するかを設定します。
⌊ カートアイコン カートのアイコンデザインを「カート」「バッグ」から選択できます。アイコンをバッグにしたとしても、ラベル名は「カート」となります。これはカートに進んだ後などBASEのシステム全体を通して呼び名を統一するためです。
⌊ アイコンナビ テキストラベル ヘッダーにあるアイコン（メニュー、カート、メンバーシップ）でのテキストラベルについて、PCの大きな画面では必ず表示されますが、スマホ/タブレットの際にアイコンのみにするか、小さくテキストラベルを付けるか選択できます。
◾️ヘッダーリンク：Aboutへのリンクを表示 ヘッダーの右端にAboutページへのリンクを表示します。表示テキストはAboutページ名称が反映されます。
⌊ ヘッダーリンク：フリー項目 Aboutページへのリンク以外に、任意のテキストとURLのリンクを設定できます。ECサイトとは別に企業サイトなどがある場合などに利用できます。このリンク項目はサイドバーの最下部にも表示されます。
⌊ フリー項目リンクURL リンク先のURLを指定します。
⌊ フリー項目を別ウィンドウで開く フリー項目リンクを別ウィンドウで開くかどうかを選択します。
⌊ ヘッダーリンクタイプ ヘッダーリンクのデザインを選択します。

⚠️ ヘッダーリンクの有無とレイアウトの関係について

ヘッダー内の要素が多すぎることによるレイアウト崩れを防ぐため、表示領域の狭いスマホ/タブレットサイズでは次のようになります。

・「Aboutリンク」、または「フリー項目リンク」どちらか1つでも設定されている場合、スマホ/タブレットサイズでは「ロゴが左寄せ」になります。

・「Aboutリンク」と「フリー項目リンク」両方が設定されている場合、スマホ/タブレットサイズでは「Aboutリンク」だけの表示になります。（「フリー項目リンク」はサイドバーに常に表示されています。）

スマホサイズでは余白が少ないため、ショップロゴとリンク項目が入りきらない可能性があります。必ずショップロゴとの兼ね合いを考慮して設定してください。

ヘッダーオプション：人気の検索ワード
検索バーの下に人気キーワードを並べることもできます。その他設定の人気のキーワードをご参照ください。

サイドバーの設定

PCサイズ以上の広い画面ではサイドバーを表示できます。スマホ/タブレット画面でも「メニュー」ボタンからサイドバーと同じ内容のパネルを引き出すことができます。これを「ドロワー（引き出し）ナビ」と呼びます。

【サイドバー】表示させるページ（PC表示時） PCでの表示の際、サイドバーを表示させたいページを選択できます。

トップ・カテゴリーページのみ表示：トップページとカテゴリーページでのみサイドバーを表示し、商品を探しやすくします。（検索結果ページも含まれます）

全てのページで表示：全ページでサイドバーを表示します。

全てのページで不要（ドロワーのみ）：サイドバーは使用せず、全てのページでコンテンツエリアを大きく表示します。
⌊ スクロールタイプ（PC表示時） サイドバーが表示されている状態でメインコンテンツが縦に長い場合、スクロールした際にサイドバーがどうなるかを設定します。

スクロールして上端で停止：サイドバーが上端で一旦停止し、コンテンツエリアが下端に達した後にサイドバーが下端までスクロール

下端までスクロールして停止：コンテンツエリアと同じだけスクロールしながら、サイドバーは下端で固定表示

通常スクロール：コンテンツエリアと同じだけスクロール
⌊ カテゴリーナビ見出し カテゴリーナビの見出し
⌊ カテゴリーナビボリューム調整 通常/コンパクト/ラージ

カテゴリーナビの項目間の上下スペースを広くしたり、狭くしたりできます。カテゴリー項目が少な目であれば広くした方が見やすくなります。カテゴリーが多い場合は狭くした方が画面に収まって一覧しやすくなります。
⌊ カテゴリーナビ文字太さ カテゴリーナビの文字を太文字、通常から選択できます。
⌊ ショップ情報ナビ見出し ショップ情報ナビの見出し。「決済案内」「配送」「よくある質問」はAboutページにてその内容を設定することで、ナビゲーションに表示されます。リンク先はAboutページの該当箇所にスクロールとなります。
⌊ カテゴリーアイコン表示 サイドバーにカテゴリーアイコンを表示するかどうかを設定します。画像のアップロードは「App設定」にて行います。（ONにすると画像を設定していない場合でもグレーの代替画像が表示されますので、カテゴリーナビに表示される大カテゴリーには全て画像を設定してください。）
⌊ ナビ項目追加：フリー1〜2 (Aboutの下) サイドバーショップナビに任意の項目を追加できます。ショップページ内の特定商品やブログページ、また別の提携サイトなどをリンク先とすることができます。また「Blogでページ追加機能」を活用し、固定ページのように見せて「ラッピングガイド」のようなコンテンツを作成することもできます。
⌊ フリー1〜2 リンクURL リンク先URLを入力
⌊ ショップ情報ナビ文字太さ ショップ情報ナビの文字太さ
◾️ドロワーナビにショップロゴを表示 ドロワーナビにワンポイントとしてショップロゴを表示できます。
◾️サイドバー：画像バナー サイドバーに画像バナーを設置できます。
⌊ 画像バナー リンク先 バナー画像からのリンク先URL
⌊ 画像バナー 表示位置 以下の数字にてバナーの場所を指定できます。（数字は半角、スペースなどは入れないようにしてください。）

0：一番上 / 2：カテゴリーナビの下 / 4：ショップガイドナビの下 / 10：一番下

サイドバーのカテゴリーナビには、カテゴリーごとのアイコン画像を設定することができます。「App設定 > カテゴリー画像の設定」にて詳しく解説しています。

ブログApp新着表示の設定は「App設定 > ブログApp：新着をサイドバーに表示」をONにします。

商品一覧サムネイルの比率、列数の設定

商品一覧のサムネイル画像サイズなどを調整できます。サムネイル同士の隙間(マージン)や角丸の有無によって、[かっちり/やわらか]など違った印象にすることができます。

◾️商品一覧：サムネイル縦横比 サムネイルの縦横比を選択できます。正方形、3:2の縦横、縦長はインスタサイズ4:5。この設定値は商品画像としてアップロードされた画像を表示する際に全体統一の縦横比に切り取ることを意味します。切り取って欲しくない場合は「そのまま」を選択してください。
⌊ サムネイル列数 PC表示でのサムネイル画像の列数を「3/4/5列」から選択できます。スマホ表示にて「2列/3列」かを合わせ6パターンから選択してください。どの列数が見やすいかは、商品数、またPCではサイドバーの有無などにも影響しますので、様子を見て調整してください。
◾️かどまるオプション（サイト全体を角丸に） 商品サムネイル、サイト全体の画像などに角丸を設定できます。角丸の有無、角丸のサイズによってかなり印象を変えることができます。サイトの雰囲気などに合わせて調整してください。

全体フォントサイズ、テキストロゴの設定

全体フォントサイズ調整

このテーマでは、お洒落さ格好良さよりもまず「どんな方にも読みやすく」を優先し、全体の文字サイズを気持ち大きめにしています。こちらの設定で全体サイズを一括で微調整できます。初期サイズより「+」「++」の順で大きく、「-」「—」の順で小さくなります。

テキストロゴのフォント設定

テキストでショップロゴを表示する場合の調整です。デザインされたロゴ画像がある場合は、左メニュー「ロゴ」からアップロードできます。

⌊ ロゴフォント いくつかの特徴的なデザインフォントから選択できます。
⌊ フォントサイズ 文字数によってロゴが改行されてしまわないよう、サイズや字間で微調整してください。
⌊ フォント太さ フォントの太さを選択します。
⌊ フォント字間 文字数によってロゴが改行されてしまわないよう、サイズや字間で微調整してください。

見出し装飾の設定

HOMEの見出し、About、Blogページのタイトルの装飾デザインをお好みでカスタムできます。

見出し装飾 サンプル
◾️見出し装飾 見出し装飾を6つのデザインパターンから選択できます。左寄せのボーダーによるものが2つ、中央寄せのボーダーが1つ。さらにオリジナルのアイコン画像を用いた見出しが3つ。

HOMEでは、各見出しの設定箇所にある「サブテキスト」を設定することで、より見栄え良くなる場合がありますのでお好みで設定してください。「サブテキスト」は空欄にすることで非表示になります。
⌊ 見出し用アイコン画像 見出しに使いたいアイコン画像をアップロードします。小さなアイキャッチ程度の用途ですのでそれに適した画像を用意してください。左寄せの場合は50x50ピクセル程度が目安ですが、中央寄せで利用する場合は横長の画像でもうまくフィットするでしょう。オリジナルアイコンを利用する場合、必ず次の画像サイズを入力してください。
⌊ アイコン幅ピクセルサイズ(半角数字 px不要) 上でアップした画像を表示するための横サイズを入力してください。数字は半角数字、単位「px」は不要です。
⌊ アイコン高さピクセルサイズ 上でアップした画像を表示するための縦サイズを入力してください。数字は半角数字、単位「px」は不要です。

※デザイン設定画面の「右側プレビュー」ではサイズがうまく反映されないことがあります。「プレビューモード」にするか「保存する」を押して確認してください。

入力した縦横サイズを表示領域として、その中にアップロードした画像が含まれるように配置されます。入力する縦横の比率は画像通りにする必要があります。

比率計算ツール：https://www.web-jozu.com/javascript/size.html

ウィジェットエリアの設定（画面下の送料やカレンダー表示）

各ページの下部に、決済方法や配送方法を案内するウィジェットエリアを表示できます。ウィジェットの細かい内容は「Aboutページ」での設定に自動で連動しますので、ここでは表示するかどうかだけを設定しておきます。

ウィジェットエリアの設定

◾️ウィジェットエリアを表示（全ページ下部） ウィジェットエリア全体の表示/非表示を選択します。
⌊ ショップ情報を表示 ウィジェット右側、ショップ情報
⌊ 決済案内を表示 ウィジェット左側、決済
⌊ 送料案内を表示 ウィジェット左側、送料案内
⌊ 送料案内キャッチ 送料案内ウィジェットのキャッチフレーズ
例：全国一律送料 750円 / お買い上げ3980円以上で送料無料
⌊ 送料案内サブキャッチ キャッチフレーズの下に表示する説明的な補助フレーズ
⌊ 配送案内アイコン 送料案内ウィジェットのアイコン（トラック、ボックス、なし）
⌊ SNSアイコンを表示する SNSアイコン群を表示/非表示
ウィジェット画像バナー（カレンダー設定の下にあります） 左右それぞれにバナーを表示できます。用意されたウィジェットの表示がお好みではない場合、画像バナーにて代用する使い方にも適しています。
⌊ 画像バナーリンク それぞれの画像バナーのリンク先を設定します。
⌊ 表示位置[左/右] 表示位置を左、右から選択できます（モバイルでは縦一列になります）

カレンダーの設定

◾️カレンダーを表示 ウィジェットに営業日カレンダーを表示します。本日が属する当月と翌月の2つのカレンダーが表示されます。本日は自動的にアクセントカラーにて色付けされます。
⌊ 表示位置[左/右] 表示位置を左、右から選択できます（モバイルでは縦一列になります）
⌊ 色[白/同調色] カレンダーの背景色を白地、またはウィジェット全体と同調色とするかを選択できます。ヘッダーカラーが明るい場合は白がおすすめです。ヘッダーカラーが暗い場合、白だと浮きすぎてしまうので同調色がおすすめです。
⌊ カレンダータイトル カレンダーの見出しを表示します。
⌊ マーカーの曜日一括指定 曜日で一括指定できます。マークしたい曜日を英字3文字で表記する方法で、必要な文だけをカンマで区切って入力します。（mon,tue,wed,thu,fri,sat,sun）

例）月、火、水の場合「mon,tue,wed」と入力します。土、日の場合「sat,sun」と入力します。
⌊ マーカーの個別指定 定期的ではない場合、月毎に日付指定できます。書式は「12月3日4日5日」であれば「12:3,4,5」のように、月の数字、コロン、日付をカンマ区切りで複数指定できます。スラッシュで区切ることで複数の月を指定できます。

例）「11:14,25/12:28,29,30,31/1:1,2,3」
⌊ マーカーの色(数字は白) マーカーの色を指定できます。
⌊ マーカーの意味 カレンダーの下の凡例テキストです。

カレンダーのマーカーは必ずしも休業日である必要はありません。セール日などの表示として利用する場合、凡例に「セール日」とし、カレンダータイトルも「セールカレンダー」のように分かりやすくすると良いでしょう。

ページの名称設定

各ページの名称を変えることができます。変更はナビゲーションとそれぞれのページタイトルにも反映されます。

◾️ページ名称　⌊ About Aboutページのタイトル
⌊ Blog → ブログAppを利用する場合のブログページタイトル（名称例：Information、News、Diary、Journal…）
⌊ Membership → メンバーシップAppを利用する場合のページタイトル
⌊ Community → コミュニティAppを利用する場合のページタイトル

【Blogでページ追加】ON/OFF

この機能は『BASEオフィシャルテーマのみで使える「ページ追加App」という機能を、BlogAppを使って擬似的に再現するための機能』です。ブログ一覧ページなどへのアクセス手段をなくし、記事ページに直接リンクをさせることで固定ページのように扱い、同時に日付などが表示されなくなります。

1. BlogAppをインストール「【Blogでページ追加】ON」にすると

2. ブログ投稿として固定ページのコンテンツを作成する

この状態で、ブログ投稿として固定ページのコンテンツを作成します。例えばショップ固有の「商品の使い方」「ギフトラッピングについて」「オーダーメイドの説明」といった内容をブログの投稿画面から作成します。出来上がったそれぞれの記事ページは、「Blog」という見出しはなくなり、記事タイトルが大見出しとして表示され、見た目上はブログ記事ではなく固定ページのようになります。

3. 作成した記事ページへのリンクを設置する

最後に、「ナビ項目追加機能」や「画像バナー」などから、作成した記事ページへのリンクを設定します。記事ページへのリンクは管理画面の記事一覧から「記事タイトル」をクリックして記事を表示させ、ブラウザのアドレスバーのURLをコピーして取得できます。

ONにした場合、時系列で記事を並べていくブログは見た目上はなくなります。（TOPページのブログ新着、サイドバーへのブログ新着は自動的に無効になります。）「ブログ一覧ページ」への動線がなくなるだけで、URLを知っていれば表示は可能です。

【Blogでページ追加】ONで表示されなくするというのは「見た目上、ブログっぽくなくなる」というだけなので、もちろんOFFのまま（通常のブログ表示のまま）で気にせずに、固定ページとして利用しても問題ありません。