TOP › #1 全体設定

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

1. カラー設定

背景色メインの背景色は「テーマ設定」ではなく、デザイン設定画面の左側にある「背景」というところから設定します。
メッセージAppメッセージAppを利用すると表示されるアイコンの色を設定します。
テキストカラーサイト全体のテキストカラー。背景色の上にのる色になります。
アクセントカラー「カートに入れる」ボタン、各所のデザインパーツなどアクセントになるようなカラー。あえて背景色などと少しだけトーンを変えた類似色にするのもとてもおすすめです。
⌊ アクセントカラー上の文字色上のアクセントカラー上の文字色を指定します。アクセントカラーの濃淡に応じて読みやすい色を指定します。

2. 全体フォント設定

フォント：見出し（ナビ/見出し等）

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

本文（商品説明、本文等）

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

※「明朝体」を選択した場合でも、注意事項などの小さな文字ボタンなどについては、可読性を優先するため「ゴシック体」で表示されます。

全体フォントサイズ調整

サイト全体のフォントサイズはデフォルトでは小さめとなっています。少し大きくしたい場合はここで２段階大きく調整できます。

3. 画像の角丸

サイト全体の「画像の角丸」を設定します。商品画像だけでなく、レイアウト上の枠などにも反映されます。

角を丸くすることで全体の雰囲気が大きく変わりますので、お好みで設定してください。

💡

角丸が大きくなるほど、画像同士が並ぶサムネイルで画像同士がくっついていると窮屈に見える場合があります。

この先のサムネイルに関する設定にて「サムネイル列数」「サムネイル縦横比」「サムネイル同士の隙間」がありますのでそちらも合わせて調整してください。

4. 商品一覧のサムネイル調整、商品名や価格の表示設定

商品一覧のサムネイル画像サイズなどを調整できます。サムネイル同士の隙間(マージン)、文字情報の表示スタイルによって、サイトの印象は大きく変わります。

商品サムネイル：列数（PC）PC表示でのサムネイル画像の列数を「2/3/4列から」選択します。
⌊ サムネイル列数（スマホ/タブレット）タブレットやスマホ表示でのサムネイル画像の列数を「1/2/3列から」選択します。
⌊ サムネイル縦横比サムネイルの縦横比を選択できます。この設定値は表示する際に全体統一の縦横比に切り取ることを意味します。切り取って欲しくない場合は「そのまま」を選択してください。
⌊ サムネイル同士の隙間サムネイル画像同士の隙間を設定。「なし/3px/5px」などにするととてもクールな印象に、逆に広げるほどゆったりした印象に。「サムネイル列数」や「角丸」と合わせて調整してください。
⌊ 商品名の表示スタイル 商品名の表示スタイル：
  • マウスオンでのみ表示（一覧時は写真のみ）
  • 画像に重ねて表示（作品ラベルのように写真右下に小さく表示）
  • 画像下にそのまま表示（一般的な表示方法）
マウスオンのみで表示させたり、画像に重ねる表示方法では、すべてのサムネイルの縦横サイズが統一できるため綺麗に整列します。
⌊ 価格情報の表示 ON/OFFサムネイルにて価格を表示するかどうかを設定します。価格表示をOFFにすると商品一覧では価格非表示、商品ページで初めて価格が分かります。OFFの場合は「SOLD OUT」などの表示もされません。
商品一覧での読み込みボタン名商品一覧は24個を区切りに表示されます。24個以上の場合に「もっと読み込む」リンクを表示されますが、その文言を設定できます。トップページのほか、カテゴリー一覧ページでも共通です。

5. ヘッダーデザイン、ナビ設定

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

【ヘッダー】画像主体ページでの表示画像に重ねて表示：写真に重ねるように表示します
独立させて表示：ヘッダーを写真の上に独立させます。背景色は全体背景色と同じになります。

画像主体ページでの表示とは？

商品写真がフルスクリーン表示されるページ（商品詳細ページ、カテゴリーページでカテゴリーヘッダーを利用した場合）において、ヘッダーを写真に重ねて表示するか、写真とは重ならないように上に独立させるかを選択できます。

ヘッダー設定：画像に重ねて表示

ヘッダー設定：画像に重ねて表示

ヘッダー設定：独立させて表示

ヘッダー設定：独立させて表示

💡

トップページなどでは、この設定による違いはないことにご注意ください。商品ページ、カテゴリーページ（カテゴリー画像をONにした場合）で違いを確認できます。

💡

「ノーマル」ではページを開いた瞬間からスクリーンいっぱいに写真を表示できますが、写真によっては文字が読みづらくなることもあります。「どんな場面でもロゴとナビアイコンが明確に見えてほしい」という場合は「ヘッダー：独立」をご利用ください。

ヘッダーのナビ項目について

このテーマでは右上の「三」アイコンと「バッグ」アイコンのみの表示を基本とし、その他は「三」の中のドロワー（引き出し）メニューからアクセスします。PC表示においては、About/Blog/Contactなどをテキスト表示することができます。

【ヘッダーナビ】Bagアイコンバッグアイコンの表示/非表示（非表示にした場合、ドロワーの中のバッグアイコンが利用できます）
【ヘッダーナビ】Aboutテキストで「About」を表示します。（表現は「ページ名称」で変更可能）
【ヘッダーナビ】Contactテキストで「Contact」を表示します。（表現は「ページ名称」で変更可能）
⌊ ナビの上下位置ナビの位置を「上下中央、上、下」から選択します。ロゴのフォントサイズが大きい場合、また高さのあるロゴ画像の場合に、その高さに対して右側のナビが上下どの位置になるかを調整するものです。
⌊ カートアイコンタイプカートアイコンのデザインを選択できます。バッグ、カートが一般的です。

ドロワーナビの設定

画面右上の「三」アイコンをタップすると左からスライドインするナビについて設定します

【ドロワーナビ】カラーテーマドロワーナビを白ベース、黒ベースかを選択します。全体背景色が明るい色であれば白、暗い色であれば黒など、お好みで選択できます。
Bagアイコンを表示ドロワーナビの中に、バッグアイコンを表示します。ヘッダーかドロワーかどちらかは必ずONにしてください。
項目の間隔調整ナビ項目の数(商品カテゴリーの数)に応じて、縦方向にスペースを縮めたい場合に調整します。
💡

フッターに表示されるBASEアイコン（テントのマーク）は「BASE非表示App」を利用することで非表示にすることができます。アイコン非表示の他にもお気に入りアイコンも設定できるなど、長期的なショップのブランディングを考慮する上では十分に利用価値がありおすすめです。

6. ページの名称設定

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

About →Aboutページのタイトル（ 例：Profile、About me、Infomation…）
Category →カテゴリー管理App利用時、ドロワーメニュー内に表示される一番親となる項目のラベル名です。クリックすると作成したカテゴリーリストが開くものであり、ページとしては存在しません。（名称例：Products、Works、Items…）
Blog →ブログAppを利用する場合のブログページタイトル（名称例： Information、News、Diary、Journal…）
Membership →メンバーシップAppを利用する場合のページタイトル
Community →コミュニティAppを利用する場合のページタイトル
◾️ナビ 項目追加：フリー1 / 2ナビ項目を自由に追加できます。設定するとモバイル用のドロワーナビに表示されます。全体のレイアウト保持のため、項目名が10文字程度（日本語の場合）以上になると改行が発生します。その場合、項目名を短くする、他の項目を減らすなど調整してください。
⌊ リンクURLフリー項目のリンク先URL
⌊ PC用ヘッダーナビに表示モバイル用のドロワーナビだけでなく、PC表示時のヘッダーナビに表示させることができます。
💡

【ナビ 項目追加】フリーの使用例

フリー１に「Works」などという名称を設定し、リンク先に「 /#products 」と設定すると、どのページからでもトップページの「コレクションor商品一覧エリア」に遷移できるようになります。

「Blogでページ追加」機能を活用してBlog記事ページへのリンクを設定することで、固定コンテンツページへのリンクを設定することができます。BASEショップ以外に自分のサイトがある場合など、フリー２、３に設定して動線とすることができます。

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

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

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

  • ナビゲーションに「Blog」項目が表示されなくなる
  • Blog記事ページで「Blog」という見出しがなくなりブログ記事タイトルのみ表示される
  • ブログ記事の日付が表示されなくなる

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

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

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

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

💡

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

💡

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

テキストでショップロゴを表示する場合に細かく調整ができます。

💡

ロゴやヘッダー設定は最初に設定後、あまり使わない項目となるためテーマ設定の一番下の方に並んでいます。下にスクロールして以下のような項目まで移動してください。

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