HOME › #1 全体設定

#1 全体設定
色、フォント、ヘッダー、ナビゲーション

1. カラー設定

背景色 メインの背景色は「テーマ設定」ではなく、デザイン設定画面の左側にある「背景」というところから設定します。
メッセージApp メッセージAppを利用すると表示される、チャットを開くアイコンの色を設定します。
テキストカラー サイト全体のテキストカラー。背景色の上にのる色になります。
アクセントカラー サイト全体を通してアクセントとなる色を指定します。アクセントカラーは各所のデザインパーツ、「カートに入れる」ボタンなどに適用されるので、全体の配色に対して目立つ色がおすすめです。
⌊ アクセントカラー上の文字色 上のアクセントカラー上のテキストカラー。「アクセントカラー」と「アクセントカラー上の文字色」を同色にしたり、似た色にしてしまうとボタン状の文字が読めなくなってしまいます。「アクセントカラー上の文字色」は文字が明確に見やすくなるような色に調整します。

ヘッダーバー、サイドバーのカラー設定はそれぞれの詳細設定で行なっていきます。

◾️テキストロゴデザイン機能 ロゴ設定でテキストとしてショップ名を入力して利用する場合、フォントやサイズを選択できます。もし画像ロゴを利用する場合はOFFにしてください。また下に続くロゴフォント設定は無視できます。
⌊ ロゴフォント いくつかの特徴的なデザインフォントから選択できます。
⌊ フォント[日本語] ショップ名が日本語表記の場合、こちらで設定した方が綺麗に表示されます。
⌊ フォントサイズ 文字数によってロゴが改行されてしまわないよう、サイズや字間で微調整してください。
⌊ フォント太さ 一部フォントの太さを選択。フォントによっては太さバリエーションはありません。
⌊ フォント字間 文字数によってロゴが改行されてしまわないよう、サイズや字間で微調整してください。
⌊ タグライン ショップ名のサブタイトルのようなイメージで説明を入れることができます。タグラインはショップを端的に表現するできるだけ短いテキストを入れます。
⌊ タグラインの位置 タグラインをロゴの上に入れるか、下に入れるか、またスマホ表示では省略するか、を設定できます。

テキストロゴを利用する場合、サイドバーでの収まり、スマホサイズでの収まりをチェックし、意図せず改行されてしまわぬように「フォントサイズ」「フォント字間」を微調整してください。

3. ヘッダーバー

ヘッダーバーは上部に固定されたバーエリアです。左側にお知らせメッセージの表示、右側にはカートアイコン、検索、言語切り替えなどのファンクション機能が配置されます。

ヘッダーバーは「お知らせApp」と同様の機能を持ち、サイトデザインとして組み込みながら実現しています。そのため本テーマでは「お知らせApp」には対応していません。

◾️ヘッダーバーカラー ヘッダーバーの色を設定します。サイト全体のアクセントとなるような配色がおすすめです。
⌊ ヘッダーバー上の文字色 ヘッダーバーの色に応じて読みやすい文字色を設定します。
⌊ ヘッダーメッセージテキスト ヘッダーバーに表示するメッセージを入力します。常に表示されるメッセージのため、端的で短いテキストにしましょう。
⌊ ヘッダーメッセージ リンクURL メッセージからリンクさせたい場合、リンクテキストにURLを入力します。
⌊ 流れるメッセージ ヘッダーのメッセージを、右から左に流して表示することができます。メッセージテキストが長文であっても、改行されずにすっきりさせることができます。
⌊ 流れる速さ 流れる速さを調整できます。
◾️カートボタンスタイル カートボタンのスタイルを選択します。PC表示（サイドバーが左にある状態）でのカートボタンのスタイルに影響します。タブレット、スマホではカートアイコンのみのデザインですのでこの設定は影響しません。
◾️カートバッジの色 カートに商品が入った際、入っている商品の数が通知バッジ形式で表示されます。その通知バッジの色を「赤色（数字は白）」または「アクセントカラーを反映」から選択できます。

※「カートボタンスタイル」でアクセントカラーを反映している場合、「カートバッジの色」は必ず赤色になります。

ヘッダーバーの機能アイコンについて

  1. About Us
    ショップ案内ページへのリンクが表示されます。この「About Us」という表現はテーマ設定「【ナビ 項目名称】About →」で変更が可能です。
  2. 検索、多言語切り替え
    それぞれ検索App、翻訳Appをインストールすると表示されます。ブラウザの画面幅が1000px以下になると、メインナビゲーションと共に左上の３本線メニューに格納されます。
  3. BASEアイコンについて
    2023年4月のアップデートにて「カートアイコン」のみの表示となり、BASEアイコンは画面一番下のフッターエリアに移動しています。BASE非表示App

4. サイドバー

このテーマはメインナビゲーションが左側サイドバースタイルとなっています。PC画面ではサイトデザインのキーとなるカラーエリアとなります。画面幅1000px以下では、サイドバーは左上の３本線メニューに格納され、メインエリアが広くなるようレスポンシブに変化します。

◾️サイドバー：背景色スタイル サイドバーの色を設定できます。まずは「背景色スタイル」から次の４パターンを選択してみます。
  • トーンonトーン：ダークトーン 20%
  • トーンonトーン：ダークトーン 50%
  • トーンonトーン：ライトトーン 20%
  • トーンonトーン：ライトトーン 50%

色を独自に設定したい場合、「カラーパレットから指定する」を選択し、「サイドバー背景色」のカラーパレットから色を設定します。
⌊ サイドバー背景色 上の項目を「カラーパレットから指定する」にした場合、この色が採用されます。メインエリアの背景色に対して濃淡だけを変えて馴染ませることで、おしゃれな雰囲気の配色ができます。
⌊ サイドバー文字色 サイドバー背景色に応じて、文字色を設定します。
⌊ スクロールタイプ 固定（ロゴは常に表示）：ロゴが常に表示されるようにサイドバーを固定します。

スクロール（サイドバー下端まで）：サイドバーの下端まではスクロールして固定されます。

スクロール（完全にスクロール）：メインエリアとサイドバーは同じだけスクロールします。
⌊ ボリューム調整 カテゴリーナビの隙間を調整し、全体の縦方向のボリュームを調整できます。
◾️サイドバーナビ：About ボタン化 Aboutなどの固定ページナビはシンプルなテキストで表示されますが、選択してボタン化することができます。（About / Blog / Community / Coin / Contact それぞれで設定）
⌊ ボタンカラー(文字は白) ボタン化したナビのカラーを設定します。ボタンのテキストは白固定となりますので、白文字が読める色を選んでください。
【バナー】画像バナー サイドバーには画像バナーを設置できます。画像とそのリンク先を設定します。このバナーは３本線に収納されたスマホナビにも表示されます。
⌊ 画像バナー リンク先 画像バナーのリンク先URLを入力します。

5. 全体フォント設定

見出しフォント（商品名/ナビ/見出し等）

見出し、商品名、ナビゲーションの書体に反映されます。「ゴシック体」「明朝体」から選択します。

本文フォント（商品説明、本文等）

商品説明、本文等に反映されます。「ゴシック体」「明朝体」から選択します。

6. 商品一覧のレイアウト（トップ、カテゴリー共通）

商品一覧のレイアウトを設定します。商品画像の縦横比率、サムネイル列数、角丸、などによってショップ全体の印象も大きく変わります。取り扱う商品画像や商品点数に応じて調整しましょう。

かどまるオプション 画像の角を丸くすることができ、丸さを段階的に調整できます。この設定はサムネイルだけでなく、サイト全体の画像やパーツに適用されます。
サムネイル縦横比 サムネイルの縦横比率を選択できます。設定する比率は、画像ファイル自体の縦横比率と異なっていてもトリミングして表示されます。もとの画像比率そのままで表示したい場合は「画像そのまま」を選択してください。
サムネイル列数 サムネイルの列数（何個ずつ並べるか）を2列〜4列から選択できます。ショップ全体の商品数が少なければ2列、多い場合は4列にした方が一覧性が高くなります。
商品一覧をさらに読み込むボタン名 「もっと見る」の表現を変更できます。例）「VIEW MORE」「MORE」「さらに読み込む」

7. ナビ項目名称の変更

最初からあるページ（About）、またAppを入れることで自動的に出現するページ（Blog、Community）の名称を変えることができます。

変更はナビゲーションとそれぞれのページタイトルにも反映されます。

ナビ項目の追加

サイドエリアに任意のナビ項目を２つまで追加できます。項目名とリンク先URL、さらにボタン化するかどうかを設定します。

8.「Blogでページ追加」の使い方

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

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

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

この状態で、ブログ投稿として固定ページのコンテンツを作成します。例えばショップ固有の「商品の使い方」「ギフトラッピングについて」「オーダーメイドの説明」といった内容をブログの投稿画面から作成します。

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

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

ONにした場合、時系列で記事を並べていくブログは見た目上はなくなります。「ブログ一覧ページ」へのナビがなくなりますが、URLを知っていれば表示は可能です。

もちろん【Blogでページ追加】OFFのままで、上記のような方法で利用しても問題ありません。