サイト全体に共通するカスタマイズ (高度な設定)
LINEボタン：画面下にLINEボタン表示（メッセージAppとの併用不可）
> ショップ画面上からいつでもチャットでのお問い合わせをできるのが「メッセージApp」です。その「メッセージApp」と同じような表示方法でLINE公式アカウントへのリンクを表示する機能です。
LINEアカウントは管理画面のショップ情報で登録します。タップするとLINEが開き、まだ友達ではない場合は友達追加、すでに友達の場合はトークが開きます。
「メッセージApp」とはボタン表示が重複するため併用はできません。どちらか一方のみを利用してください。
高機能スマホナビ
スマホ画面でのナビゲーションは左から画面全体をスライドさせて表示する「高機能スマホナビ」がデフォルトになっています。シンプルにカテゴリー項目が並んでいるだけの「シンプルナビ」も選択できます。
「高機能スマホナビ」は背景色を黒か白から選択できます。
【上級者向け】独自のOGP画像を追加
BASEではOGPも自動生成されます。商品ページがシェアされた場合、商品画像や商品説明が。商品ページ以外では、ショップロゴ画像やショップ説明が自動的に生成されます。
アップロードした画像は商品ページ以外のOGP候補として追加されます。商品ページでは引き続き商品画像が利用されます。
OGPの扱われ方は、SNS側のルールよって異なります。適正なサイズなどはその時々でお調べください。
「OGP」とは、FacebookやTwitterでシェアされた時にプレビューとして表示される画像や説明文のことです。
（一般的な用語ですので、ここでは詳しい説明は省略します。分からない場合は検索エンジンで「OGPとは」などと検索してください。）
【上級者向け】HTMLヘッダー追加コード（サーチコソール所有権確認などに）
サイトのHTMLヘッダー内にHTMLタグを追加できます。
Google Search Consoleにてサイトの所有権確認を行うには、Search Consoleのダッシュボードから出力される「HTMLタグ」を選択し表示されるメタタグをコピー、そのままこの設定欄にペーストし保存します。そしてSearch Consoleの画面に戻り画面下部に表示されている「確認」ボタンをクリックして下さい。「(URL) の所有権が確認されました。」と表示されれば確認は完了です。
ここに記述したコードがそのままHTMLのヘッダータグ内に記述されますので、HTMLタグとして完全に不具合のない正しいコードのみを記述してください。不具合のあるコードが含まれるとサイト全体が正常に表示されなくなる可能性があります。
Google Search Console自体の機能、利用方法はサイトオーナー様自身にて十分に理解した上でご利用ください。
Search Console ヘルプ > サイトの所有権を確認する https://support.google.com/webmasters/answer/9008080?hl=ja
【上級者向け】独自スタイルシート
デザイン編集画面の項目として、独自スタイルシートを入力できます。入力したCSSは継承の最終指定として上書きされます。
ここに入力するメリットは、「デザイン編集の設定値」として別保管されるため、テーマがアップデートされてもそのまま適用されることです。組み込みスタイルシートの中には「!important」を指定しているものもあります。ディベロッパーツールなどを利用して検証してください。
BASEデザイン機能の仕様上、テキスト欄の最大文字数は1000文字となっています。1000文字を超える程のまとまったCSSがある場合は別ファイルにまとめてどこかのサーバにアップして読み込みか、HTMLヘッダーの中に直接記述してください。
カテゴリーヘッダー画像を設定する
BASEのカテゴリーAppの仕組みとして、「カテゴリーごとに画像を設定する」という機能は存在していません。
このテーマでは独自の方法でカテゴリーヘッダーを実現します。
カテゴリーAppdでは、カテゴリー項目はいくつでも作成でき、さらに中カテゴリー、小カテゴリーと3階層までできます。
1つ1つすべてのカテゴリーごとに画像を設定するのは設定作業が煩雑になりすぎるため、この機能では「設定できるカテゴリー数は8つまで」としています。
おすすめの使い方として、「大カテゴリーに設定した画像を、中、小カテゴリーも共有する」という方法にすることで、たくさんのカテゴリーが構造化されたたショップでも対応ができます。もし大中小カテゴリー全て含めて8カテゴリー以下であれば、大中小カテゴリー全て別々の画像にすることも可能です。
設定手順
STEP 1: 「【カテゴリーヘッダー】ON/OF」をONにする
テーマ設定の左メニュー、一番下の方にある 「【カテゴリーヘッダー】ON/OF」をONにします。
これにより、全カテゴリーページにヘッダー画像レイアウトが適用されます。ONにした場合は全てのカテゴリー画像を設定してください。
STEP 2: カテゴリーのIDを調べて入力する
- 自分のショップの設定したいカテゴリーページを表示する
- ブラウザのアドレスバーにあるURL「ショップドメイン/categories/0000000」をチェック
- 最後の7桁の数字「0000000」を選択し、コピーする
- テーマ設定画面「カテゴリー：ページ番号」欄に、先頭に「cat」をつけた「cat0000000」をペーストする
全て半角英数で、スペースも入らないようにご注意ください。
STEP 3: 画像をアップロードする
「カテゴリー1：画像」にそのカテゴリーに合わせたい画像をアップロードします。
ヘッダー画像なので画像はかなり横長の比率で表示されます。またパソコン、スマホによっても表示領域は変化します。全体が見えないと困るような写真ではなく、雰囲気として部分的に表示されていても問題ないものを選ぶのがポイントです。
STEP 4: 確認する
テーマ設定を保存し、先程のカテゴリーページを確認、ヘッダー画像が表示されていれば完了です。
8カテゴリーまで設定できますので、同じ要領で「カテゴリーのID」と「画像」を設定してください
STEP 5： 中・小カテゴリーの設定方法
中・小カテゴリーにも同じ画像を設定するには、7桁の数字の先頭に「cat」をつけ「,.（コンマピリオド）」で繋げます。
例えば、大カテゴリが0000000、中カテゴリーが1111111、小カテゴリーが2222222だった場合、「cat0000000,.cat1111111,.cat2222222」と入力します。まとめていくつでも追加できます。ここにまとめられたカテゴリーページ全てに、対応する画像が表示されます。
全て半角英数で、スペースも入らないようにご注意ください。
STEP 6：レイアウトを選択する
「レイアウト切替え(ON:幅広/OFF:ボックス)」により、ヘッダー画像のレイアウトを２パターンから選択できます。
ONの状態ではヘッダー画像が横幅100%でページ上部に表示され、それ以降に通序通りのカテゴリータイトルなどが表示されます。
OFFの状態では、カテゴリータイトル自体が画像ボックスとなり、画像の上にタイトルが表示されるレイアウトになります。
この場合、カテゴリータイトルの文字色は白となります。設定する画像によって、文字が読みにくくなる場合もあると思いますが、1つ1つの画像ごとに文字色を変えることは設定画面が著しく煩雑になるため、文字色を固定しています。 画像の扱い自体で工夫する、またはもう1つのレイアウトを利用してください。
画像が表示されないときのチェック項目
- カテゴリーID（7桁の半角数字）が間違っていないか
- 「cat」（半角）をつけ忘れていないか
- 複数カテゴリーの時は「,.」（コンマ、ピリオド）が正しく入っているか
- 複数カテゴリーの時も全てのカテゴリーIDに「cat」がついているか
- 前後や途中に見えない文字（スペースなど）が入っていないか
その他
もし将来的にBASEのカテゴリーAppの機能として正式にカテゴリー画像の機能が追加された場合、この機能の提供を終了します。
また、BASEの仕様変更によりカテゴリー画像の設定が不可能になる可能性もあります。どうぞご了承ください。
カテゴリーヘッダー設定数を8個としている理由として、デザインテーマはパソコン操作に慣れている方も慣れていない方も利用するものであるため、テーマ設定項目が増えすぎて分かりにくくなること、少なすぎて自由度が低くなること、のバランスをとっています。 またUNVIERSEのカテゴリーを利用したナビゲーションは8個ほどが表示できる限度であることから、8個としています。9個以上に増やしたい場合などは、カスタマイズをご依頼ください。