leende｜BASEデザインテーマ

HOW TO USE

HOME GOODLIFE HOW TO USE

基本設定

背景の設定

デザイン → 背景

カラーから選ぶもしくはパターンから選ぶで設定してください。

基本設定

フォント表示のルール

フォント表示のルール（優先順位）があります。基本的には英数字は欧文フォントの適用が優先される設定となっています。欧文フォントには日本語が含まれていないため、日本語には欧文フォントがスキップされ、和文フォントが適用されます。以下のテキストを例にいくつか例を挙げてみます。

■サンプルテキスト

  • 本文以外のテキスト：Title-01 商品タイトル
  • 本文のテキスト：Text-01 本文テキスト

１）本文のみのフォントで設定した場合

  • Title-01（本文の欧文）商品タイトル（本文の和文）
  • Text-01（本文の欧文）本文テキスト（本文の和文）

２）本文以外（欧文）を「ON」にした場合

  • Title-01（本文以外の欧文）商品タイトル（本文の和文）
  • Text-01（本文の欧文）本文テキスト（本文の和文）

３）本文以外（和文）を「ON」にした場合

  • Title-01 商品タイトル（本文以外の和文）
  • Text-01（本文の欧文）本文テキスト（本文の和文）

４）本文以外（欧文）と（和文）を「ON」にした場合

  • Title-01（本文以外の欧文）商品タイトル（本文以外の和文）
  • Text-01（本文の欧文）本文テキスト（本文の和文）

基本設定

フォントの種類

以下に使用できるフォントを記載しました。見本の文字の画像とGoogle Fontsへのリンクを掲載しております。見本の画像でイメージするのが難しい場合は、実際に使用する文字をGoogle Fontsのサイトで試すこともできますので、そちらでご確認ください。

■本文（欧文）

デザイン → テーマ設定 → フォントの種類｜本文（欧文）

○Roboto（Sans Serif）

https://fonts.google.com/specimen/Roboto
Roboto

○Inter（Sans Serif）

https://fonts.google.com/specimen/Inter
Inter

○Montserrat（Sans Serif）

https://fonts.google.com/specimen/Montserrat
Montserrat

○Raleway（Sans Serif）

https://fonts.google.com/specimen/Raleway
Raleway

○Quicksand（Sans Serif）

https://fonts.google.com/specimen/Quicksand
Quicksand

○Lora（Serif）

https://fonts.google.com/specimen/Lora
Lora

○Libre Baskerville（Serif）

https://fonts.google.com/specimen/Libre+Baskerville
Libre Baskerville

○Cardo（Serif）

https://fonts.google.com/specimen/Cardo
Cardo

○Nanum Myeongjo（Serif）

https://fonts.google.com/specimen/Nanum+Myeongjo
Nanum Myeongjo

○Cormorant Garamond（Serif）

https://fonts.google.com/specimen/Cormorant+Garamond
Cormorant Garamond

○Roboto Slab（Slab Serif）

https://fonts.google.com/specimen/Roboto+Slab
Roboto Slab

○Zilla Slab（Slab Serif）

https://fonts.google.com/specimen/Zilla+Slab
Zilla Slab

■本文（和文）

デザイン → テーマ設定 → フォントの種類｜本文（和文）

○Noto Sans Japanese（ゴシック体）

https://fonts.google.com/noto/specimen/Noto+Sans+JP
Noto Sans Japanese

○BIZ UDGothic（ゴシック体）

https://fonts.google.com/specimen/BIZ+UDGothic
BIZ UDGothic

○Zen Kaku Gothic New（ゴシック体）

https://fonts.google.com/specimen/Zen+Kaku+Gothic+New
Zen Kaku Gothic New

○M PLUS Rounded 1c（丸ゴシック体）

https://fonts.google.com/specimen/M+PLUS+Rounded+1c
M PLUS Rounded 1c

○Zen Maru Gothic（丸ゴシック体）

https://fonts.google.com/specimen/Zen+Maru+Gothic
Zen Maru Gothic

○Noto Serif Japanese（明朝体）

https://fonts.google.com/noto/specimen/Noto+Serif+JP
Noto Serif Japanese

○BIZ UDMincho（明朝体）

https://fonts.google.com/specimen/BIZ+UDMincho
BIZ UDMincho

○Shippori Mincho B1（明朝体）

https://fonts.google.com/specimen/Shippori+Mincho+B1
Shippori Mincho B1

■本文以外（欧文）

デザイン → テーマ設定 → フォントの種類｜本文以外（欧文）

使用する場合は「ON」にしてください。

※テキストロゴ、ナビゲーション、見出し、ボタンのフォント

○Roboto Condensed（Sans Serif）

https://fonts.google.com/specimen/Roboto+Condensed
Roboto Condensed

○Fira Sans Condensed（Sans Serif）

https://fonts.google.com/specimen/Fira+Sans+Condensed
Fira Sans Condensed

○Josefin Sans（Sans Serif）

https://fonts.google.com/specimen/Josefin+Sans
Josefin Sans

○Josefin Slab（Slab Serif）

https://fonts.google.com/specimen/Josefin+Slab
Josefin Slab

○Gravitas One（Serif）

https://fonts.google.com/specimen/Gravitas+One
Gravitas One

○Rubik Dirt（Display）※太さは1種のみ

※和文と組み合わせた際に、太字設定の時、かすれた文字にならないことがあります。

https://fonts.google.com/specimen/Rubik+Dirt
Rubik Dirt

○Righteous（Display）※太さは1種のみ

https://fonts.google.com/specimen/Righteous
Righteous

○Rye（Display）※太さは1種のみ

https://fonts.google.com/specimen/Rye
Rye

○Chango（Display）※太さは1種のみ

https://fonts.google.com/specimen/Chango
Chango

○Averia Serif Libre（Display）

https://fonts.google.com/specimen/Averia+Serif+Libre
Averia Serif Libre

○Stardos Stencil（Display）

https://fonts.google.com/specimen/Stardos+Stencil
Stardos Stencil

○Abril Fatface（Display）※太さは1種のみ

https://fonts.google.com/specimen/Abril+Fatface
Abril Fatface

○Poiret One（Display）※太さは1種のみ

https://fonts.google.com/specimen/Poiret+One
Poiret One

○Limelight（Display）※太さは1種のみ

https://fonts.google.com/specimen/Limelight
Limelight

○Plaster（Display）※太さは1種のみ

https://fonts.google.com/specimen/Plaster
Plaster

○Emblema One（Display）※太さは1種のみ

https://fonts.google.com/specimen/Emblema+One
Emblema One

○Dancing Script（Handwriting）

https://fonts.google.com/specimen/Dancing+Script
Dancing Script

○Major Mono Display（Monospace）※太さは1種のみ

https://fonts.google.com/specimen/Major+Mono+Display
Major Mono Display

■本文以外（和文）

デザイン → テーマ設定 → フォントの種類｜本文以外（和文）

使用する場合は「ON」にしてください。

○Noto Serif Japanese（明朝体）

○BIZ UDMincho（明朝体）

○Shippori Mincho B1（明朝体）

※テキストロゴ、ナビゲーション、見出し、ボタンのフォント

※本文はゴシック体、それ以外を明朝体にしたいときにお使いいただけます

※種類は本文と同じのため、詳細は割愛いたします

基本設定

フォントサイズ

デザイン → テーマ設定 → 本文｜フォントサイズ

「14px、15px、16px」から設定してください。

基本設定

テキスト色（本文）

デザイン → テーマ設定 → 本文｜テキスト色

本文のテキストの色を設定してください。

基本設定

テキストリンク色

デザイン → テーマ設定 → 本文｜リンク色

テキストリンクの色を設定してください。

基本設定

見出しのフォントサイズ

デザイン → テーマ設定 → 見出し共通設定｜フォントサイズ

「XS、S、M、L、XL」から設定してください。

基本設定

見出しのテキストの太さ

デザイン → テーマ設定 → 見出し共通設定｜テキストの太さ

「標準、太字」から設定してください。

基本設定

見出しのテキスト色

デザイン → テーマ設定 → 見出し共通設定｜テキスト色

見出しのテキストの色を設定してください。

基本設定

見出しのテキストの位置

デザイン → テーマ設定 → 見出し共通設定｜テキストの位置

「左揃え、中央揃え」から設定してください。

基本設定

ボタンの種類と形状

○ボタンの種類

デザイン → テーマ設定 → ボタン共通設定｜種類

「背景色あり、枠線のみ（細線）、枠線のみ（太線）」から設定してください。

○ボタンの形状

デザイン → テーマ設定 → ボタン共通設定｜形状

「四角、角丸、丸型」から設定してください。

ボタンの種類と形状

基本設定

ボタンの色

デザイン → テーマ設定→ ボタン共通設定｜ボタンの色

ボタンの色を設定してください。

基本設定

ボタンのテキスト色

デザイン → テーマ設定 → ボタン共通設定｜テキスト色

ボタンのテキストの色を設定してください。

※ボタンの種類で「背景色あり」を選択した場合のみ

基本設定

ボタンのテキストの太さ

デザイン → テーマ設定 → ボタン共通設定｜テキストの太さ

「標準、太字」から設定してください。

基本設定

角丸デザイン

デザイン → テーマ設定 → デザイン設定｜角丸デザイン

「ON」にすると画像の角が角丸になります。

角丸デザイン

ナビゲーション

ヘッダーとナビゲーションの背景色

デザイン → テーマ設定 → ヘッダーとナビゲーション｜背景色

ヘッダー、ナビゲーション、フッターの背景を設定してください。

※スクロール後やヘッダー画像がないページの背景色

ナビゲーション

テキスト色

○背景が画像

デザイン → テーマ設定 → ナビゲーション｜テキスト色（背景が画像）

背景画像に合わせて、テキストの色を設定してください。

ヘッダー画像

○背景ベタ塗り時

デザイン → テーマ設定 → ナビゲーション｜テキスト色（背景ベタ塗り時）

背景色に合わせて、テキストの色を設定してください。

ヘッダー画像

ナビゲーション

フォントサイズ

デザイン → テーマ設定 → ナビゲーション｜フォントサイズ

「15px、16px、17px、18px」から設定してください。

ナビゲーション

テキストの太さ

デザイン → テーマ設定 → ナビゲーション｜テキストの太さ

「標準、太字」から設定してください。

ナビゲーション

サイドナビゲーションの追従

デザイン → テーマ設定 → サイドナビゲーション｜追従

「ON」にするとサイドナビゲーションが追従します。
ナビゲーションのカテゴリ数が多い場合などは「OFF」がオススメです。

※幅1200px以上の時のサイドナビゲーションに反映します

ナビゲーション

大カテゴリを太字

デザイン → テーマ設定 → ナビゲーション (CATEGORY)｜大カテゴリを太字

「ON」にするとナビゲーションの大カテゴリの文字が太字になります。

※カテゴリ管理Appが必要

ナビゲーション

中カテゴリを表示

デザイン → テーマ設定 → ナビゲーション (CATEGORY)｜中カテゴリを表示

「ON」にするとナビゲーションの中カテゴリが常時表示されます。
「OFF」にすると非表示になり、大カテゴリの「+」ボタンで開閉します。

※カテゴリ管理Appが必要

ナビゲーション

文言の変更

下記の文言は、日本語でも英語（大文字・小文字）でもお好きな文字に変更できます。またタイトルと連動しておりますので、自動的にタイトルも変更されます。

デザイン → テーマ設定 → ナビゲーション｜HOME

デザイン → テーマ設定 → ナビゲーション｜CATEGORY※カテゴリ管理Appが必要

デザイン → テーマ設定 → ナビゲーション｜ABOUT

デザイン → テーマ設定 → ナビゲーション｜BLOG※Blog Appが必要

デザイン → テーマ設定 → ナビゲーション｜COMMUNITY※コミュニティAppが必要

デザイン → テーマ設定 → ナビゲーション｜MEMBERSHIP※メンバーシップAppが必要

デザイン → テーマ設定 → ナビゲーション｜LOGIN※メンバーシップAppが必要

デザイン → テーマ設定 → ナビゲーション｜MY PAGE※メンバーシップAppが必要

デザイン → テーマ設定 → ナビゲーション｜CONTACT

※文字数が長くなる場合、表示が崩れる場合がございますので、その際はご調整ください

※SHOPPING GUIDEはSHOPPING GUIDEの表示を参照してください。

※FAQはFAQの表示を参照してください。

ナビゲーション

追加リンク①〜③文言

デザイン → テーマ設定 → ナビゲーション｜追加リンク①〜③文言

追加リンク①〜③の「文言」を設定してください。

※リンク先の設定が必須

※任意

ナビゲーション

追加リンク①〜③URL

デザイン → テーマ設定 → ナビゲーション｜追加リンク①〜③URL

追加リンク①〜③のリンク先となる「URL」を設定してください。

「https://admin.thebase.com」から始まるURLは管理画面のURLとなります。お客様からはアクセスできませんので、誤って設定しないようご注意ください。

※任意

ナビゲーション

カートアイコン

デザイン → テーマ設定 → ナビゲーション｜カートアイコン

「カート、バッグ」から設定してください。

カートアイコン

ナビゲーション

バナー画像①〜②

デザイン → テーマ設定 ナビゲーション｜バナー画像①〜②

画像を設定してください。最大2件まで登録が可能。

※幅1200px以上のグローバルナビゲーションには表示されません

※任意

※推奨［W1600×H任意］px

ナビゲーション

バナーリンク①〜②

デザイン → テーマ設定 ナビゲーション｜バナーリンク①〜②

①〜②それぞれのリンク先を設定してください。

※任意

ナビゲーション

SNSアカウント

ショップ設定 →ショップ情報 → SNS設定

管理画面の「ショップ設定 → ショップ情報 → SNS設定」でアカウントの設定をしてください。

ショップ設定

BASEのヘルプも併せてお読みください。

ナビゲーション

SNSアイコンの白背景色

デザイン → テーマ設定 → SNSアイコンの白背景設定

背景色の影響でSNSアイコンが目にくくなる場合は「ON」に設定してください。

SNSアイコン

フッター

ナビゲーションの背景色（〜幅1199px）

デザイン → テーマ設定 → フッターナビゲーション｜背景色（〜幅1199px）

背景色を設定してください。

※任意

フッター

ナビゲーションのテキスト色（〜幅1199px）

デザイン → テーマ設定 → フッターナビゲーション｜テキスト色（〜幅1199px）

テキストの色を設定してください。

※任意

フッター

コピーライトの背景色

デザイン → テーマ設定 → フッターコピーライト｜背景色

背景色を設定してください。

※任意

フッター

コピーライトのテキスト色

デザイン → テーマ設定 → フッターコピーライト｜テキスト色

テキストの色を設定してください。

※任意

TOP / メインビジュアル

スライドの種類

デザイン → テーマ設定 → スライド｜種類　

「スライド、フェード」から設定してください。

※スライドを使用する場合は画像を2枚以上必要

※静止で使用する場合は画像を1枚のみ登録してください

TOP / メインビジュアル

フルスクリーン表示

デザイン → テーマ設定 → スライド｜フルスクリーン表示

フルスクリーンで表示する場合は「ON」に設定してください。

TOP / メインビジュアル

フェード選択時のアニメーション

デザイン → テーマ設定 → スライド｜フェード選択時のアニメーション

アニメーションを使用する場合は「ON」に設定してください。
アニメーションは「拡大→縮小」のスケールアウトです。

TOP / メインビジュアル

フェード選択時の画像遷移速度（ゆっくり）

デザイン → テーマ設定 → スライド｜フェード選択時の画像遷移速度（ゆっくり）

画像遷移速度をゆっくりにしたい場合は「ON」に設定してください。
ゆったりとしたクロスフェードになります。

TOP / メインビジュアル

スライドタイトルのフォントサイズ

デザイン → テーマ設定 → スライド｜タイトルのフォントサイズ

「S、M、L」から設定してください。

TOP / メインビジュアル

スライドタイトルのテキストの太さ

デザイン → テーマ設定→ スライド｜タイトルのテキストの太さ

「標準、太字」から設定してください。

TOP / メインビジュアル

スライド①〜③の画像

デザイン → テーマ設定 → スライド①〜③｜画像

※画面からはみ出した部分は切り取られます

○横画像

横用の画像を設定してください。
「画面が横長」の時に表示されます。

※推奨［W1600×H任意］px

○縦画像

縦用の画像を設定してください。
「画面が縦長」の時に表示されます。

注）縦画像のみの設定だけでは表示されませんので、横画像も設定してください。

※推奨［W800×H任意］px

TOP / メインビジュアル

スライド①〜③のタイトル

デザイン → テーマ設定 → スライド①〜③｜タイトル

①〜③それぞれのタイトルを設定してください。

※任意

TOP / メインビジュアル

スライド①〜③のリンク先

デザイン → テーマ設定 → スライド①〜③｜リンク先

①〜③それぞれのリンク先を設定してください。

「https://admin.thebase.com」から始まるURLは管理画面のURLとなります。お客様からはアクセスできませんので、誤って設定しないようご注意ください。

※任意

TOP / メインビジュアル

スライド①〜③のボタンのテキスト

デザイン → テーマ設定 → スライド①〜③｜ボタンのテキスト

①〜③それぞれのボタンのテキストを設定してください。

※ショップが公開されていないとボタンは表示されません

※リンク先がない場合ボタンは表示されません

TOP / メインビジュアル

スライド①〜③のタイトルとボタンの色

デザイン → テーマ設定 → スライド①〜③｜タイトルとボタンの色

①〜③それぞれのタイトルとボタンの色を設定してください。

※スライドごとに色を変更できます

TOP / メインビジュアル

スライド①〜③のボタンのテキスト色

デザイン → テーマ設定 → スライド①〜③｜ボタンのテキスト色

①〜③それぞれのボタンのテキストの色を設定してください。

※ボタンの種類で「背景色あり」を選択した場合のみ

TOP / エリアの並べ替え

エリアの並べ替え

デザイン → テーマ設定 → エリアの並べ替え｜バナーエリア

デザイン → テーマ設定 → エリアの並べ替え｜PICK UPエリア

デザイン → テーマ設定 → エリアの並べ替え｜RANKINGエリア

デザイン → テーマ設定 → エリアの並べ替え｜BLOGエリア

デザイン → テーマ設定 → エリアの並べ替え｜ITEMエリア

「１〜５」から設定してください。

※同数字は上が優先されます

TOP / ITEM

見出し（商品一覧）

デザイン → テーマ設定 → ITEM｜見出し（商品一覧）

見出しの文言を設定してください。

※初期設定は「PRODUCTS」

TOP / ITEM

画像の比率

デザイン → テーマ設定 → ITEM｜画像の比率

「3:2、4:3、1:1、3:4」から設定してください。

※比率からはみ出した部分は切り取られます

TOP / ITEM

画像の推奨サイズ

デザイン → 商品管理 → 商品編集

商品画像の設定してください。
「カテゴリ管理 App」インストール後、CATEGORYページではヘッダー画像が表示されます。

※推奨サイズ［W1280×H任意］px

※推奨サイズより小さい場合、ヘッダー画像が粗くなる恐れがあります

TOP / ITEM

商品価格の文字の太さ

デザイン → テーマ設定 → ITEM｜商品価格の文字の太さ

「標準、太字」から設定してください。

TOP / ITEM

商品ステータスの色

デザイン → テーマ設定 → ITEM｜商品ステータスの色

商品ステータスの色を設定してください。

※SALE、SOLD OUT、会員限定商品、予約販売、抽選販売、COMING SOON、テイクアウト

TOP / ITEM

ボタンのテキスト

デザイン → テーマ設定 → ITEM｜ボタンのテキスト

ボタンのテキストの文言を設定してください。

TOP / CONCEPT

エリアの表示

デザイン → テーマ設定 → CONCEPT｜エリアの表示

表示する場合は「ON」に設定してください。

TOP / CONCEPT

背景色

デザイン → テーマ設定 → CONCEPT｜背景色

背景色を設定してください。

TOP / CONCEPT

背景画像の使用

デザイン → テーマ設定 → CONCEPT｜背景画像の使用

背景画像を使用する場合は「ON」に設定してください。

※文字が見えにくくならないようご注意ください

※透過PNGとの併用可

TOP / CONCEPT

背景画像の表示方法

デザイン → テーマ設定 → CONCEPT｜背景画像の表示方法

「領域を覆う、横に繰り返し、縦に繰り返し、縦横に繰り返し」から設定してください。

○領域を覆う

領域全体を覆い、はみ出した部分は切り取られます。

背景縦画像

デザイン → テーマ設定 → CONCEPT｜背景縦画像

※必須

※推奨サイズ［W800×H1731］px

背景横画像

デザイン → テーマ設定 → CONCEPT｜背景横画像

※推奨サイズ［W1920×H1080］px

領域を覆う

○横に繰り返し

領域の高さに合わせて横に繰り返します。

背景縦画像

デザイン → テーマ設定 → CONCEPT｜背景縦画像

※必須

※推奨サイズ［W任意×H1731］px

背景横画像

デザイン → テーマ設定 → CONCEPT｜背景横画像

※推奨サイズ［W任意×H1080］px

横に繰り返し

○縦に繰り返し

領域の幅に合わせて縦に繰り返します。

背景縦画像

デザイン → テーマ設定 → CONCEPT｜背景縦画像

※必須

※推奨サイズ［W800×H任意］px

背景横画像

デザイン → テーマ設定 → CONCEPT｜背景横画像

※推奨サイズ［W1920×H任意］px

縦に繰り返し

○縦横に繰り返し

領域内で縦横に繰り返します。

背景縦画像

デザイン → テーマ設定 → CONCEPT｜背景縦画像

※必須

※推奨サイズ［W任意×H任意］px

背景横画像

デザイン → テーマ設定 → CONCEPT｜背景横画像

※推奨サイズ［W任意×H任意］px

縦横に繰り返し

○背景色との併用

透過PNGで設定すれば背景色と併用することができます。

背景色との併用

TOP / CONCEPT

背景画像

デザイン → テーマ設定 → CONCEPT｜背景画像

「縦、横」の画像を設定してください。

TOP / CONCEPT

見出し

デザイン → テーマ設定 → CONCEPT｜見出し

見出しの文言を設定してください。

TOP / CONCEPT

見出しの色

デザイン → テーマ設定 → CONCEPT｜見出しの色

見出しの色を設定してください。

TOP / CONCEPT

キャッチコピー

デザイン → テーマ設定 → CONCEPT｜キャッチコピー

キャッチコピーの文言を設定してください。

TOP / CONCEPT

キャッチコピーのフォントサイズ

デザイン → テーマ設定 → CONCEPT｜キャッチコピーのフォントサイズ

「S、M、L」から設定してください。

TOP / CONCEPT

本文

デザイン → テーマ設定 → CONCEPT｜本文

本文を設定してください。

TOP / CONCEPT

キャッチコピーと本文の色

デザイン → テーマ設定 → CONCEPT｜キャッチコピーと本文の色

キャッチコピーと本文の色を設定してください。

TOP / CONCEPT

ボタンのテキスト

デザイン → テーマ設定 → CONCEPT｜ボタンのテキスト

ボタンのテキストの文言を設定してください。

※リンク先はABOUTページ

TOP / CONCEPT

ボタンの色

デザイン → テーマ設定 → CONCEPT｜ボタンの色

ボタンの色を設定してください。

TOP / CONCEPT

ボタンのテキスト色

デザイン → テーマ設定 → CONCEPT｜ボタンのテキスト色

ボタンのテキストの色を設定してください。

※ボタンの種類で「背景色あり」を選択した場合のみ

TOP / CONCEPT

画像 or YouTube動画

デザイン → テーマ設定 → CONCEPT｜画像 or YouTube動画

画像またはYouTube動画を選択してください。

※同時使用はできません

○画像

デザイン → テーマ設定 → CONCEPT｜画像

画像を設定してください。

※画像比率は「3:2」を推奨しています

※推奨サイズ［W1200×H800］px

○画像の左上の角丸

デザイン → テーマ設定 → CONCEPT｜画像の左上の角丸

「ON」にすると画像の左上が角丸になります。

○YouTube動画

デザイン → テーマ設定 → CONCEPT｜YouTube動画

「共有 → 埋め込む → ifremeタグをコピー」して設定してください。

YouTube埋め込み方法
YouTube埋め込み方法
YouTube埋め込み方法

TOP / INFORMATION

エリアの表示

デザイン → テーマ設定 → INFORMATION｜エリアの表示

表示する場合は「ON」に設定してください。

TOP / INFORMATION

見出し

デザイン → テーマ設定 → INFORMATION｜見出し

見出しの文言を設定してください。

TOP / INFORMATION

日付①〜③

デザイン → テーマ設定 → INFORMATION｜日付①〜③

日付①〜③を設定してください。

※任意

TOP / INFORMATION

テキスト①〜③

デザイン → テーマ設定 → INFORMATION｜テキスト①〜③

テキスト①〜③を設定してください。

※必須

TOP / INFORMATION

リンク先①〜③

デザイン → テーマ設定 → INFORMATION｜リンク先①〜③

リンク先①〜③を設定してください。

※任意

TOP / バナー

エリアの表示

デザイン → テーマ設定 → バナー｜エリアの表示

表示する場合は「ON」に設定してください。

TOP / バナー

見出し

デザイン → テーマ設定 → バナー｜見出し

見出しの文言を設定してください。

※任意で、空欄の時は表示されません

TOP / バナー

タイトルの文字の太さ

デザイン → テーマ設定 → バナー｜タイトルの文字の太さ

「標準、太字」から設定してください。

TOP / バナー

画像①〜②

デザイン → テーマ設定 → バナー｜画像①〜②

画像（最大2件）の設定をしてください。

※推奨サイズ［W800×H任意］px

※同じサイズでの登録を推奨

※画像比率の設定はありません

TOP / バナー

リンク先①〜②

デザイン → テーマ設定 → バナー｜リンク先①〜②

画像①〜②に対してのリンク先の設定をしてください。

「https://admin.thebase.com」から始まるURLは管理画面のURLとなります。お客様からはアクセスできませんので、誤って設定しないようご注意ください。

※任意

TOP / バナー

タイトル①〜②

デザイン → テーマ設定 → バナー｜タイトル①〜②

画像①〜②に対してのタイトルの設定をしてください。

※任意

TOP / バナー

テキスト①〜②

デザイン → テーマ設定 → バナー｜テキスト①〜②

画像①〜②に対してのテキストの設定をしてください。

※任意

TOP / PICK UP

エリアの表示

デザイン → テーマ設定 → PICK UP｜エリアの表示

表示する場合は「ON」に設定してください。

TOP / PICK UP

見出し

デザイン → テーマ設定 → PICK UP｜見出し

見出しの文言を設定してください。

TOP / PICK UP

ボタンのテキスト

デザイン → テーマ設定 → PICK UP｜ボタンのテキスト

ボタンのテキストの文言を設定してください。

TOP / PICK UP

画像の比率

デザイン → テーマ設定 → PICK UP｜画像の比率

「3:2、4:3、1:1、3:4」から設定してください。

※比率からはみ出した部分は切り取られます

TOP / PICK UP

画像

デザイン → テーマ設定 → PICK UP｜画像

画像の設定してください。

※推奨サイズ［W1280×H任意］px
※登録は1件のみ

TOP / PICK UP

タイトル

デザイン → テーマ設定 → PICK UP｜タイトル

画像に対してのタイトルを設定してください。

TOP / PICK UP

価格

デザイン → テーマ設定 → PICK UP｜価格

画像に対しての価格を設定してください。

TOP / PICK UP

商品ステータス

デザイン → テーマ設定 → PICK UP｜商品ステータス

画像に対しての商品ステータスを設定してください。

※「sale、Sale、SALE、off、Off、OFF」の文字が含まれている場合は「価格の色」が「商品ステータスの色」に変更になります

TOP / PICK UP

商品説明

デザイン → テーマ設定 → PICK UP｜商品説明

画像に対しての商品説明を設定してください。

TOP / PICK UP

リンク先

デザイン → テーマ設定 → PICK UP｜リンク先

画像に対してのリンク先を設定してください。

「https://admin.thebase.com」から始まるURLは管理画面のURLとなります。お客様からはアクセスできませんので、誤って設定しないようご注意ください。

TOP / RANKING

エリアの表示

デザイン → テーマ設定 → RANKING｜エリアの表示

表示する場合は「ON」に設定してください。

TOP / RANKING

見出し

デザイン → テーマ設定 → RANKING｜見出し

見出しの文言を設定してください。

TOP / RANKING

順位ラベルの表示

デザイン → テーマ設定 → RANKING｜順位ラベルの表示

「ON」にすると順位ラベルが表示されます。

※RANKING以外で使用する場合はOFF

TOP / RANKING

順位ラベルの色

デザイン → テーマ設定 → RANKING｜順位ラベルの色

順位ラベルの色を設定してください。

TOP / RANKING

画像①〜③

デザイン → テーマ設定 → RANKING｜画像①〜③

画像①〜③（最大3件）の設定してください。

※推奨サイズ［W1280×H任意］px

※画像の比率は「 ITEM｜画像の比率」で設定した比率が反映されます

※画面幅が767pxまでの場合は、2件以上設定するとスライドの自動再生がスタートします

TOP / RANKING

タイトル①〜③

デザイン → テーマ設定 → RANKING｜タイトル①〜③

画像①〜③に対しての商品タイトルを設定してください。

TOP / RANKING

価格①〜③

デザイン → テーマ設定 → RANKING｜価格①〜③

画像①〜③に対しての商品価格を設定してください。

TOP / RANKING

商品ステータス①〜③

デザイン → テーマ設定→ RANKING｜商品ステータス①〜③

画像①〜③に対しての商品ステータスを設定してください。

※「sale、Sale、SALE、off、Off、OFF」の文字が含まれている場合は「価格の色」が「商品ステータスの色」に変更になります

TOP / RANKING

商品説明①〜③

デザイン → テーマ設定 → RANKING｜商品説明①〜③

画像①〜③に対しての商品説明を設定してください。

TOP / RANKING

リンク先①〜③

デザイン → テーマ設定 → RANKING｜リンク先①〜③

画像①〜③に対してのリンク先を設定してください。

「https://admin.thebase.com」から始まるURLは管理画面のURLとなります。お客様からはアクセスできませんので、誤って設定しないようご注意ください。

ALL / Instagram

Sauce by SNPT (Snapppt)のアカウント取得・設定

外部サービスの Sauce by SNPT (Snapppt)を利用し、Instagramのフィード表示が可能です。

アカウント取得・設定方法は下記URLでご確認ください。

ALL / Instagram

表示設定

デザイン → テーマ設定 → Instagram｜フィードの表示

表示する場合は「ON」に設定してください。

ALL / Instagram

見出し

デザイン → テーマ設定 → Instagram｜見出し

見出しの文言を設定してください。

ALL / Instagram

Sauce by SNPT(Snapppt)のフィード埋め込みコード

デザイン → テーマ設定 → Instagram｜Sauce by SNPT(Snapppt)のフィード埋め込みコード

Sauce by SNPT (Snapppt) で取得した「Live Instagram feed embed code」を貼り付けてください。

Instagramフィード

ALL / Instagram

フルサイズで表示

デザイン → テーマ設定 → Instagram｜フルサイズで表示

「ON」にするとフルサイズで表示されます。

※幅1200px以上の場合のみ

■「ON」の時

画面横幅いっぱいで表示されます。

Instagramフィード

■「OFF」の時

サイドバーの横で、他のコンテンツと同じ幅で表示されます。

Instagramフィード

ALL / Instagram

リンク先

デザイン → テーマ設定 → Instagram｜リンク先

リンク先を設定してください。

※Instagramアカウントへの誘導としてお使いいただけます

※任意

ALL / Instagram

ボタンのテキスト

デザイン → テーマ設定 → Instagram｜ボタンのテキスト

ボタンのテキストの文言を設定してください。

※リンク先がない場合ボタンは表示されません

ABOUT / ABOUT

ヘッダー画像

デザイン → テーマ設定 → ABOUT｜ヘッダー画像

ヘッダー画像を表示させたい場合のみ設定してください。

※推奨サイズ［W1280×H1280］px

※任意

ABOUT / ABOUT

ショップの説明

ショップ設定 → ショップ情報 → ショップの説明

ショップの説明を設定してください。

ABOUTページに記載されます。Googleなどの検索結果画面や、TwitterやFacebookでシェアされたときの説明文にもなります。

※ABOUTページの上部に表示されます

※URLを記載すると自動的にリンクに変換されます

ABOUT / ABOUT

サブタイトルの色

デザイン → テーマ設定 → ABOUT｜サブタイトルの色

サブタイトルの色を設定してください。

ABOUT / ABOUT

キャッチコピーのフォントサイズ

デザイン → テーマ設定 → ABOUT｜キャッチコピーのフォントサイズ

「S、M、L」から設定してください。

※サブタイトルのフォントサイズは「キャッチコピーのフォントサイズの80%」の大きさで表示されます

ABOUT / ABOUT

エリア①〜④の表示

デザイン → テーマ設定 → ABOUT｜エリア①の表示

デザイン → テーマ設定 → ABOUT｜エリア②の表示

デザイン → テーマ設定 → ABOUT｜エリア③の表示

デザイン → テーマ設定 → ABOUT｜エリア④の表示

必要なエリアを「ON」に設定してください。

ABOUT / ABOUT

画像①〜④

デザイン → テーマ設定 → ABOUT｜画像①〜④

画像の設定をしてください。

※推奨サイズ［W800×H任意］px

ABOUT / ABOUT

サブタイトル①〜④

デザイン → テーマ設定 → ABOUT｜サブタイトル①〜④

エリア①〜④に対してのサブタイトルの設定をしてください。

※任意

ABOUT / ABOUT

キャッチコピー①〜④

デザイン → テーマ設定 → ABOUT｜キャッチコピー①〜④

エリア①〜④に対してのキャッチコピーの設定をしてください。

ABOUT / ABOUT

本文①〜④

デザイン → テーマ設定 → ABOUT｜本文①〜④

エリア①〜④に対しての本文の設定をしてください。

ABOUT / ABOUT

リンク先①〜④

デザイン → テーマ設定 → ABOUT｜リンク先①〜④

エリア①〜④に対してのリンク先の設定をしてください。

「https://admin.thebase.com」から始まるURLは管理画面のURLとなります。お客様からはアクセスできませんので、誤って設定しないようご注意ください。

※任意

ABOUT / ABOUT

ボタンのテキスト①〜④

デザイン → テーマ設定 → ABOUT｜ボタンのテキスト①〜④

エリア①〜④に対してのボタンのテキストの設定をしてください。

※リンク先がない場合ボタンは表示されません

ABOUT / SHOP INFO

表示設定

デザイン → テーマ設定 → SHOP INFO｜表示設定

表示する場合は「ON」に設定してください。

ABOUT / SHOP INFO

見出し

デザイン → テーマ設定 → SHOP INFO｜見出し

見出しの文言を設定してください。

ABOUT / SHOP INFO

SHOP情報

デザイン → テーマ設定 → SHOP INFO｜SHOP情報

SHOP情報を設定してください。

ABOUT / SHOP INFO

SHOP地図

デザイン → テーマ設定 → SHOP INFO｜SHOP地図

「Google Maps → 検索（店名or住所）→ 共有 → 地図を埋め込む → HTMLをコピー」して設定してください。

※任意

Google Mapsの設定
Google Mapsの設定
Google Mapsの設定
Google Mapsの設定

ABOUT / SHOPPING GUIDE

SHOPPING GUIDEの表示設定

デザイン → テーマ設定 → SHOPPING GUIDE｜表示設定

表示する場合は「ON」に設定してください。

ABOUT / SHOPPING GUIDE

SHOPPING GUIDEの見出し

デザイン → テーマ設定 → SHOPPING GUIDE｜見出し

見出しの文言を設定してください。

ABOUT / SHOPPING GUIDE

配送・配送料の表示設定

デザイン → テーマ設定 → 配送・配送料｜表示設定

表示する場合は「ON」に設定してください。

※「 SHOPPING GUIDE｜表示設定」で「ON」の設定が必要

ABOUT / SHOPPING GUIDE

配送・配送料の見出し

デザイン → テーマ設定 → 配送・配送料｜見出し

見出しの文言を設定してください。

ABOUT / SHOPPING GUIDE

配送・配送料の送料の条件

デザイン → テーマ設定 → 配送・配送料｜送料の条件

送料の条件を設定してください。

ABOUT / SHOPPING GUIDE

配送・配送料の送料

デザイン → テーマ設定 → 配送・配送料｜送料

送料を設定してください。

ABOUT / SHOPPING GUIDE

配送・配送料の送料の色

デザイン → テーマ設定 → 配送・配送料｜送料の色

送料の色を設定してください。

ABOUT / SHOPPING GUIDE

配送・配送料の送料の注意事項

デザイン → テーマ設定 → 配送・配送料｜送料の注意事項

送料の注意事項を設定してください。

ABOUT / SHOPPING GUIDE

配送・配送料のテキスト

デザイン → テーマ設定 → 配送・配送料｜テキスト

テキストを設定してください。

ABOUT / SHOPPING GUIDE

お支払い方法の表示設定

デザイン → テーマ設定 → お支払い方法｜表示設定

表示する場合は「ON」に設定してください。

※「 SHOPPING GUIDE｜表示設定」で「ON」の設定が必要

ABOUT / SHOPPING GUIDE

お支払い方法の見出し

デザイン → テーマ設定 → お支払い方法｜見出し

見出しの文言を設定してください。

ABOUT / SHOPPING GUIDE

お支払い方法のテキスト

デザイン → テーマ設定 → お支払い方法｜テキスト

テキストを設定してください。

ABOUT / SHOPPING GUIDE

お支払い方法の決済の種類

デザイン → テーマ設定 → お支払い方法｜あと払い（Pay ID）

デザイン → テーマ設定 → お支払い方法｜クレジットカード決済

デザイン → テーマ設定 → お支払い方法｜キャリア決済

デザイン → テーマ設定 → お支払い方法｜銀行振込

デザイン → テーマ設定 → お支払い方法｜コンビニ決済・Pay-easy

デザイン → テーマ設定 → お支払い方法｜Amazon Pay

デザイン → テーマ設定 → お支払い方法｜PayPal

デザイン → テーマ設定 → お支払い方法｜後払い決済

表示する決済方法を「ON」に設定してください。

※「 SHOPPING GUIDE｜表示設定」と「 お支払い方法｜表示設定」で「ON」の設定が必要

※「ショップ設定 → 決済方法」で有効にした決済方法と合わせてください

ABOUT / SHOPPING GUIDE

キャンセル・返品・交換の表示設定

デザイン → テーマ設定 → キャンセル・返品・交換｜表示設定

表示する場合は「ON」に設定してください。

※「 SHOPPING GUIDE｜表示設定」で「ON」の設定が必要

ABOUT / SHOPPING GUIDE

キャンセル・返品・交換の見出し

デザイン → テーマ設定 → キャンセル・返品・交換｜見出し

見出しの文言を設定してください。

ABOUT / SHOPPING GUIDE

キャンセルの表示設定

デザイン → テーマ設定 → キャンセル｜表示設定

表示する場合は「ON」に設定してください。

※「 SHOPPING GUIDE｜表示設定」と「 キャンセル・返品・交換｜表示設定」で「ON」の設定が必要

ABOUT / SHOPPING GUIDE

キャンセルの見出し

デザイン → テーマ設定 → キャンセル｜見出し

見出しの文言を設定してください。

ABOUT / SHOPPING GUIDE

キャンセルのテキスト

デザイン → テーマ設定 → キャンセル｜テキスト

テキストを設定してください。

ABOUT / SHOPPING GUIDE

返品・交換の表示設定

デザイン → テーマ設定 → 返品・交換｜表示設定

表示する場合は「ON」に設定してください。

※「 SHOPPING GUIDE｜表示設定」と「 キャンセル・返品・交換｜表示設定」で「ON」の設定が必要

ABOUT / SHOPPING GUIDE

返品・交換の見出し

デザイン → テーマ設定 → 返品・交換｜見出し

見出しの文言を設定してください。

ABOUT / SHOPPING GUIDE

返品・交換のテキスト

デザイン → テーマ設定 → 返品・交換｜テキスト

テキストを設定してください。

ABOUT / SHOPPING GUIDE

その他のご利用ガイドの表示設定

デザイン → テーマ設定 → その他のご利用ガイド｜表示設定

表示する場合は「ON」に設定してください。

※「 SHOPPING GUIDE｜表示設定」と「 キャンセル・返品・交換｜表示設定」で「ON」の設定が必要

ABOUT / SHOPPING GUIDE

その他のご利用ガイドの見出し

デザイン → テーマ設定 → その他のご利用ガイド｜見出し

見出しの文言を設定してください。

ABOUT / SHOPPING GUIDE

その他のご利用ガイドのテキスト

デザイン → テーマ設定 → その他のご利用ガイド｜テキスト

テキストを設定してください。

ABOUT / FAQ

表示設定

デザイン → テーマ設定 → FAQ｜表示設定

表示する場合は「ON」に設定してください。

ABOUT / FAQ

見出し

デザイン → テーマ設定 → FAQ｜見出し

見出しの文言を設定してください。

ABOUT / FAQ

色の設定

デザイン → テーマ設定 → FAQ｜色の設定

「Q」と「A」の色を設定してください。

ABOUT / FAQ

Qのテキスト色

デザイン → テーマ設定 → FAQ｜Qのテキスト色

「Q」のテキストの色を設定してください。

ABOUT / FAQ

質問①〜⑤

デザイン → テーマ設定 → FAQ｜質問①〜⑤

質問を設定してください。

※最大5件まで登録可能

ABOUT / FAQ

回答①〜⑤

デザイン → テーマ設定 → FAQ｜回答①〜⑤

質問①〜⑤に対する回答を設定してください。

※回答のみの表示はできません

※質問の設定が必要です

ITEM / 商品ページ

共通エリアのテキスト

デザイン → テーマ設定 → 商品ページ｜共通エリアのテキスト

共通エリアのテキストを表示させる場合はテキストを設定してください。

※文字は太字になります

ITEM / 商品ページ

共通エリアのテキスト色

デザイン → テーマ設定 → 商品ページ｜共通エリアのテキスト色

共通エリアのテキストの色を設定してください。

ITEM / 関連商品

表示設定

デザイン → テーマ設定 → ITEM｜関連商品の表示

関連商品を表示させる場合は「ON」にしてください。

ITEM / 関連商品

見出し

デザイン → テーマ設定 → ITEM｜関連商品の見出し

見出しの文言を設定してください。

Apps / カテゴリ管理

共通ヘッダー画像

デザイン → テーマ設定 → CATEGORY｜共通ヘッダー画像

ヘッダー画像を共通で表示させたい場合のみ設定してください。
設定がない場合はカテゴリページの1番最初の商品画像が自動的に表示されます。

※カテゴリ管理 Appのインストールが必要

※カテゴリページは全て同じヘッダー画像になります

※推奨サイズ［W1280×H1280］px

※任意

Apps / Blog

共通ヘッダー画像

デザイン → テーマ設定 BLOG｜共通ヘッダー画像

ヘッダー画像を共通で表示させたい場合のみ設定してください。
設定がない場合はBlog一覧の1番最初のBlog画像が自動的に表示されます。

※Blog Appのインストールが必要

※Blog一覧は全て同じヘッダー画像になります

※推奨サイズ［W1280×H1280］px

※任意

Apps / Blog

レイアウト

デザイン → テーマ設定 → BLOG｜レイアウト

「横並び、縦並び」から設定をしてください。

○「横並び」を選択した場合

画像とテキストが横並びで表示されます。

横並びレイアウト

○「縦並び」を選択した場合

画像とテキストが縦並びで表示されます。

縦並びレイアウト

Apps / Blog

画像の比率

デザイン → テーマ設定 → BLOG｜画像の比率

「3:2、4:3、1:1、3:4」から設定してください。

※比率からはみ出した部分は切り取られます

Apps / Blog

抜粋文の表示

デザイン → テーマ設定 → BLOG｜抜粋文の表示

表示する場合は「ON」に設定してください。

Apps / Blog

ボタンのテキスト

デザイン → テーマ設定 → BLOG｜ボタンのテキスト

ボタンのテキストの文言を設定してください。

Apps / お知らせバナー

テキストの左揃え

デザイン → テーマ設定 → お知らせバナー｜テキスト左揃えにする

「ON」にするとテキストが左揃えになります。

※お知らせバナーAppのインストールが必要

Apps / お知らせバナー

区切り線（上下線）の表示

デザイン → テーマ設定 → お知らせバナー｜区切り線（上下線）

「ON」にすると区切り線（上下線）が表示されます。

Apps / お知らせバナー

線の色

デザイン → テーマ設定 → お知らせバナー｜線の色

線の色を設定してください。

※「 お知らせバナー｜区切り線（上下線）」で「ON」の設定が必要

Apps / メールマガジン

見出し

デザイン → テーマ設定 → メールマガジン｜見出し

見出しの文言を設定してください。

※メールマガジンAppのインストールが必要

Apps / メールマガジン

テキスト

デザイン → テーマ設定 → メールマガジン｜テキスト

テキストの文言を設定してください。

Apps / コミュニティ

ヘッダー画像

デザイン → テーマ設定 COMMUNITY｜ヘッダー画像

ヘッダー画像を任意で設定したい場合のみ設定してください。
設定がない場合は会員限定商品の1番最初の商品画像が自動的に表示されます。

※推奨サイズ［W1280×H1280］px

※任意

※コミュニティAppのインストールが必要

Apps / メンバーシップ

ヘッダー画像

デザイン → テーマ設定 → MEMBERSHIP｜ヘッダー画像

ヘッダー画像を表示させたい場合のみ設定してください。

※推奨サイズ［W1280×H1280］px

※任意

※メンバーシップAppのインストールが必要

Apps / メンバーシップ

特典画像の比率

デザイン → テーマ設定 → MEMBERSHIP｜特典画像の比率

「3:2、4:3、1:1、3:4」から設定してください。

※比率からはみ出した部分は切り取られます

OGP画像設定

OGP画像

デザイン → テーマ設定 → OGP画像設定｜OGP画像

ページがSNSでシェアされた際に表示されるサムネイル画像を設定できます。
OGP画像を設定してください。

※推奨［W1200×H630］px

※商品ページ以外が対象となります

注）SNSのキャッシュの影響で、設定したOGP画像が正しく表示されないことがあります。
　　必ず各SNSのキャッシュを削除を行なってください。

■OGPのキャッシュ削除方法

○Facebookの場合

  1. 下記のサイトにアクセス

    シェアデバッガー - Meta for Developers - Facebook

  2. 「URL」を入力 →「デバック」をクリック
  3. 「もう一度スクレイピング」をクリック
  4. 「リンクをプレビュー」の画像を確認
  5. 「Facebook」の投稿で「URLを貼り付けて」画像を確認
  6. 設定した画像が表示されていれば完了
補足）すでにFacebookでシェアした投稿の画像を変更したい場合

Facebookの投稿の右上にある「•••」をクリックし「シェアした添付ファイルを更新」をクリック

○Twitterの場合

  1. 下記のサイトにアクセス

    Twitter Card Validator - Twitter cards

  2. 「URL」を入力 →「Preview card」をクリック
  3. 成功メッセージの表示を確認（プレビューでの画像表示はありません）
  4. 「Twitter」の投稿で「URLを貼り付けて」画像を確認
  5. 設定した画像が表示されていれば完了
注）設定した画像が反映されない場合

Twitterのカードデータは、更新されるまで最大7日間キャッシュされ続けるそうで、時間がかかる可能性がありそうです。
画像が反映されない場合は、以下をお試しいただくとうまく表示されるかもしれません。

  1. 登録したOGP画像を一旦削除
  2. Card Validatorでキャッシュ削除
  3. 「Twitter」の投稿で「URLを貼り付けて」画像を確認
  4. 登録したOGP画像をもう一度登録
  5. Card Validatorでキャッシュ削除
  6. 「Twitter」の投稿で「URLを貼り付けて」画像を確認

○LINEの場合

  1. 下記のサイトにアクセス

    Page Poker

  2. 「URL」を入力 →「Clear Cache」にチェック →「Submit」をクリック
  3. 表示結果の「Open graph → image」「Obs properties and link preview → link preview」を確認
  4. 「LINE」の投稿で「URLを貼り付けて」画像を確認
  5. 設定した画像が表示されていれば完了

CSS追加設定

CSS追加設定（上級者向け）

デザイン → テーマ設定 → CSS追加設定｜CSSコード

CSSを入力してください。

CSSの知識をお持ちの方はデザインのカスタマイズが可能です。

カスタマイズはHTML編集Appでも可能ですが、HTML編集Appを使用するとテーマのアップデートが行われませんので、自動アップデートを維持しつつ、CSSでカスタマイズしたい方はこちらをご利用ください。

※技術的なサポートは行なっておりません

■CSS追加場所

<head>
	︙
	<style>
		︙
		------------------
		ここにCSSが追加されます
		------------------
	</style>
</head>