HOW TO USE

基本設定

背景の設定

デザイン → 背景

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

基本設定

フォント表示のルール

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

■サンプルテキスト

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

1)本文のみのフォントで設定した場合

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

2)本文以外(欧文)を「ON」にした場合

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

3)本文以外(和文)を「ON」にした場合

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

4)本文以外(欧文)と(和文)を「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」から設定してください。

ナビゲーション

テキストの太さ

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

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

ナビゲーション

文言の変更

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

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

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

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

デザイン → テーマ設定 →【ナビゲーション】BLOG(BlogAppが必要)

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

デザイン → テーマ設定 →【ナビゲーション】COIN(ショップコインAppが必要)

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

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

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

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

ナビゲーション

カートアイコン

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

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

カートアイコン

ナビゲーション

SNSアカウント

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

アカウントを設定してください。

ショップ設定

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