#1全体設定（カラー/ロゴ/レイアウト）
カラー設定
| 背景色（基本設定） | メインの背景色は「テーマ設定」ではなく、デザイン設定画面の左側にある「背景」というところから設定します。初期値はごくわずかにベージュがかった「#fcfcf7」。 |
|---|---|
| メッセージApp（App利用時） | メッセージAppをインストールしている場合に表示されます。チャットを開くアイコンの色を設定します。 |
| 全体の文字色 | サイト全体のテキストカラー。背景色の上にのる色になります。 |
| 主要ボタン背景色 | 「カートに入れる」ボタンなど主要なボタンの色となります。ショップからつながるBASEの購入手続き画面は黒ボタンですので、分かりやすくあえて黒にしておくこともおすすめです。 |
| 主要ボタン文字色 | 上記のボタンにのる文字色です。背景をごく薄い色にした場合などは濃い色に。 |
| メニューパネル背景色 | サイト右上の「三」アイコンから開く、メニューパネルの背景色。 |
| メニューパネル文字色 | メニューパネル文字色 |
| SALE価格の文字色 | セール価格表示の文字色 |
色決めのコツ
表示される面積が広いエリアには、基本的には白、黒がお勧めです。
背景色と文字色の明度をはっきりと分けることで文字が読みやすくなりますが、仮に白や黒を使う場合でも、わずかにコントラストを抑えると見やすくなります。
例えば背景は「真っ白」ではなく「気づかないくらいのグレー、ベージュ」にしてみる、文字色は「真っ黒」ではなく「黒とチャコールグレーの間くらい」にすると、画面を見た時のチラつき感が抑えられると共に、ぐっと落ち着いた印象になります。
微妙な色を選ぶには、カラーパレット右下の「レイボーアイコン」から、グラデーションのパレットから調整することができます。すでに取り入れたい色が決まっている場合、色コードでの入力も可能です。
より大きなパレットが使えるGoogleのカラーピッカーで色を決め、色コードをコピーペーストするのもお勧めです。
（Googleカラーピッカーにて表示されている「HEX」が色コードとなります）
ロゴとヘッダーの設定
ヘッダーとはショップ名やメニューアイコンがある上部のエリアです。
| 見出しフォントスタイル | サイト全体の見出しフォントスタイルを選択します。 |
|---|---|
| ロゴ:テキストの場合 文字サイズ | ショップロゴを「テキスト」で表示している場合、その文字サイズを調整できます。初期値2.8となっています。単位を気にせずそれを基準に、数値を調整してください。絶対的なサイズを指定しているのではなく、相対的な調整値です。 |
| ロゴ:画像の場合 ヘッダー画像上でのロゴ | ロゴを「画像」としている場合、メインビジュアル上でのみロゴの色を変えたい場合に設定します。例えば透過黒文字ロゴを利用していて、ヘッダー上では白にしたい場合はこちらに「同じサイズ、反転させた画像」を設定します。 |
| ロゴ:画像の場合 最大幅（初期値200 半角数字） | ロゴを「画像」としている場合、表示されるサイズを調整できます。「最大幅」であることに注意してください。 |
| ヘッダー高さ調整（初期値100） | ヘッダーの高さを数値で指定できます。ヘッダーは透明なボックスとして画面上部にあります。ロゴとアイコンは、このボックスの中で縦方向の中央に表示されています。もしショップロゴが大きい場合、ヘッダーの高さをロゴの高さと同じくらいにすることで、アイコンなどもロゴに対して中央に表示されます。必要以上に高くするとコンテンツに重なりうまく操作できなくなるため、必要な場合のみ、最小限のサイズにしてください。 |
商品一覧サムネイルの比率、列数の設定
| ◾️商品一覧 サムネイル列数 | 商品一覧のサムネイルの並び方について、PC/タブレット/スマホでの列数を選択できます。画面が小さいほど列を少なくしてサムネイルサイズを確保するという前提で、小さく沢山並べたいのか、大きく少なく並べたいのかで調整できます。 |
|---|---|
| 商品一覧 サムネイル縦横比 | サムネイルの縦横比を選択できます。4:5、3:2の縦横、正方形、そのまま から選択できます。元々の画像ファイルで比率を統一して管理されている場合は「そのまま」を選択してください。 |
| 商品一覧 レイアウトオプション | シンプルにそのまま表示する「グリッド」に対し、一定の間隔でサイズを大きくする「ダイナミック」を選択できます。単に同じサイズのサムネイルが続くより、リズムのあるレイアウトで飽きることなくたくさんの商品を見てみたくなるような効果を期待できます。ダイナミックで大きくする商品を指定することはできません。 |
| ⌊ ダイナミックをカテゴリーページにも適用 / OFFでトップのみ | ダイナミックレイアウトをHOMEのみにするか、カテゴリー一覧でも適用するかを指定できます。 |
| 商品一覧 追加読み込みボタン | 商品一覧では、一度に24個が表示され、25個以上がある場合に「もっと見る」ボタンを押すことで追加読み込みされます。そのボタンの文言を変更できます。（24という数字はBASEの仕様ですので全てのテーマ共通です） |
画像の角丸、見出しアクセントマーカーの設定
| ▪️画像の角丸ピクセル数 | サイト全体で、画像に角丸を設定します。(初期値6) 0で角丸なし、数値を大きくするほど丸くなります。 |
|---|---|
| 見出しのアクセントマーカー | 見出しのデザイン装飾の形を変更できます。色は「アクセントカラー」が反映されるものです。 |
| アクセントカラー | 見出し装飾やテキストリンクの下線など、ちょっとしたアクセントで使用される色です。この色の上に「全体の文字色」がのるため「背景色」のトーン違いの色使いがお勧めです。例えば、背景色が白ならごく薄い色など。 |
角丸の秘密
角丸の数値を999にすると完全に丸くなります（正方形なら正円）。