BASEデザインテンプレート「FITNESS -オンライン-」の使い方

お知らせ

新しくBASEショップの開設を考えている方に
お得な特典を提供いたします！

弊社はBASE PartnersにてBASEオフィシャルパートナー企業に認定されております。
弊社を通してBASEショップを新規開設していただくと、下記の特典がございます。

BASEロゴ非表示App（月額500円）の無料提供
購入者様がご利用いただけるBASE負担クーポン1万円分（1,000円×10枚）の無償配布

特典の提供には申請が必要になります。
下記の専用ページにて詳細な条件等をご確認の上お申し込みください。

BASEショップパートナー特典申請フォーム

特徴

BASEデザインマーケットにて販売中！

BASEデザインテーマ「FITNESS ONLINE」をBASEデザインマーケットにて販売中です。

ジムやフィットネスをテーマにデザインを起こしたクールで無機質な印象のBASEデザインテーマです。
無駄な装飾がほとんどないシンプルなデザインなので、どなたでも使いやすいテーマです。

全ページレスポンシブ対応、コミュニティAppなどの便利なAppにも対応！ぜひご検討ください！

対応するAppsについて

※ここに記載しているのはテーマに影響のあるAppsの一覧です。その他のAppsは全てご利用いただけます。

BASEロゴ非表示App	◯ 対応しています
ラベルApp	◯ 対応しています
BlogApp	◯ 対応しています
カテゴリ管理App	◯ 対応しています
商品検索App	◯ 対応しています
レビューApp	◯ 対応しています
セールApp	◯ 対応しています
ショップコインApp	◯ 対応しています
販売期間設定App	◯ 対応しています
予約販売App	◯ 対応しています
英語・外貨対応App	× 対応していません
デジタルコンテンツ販売App	◯ 対応しています
メッセージApp	◯ 対応しています
送料詳細設定App	◯ 対応しています
商品説明カスタムApp	◯ 対応しています
抽選販売App	◯ 対応しています
テイクアウトApp	◯ 対応しています
商品オプションApp	◯ 対応しています
コミュニティApp	◯ 対応しています
定期便App	◯ 対応しています
再入荷自動通知App	◯ 対応しています
年齢制限App	◯ 対応しています
お知らせバナーApp	◯ 対応しています
メールマガジンApp	◯ 対応しています
メンバーシップApp	◯ 対応しています

複数デバイスに対応するレスポンシブデザイン

レスポンシブデザインでスマホ・タブレット・PCまで、あらゆるデバイスで綺麗に表示され、使いやすいテーマとなっています。

※サンプル画像のため実際の色味やアイコン・商品リストの数などに違いがあります。
実際の見た目はBASEデザインマーケットの購入ページからプレビュー機能を使ってご確認ください。
（※プレビューにはBASEの会員登録が必要です）

広範囲でデザインのカスタマイズが可能

弊社では「FITNESS ONLINE」以外に10のテーマを開発・販売しております。BASEデザインマーケットで販売されている約70テーマ中、11テーマが弊社開発となりますので、BASEのテーマ作成に関しては仕様や作成方法を熟知しております。もっとショップ独自のデザインや機能をご希望の場合はカスタマイズが可能な場合がございます。まずはご相談ください。

より自由なデザインを希望
する方はこちらから

デモサイト

デザインの雰囲気をご確認いただけるデモサイトをご用意しました。

※あくまで見た目・デザイン確認用のデモサイトです。実際のBASEショップを使ったサイトではないため、足りないページやコンテンツがあったり、意図したページに遷移できなかったり、購入画面に進めなかったりしますがミスではなく意図的なものです。必要なページのデザインのみが確認できる状態にしています。あらかじめご了承ください。

実際のテーマ表示に関してはBASEデザインマーケットで購入画面から「プレビュー」機能が使えます。そちらは実際にデザイン編集画面を触ることができます。好きな画像を入れたりテキストを入力したりできますのでさらに詳細に確認したい場合はそちらをお使いください。

デモサイトをみる

使い方

テーマの編集方法／基本設定

BASE管理画面->デザイン編集->画面左側「テーマ」から「FITNESS ONLINE」を選択します。

次に「テーマ設定」「ショップロゴ」「背景」からテーマをカスタマイズします。

「ショップロゴ」「背景」についてはテーマに関係なくBASE側が用意している項目になりますので基本的に必須の設定となります。「テーマ設定」が「FITNESS ONLINE」オリジナルの設定項目となります。

それぞれの入力・設定項目について以降で細かく記載しているので、ご参考ください。

※「テーマ設定」で設定できないBASE Appsや商品編集画面についてなどはテーマの範囲外ですのでお問い合わせはBASEにお願いいたします。

ショップロゴ設定

BASE管理画面->デザイン編集->画面左側「ショップロゴ」からサイトのロゴを設定できます。

ロゴ画像を使用する

ONにすると「ロゴ画像アップロード」が表示され、任意の画像をアップロードして使用できるようになります。
OFFの場合は、「ロゴタイトル」に任意の文字を入力し、「カラー」から文字色を調整することができます。

オリジナルロゴを作成

「ショップロゴ作成App」をインストールしている場合は「オリジナルロゴを作成」と表示され、自分でロゴ画像を簡単に作ることができます。

※「ショップロゴ作成App」の詳細についてはBASE Appsのページからお調べください。

背景設定

BASE管理画面->デザイン編集->画面左側「背景」からサイトの背景を設定できます。

カラーから選ぶ

好きな色を選んで指定することで背景色が変更されます。

パターンから選ぶ

BASEが用意しているパターン画像から好きなものを選択することでパターン画像が背景に設定されます。
「+」ボタンから任意の背景画像をアップロードして設定することも可能です。
「背景画像を繰り返す」をONにすると画像を繰り返し表示します。
OFFにすると画像を画面固定表示します。

全ページ共通設定

↓↓↓以降がこのテーマオリジナルの設定項目となります↓↓↓

BASE管理画面->デザイン編集->画面左側「テーマ設定」から各項目を設定できます。

全ページ共通で一括変更できる設定項目について。
カラー設定やフォント設定など、サイト全体で共通で使われているデザインの変更ができます。

各カラーの一括調整

「テキストカラー」以降の項目で設定できます。
テーマ全体のカラー調整はここに記載のある項目から行うことができます。
一括でカラー調整できる項目はすべてデザインオプションの上の方にまとめてあります。

テキストカラー

全体のテキストカラーを一括で設定できます。
背景色を変えて文字の視認性が悪くなった時に調整用としてお使いください。

ポイントカラー

主にテキストリンクの色を設定できます。
ブログやショップ説明などの平文ではリンク色として、
ヘッダー・フッターやBLOG一覧・商品一覧などではリンクのマウスホバー色として設定されます。
お問い合わせの必須タグもこちらの色が設定されます。

スマホ：メニュー背景色

スマホ表示時に、左上のボタンをタップすると出てくるメニューの背景色を変更できます。

スマホ：メニュー文字色

スマホ表示時に、左上のボタンをタップすると出てくるメニューの文字色を変更できます。

TOP：ブログ固定記事背景色

Blog Appを利用時に「この記事を固定にする」にチェックを入れるとTOPページのメイン画像下にテキストリンクで記事が固定表示されます。
その際の表示エリアの背景色を変更できます。

TOP：ブログ固定記事文字色

「TOP：ブログ固定記事背景色」と同じエリアの文字色を変更できます。
背景色を変えて文字の視認性が悪くなった時に調整用としてお使いください。

セール価格：文字色

セールApp利用時、商品を割引した際にセール価格の文字色を変更できます。

割引タグ：背景色

セールApp利用時、商品を割引した際に、商品一覧で「10%OFF」などの割引タグがつきますが、その背景色を変更できます。
また、割引金額の文字色もこちらの色が設定されます。

割引タグ：文字色

「割引タグ：背景色」と同じ割引タグの文字色を変更できます。
背景色を変えて文字の視認性が悪くなった時に調整用としてお使いください。

SOLD OUTタグ：背景色

商品の販売終了時や売り切れの際は、商品一覧で「SOLD OUT」のタグがつきますが、その背景色を変更できます。

SOLD OUTタグ：文字色

「SOLD OUTタグ：背景色」と同じタグの文字色を変更できます。
背景色を変えて文字の視認性が悪くなった時に調整用としてお使いください。

予約商品タグ：背景色

予約販売App利用時、商品一覧で「予約商品」のタグがつきますが、その背景色を変更できます。

予約商品タグ：文字色

「予約商品タグ：背景色」と同じタグの文字色を変更できます。
背景色を変えて文字の視認性が悪くなった時に調整用としてお使いください。

抽選販売タグ：背景色

抽選販売App利用時、商品一覧で「抽選販売」のタグがつきますが、その背景色を変更できます。

抽選販売タグ：文字色

「抽選販売タグ：背景色」と同じタグの文字色を変更できます。
背景色を変えて文字の視認性が悪くなった時に調整用としてお使いください。

テイクアウトタグ：背景色

テイクアウトApp利用時、商品一覧で「テイクアウト」のタグがつきますが、その背景色を変更できます。

テイクアウトタグ：文字色

「テイクアウトタグ：背景色」と同じタグの文字色を変更できます。
背景色を変えて文字の視認性が悪くなった時に調整用としてお使いください。

会員限定商品タグ：背景色

コミュニティApp利用時、商品一覧で「会員限定商品」のタグがつきますが、その背景色を変更できます。

会員限定商品タグ：文字色

「会員限定商品タグ：背景色」と同じタグの文字色を変更できます。
背景色を変えて文字の視認性が悪くなった時に調整用としてお使いください。

COMING SOONタグ：背景色

販売期間設定App利用時、商品一覧で販売前の商品については「COMING SOON」のタグがつきますが、その背景色を変更できます。

COMING SOONタグ：文字色

「COMING SOONタグ：背景色」と同じタグの文字色を変更できます。
背景色を変えて文字の視認性が悪くなった時に調整用としてお使いください。

VIEW MORE：ボタン背景色

商品一覧を追加で読み込む際のボタンの背景色を設定できます。

VIEW MORE：ボタン文字色

「VIEW MORE：ボタン背景色」と同じボタンの文字色を変更できます。
背景色を変えて文字の視認性が悪くなった時に調整用としてお使いください。

BLOG：背景色

Blog App利用時、TOPページに「BLOGリスト」エリアを表示することができますが、その背景色を変更できます。

BLOG：文字色

「BLOG：背景色」と同じエリアの文字色を変更できます。
背景色を変えて文字の視認性が悪くなった時に調整用としてお使いください。

下層ページ：見出し背景色

TOPページ以外のページで使われている帯状の見出しの背景色を変更できます。

下層ページ：見出し文字色

「下層ページ：見出し背景色」と同じ箇所の文字色を変更できます。
背景色を変えて文字の視認性が悪くなった時に調整用としてお使いください。

お問い合わせ：ボタン背景色

お問い合わせ（Contact）ページのボタンの背景色を変更できます。

お問い合わせ：ボタン文字色

「お問い合わせ：ボタン背景色」と同じボタンの文字色を変更できます。
背景色を変えて文字の視認性が悪くなった時に調整用としてお使いください。

商品詳細：カートに入れるボタン背景色

商品詳細ページのカートに入れるボタンの背景色を変更できます。

商品詳細：カートに入れるボタン文字色

「商品詳細：カートに入れるボタン背景色」と同じボタンの文字色を変更できます。
背景色を変えて文字の視認性が悪くなった時に調整用としてお使いください。

商品詳細：関連商品背景色

商品詳細ページの関連商品エリアの背景色を変更できます。

商品詳細：関連商品文字色

「商品詳細：関連商品背景色」と同じエリアの文字色を変更できます。
背景色を変えて文字の視認性が悪くなった時に調整用としてお使いください。

ヘッダー設定

「◆ ヘッダー：レイアウト」の項目で設定できます。
ヘッダーのレイアウトを変更できます。

◆ ヘッダー：レイアウト

「デフォルト」か「ロゴを上にする」の2パターンから選択できます。
ロゴを上にした場合は、ロゴの下にナビゲーションが置かれるレイアウトになります。
ロゴのサイズが極端に横長の場合や、テキストロゴの文言が長くなり、いびつになってしまう場合に回避手段としてお使いいただけます。

ロゴ画像サイズ設定

「◆ ロゴ：PC ヘッダーロゴ画像サイズ」以降の項目で設定できます。
「ショップロゴ」から設定したロゴ画像のサイズの微調整が可能です。

◆ ロゴ：PC ヘッダーロゴ画像サイズ

PC表示時のヘッダーロゴの横幅のサイズを10~100%の間で10%刻みで指定できます。
100%にしてもナビゲーションなどに被らないように上限はあらかじめ設定されていますので、主に縮小にお使いください。

├ PC フッターロゴ画像サイズ

PC表示時のフッターロゴの横幅のサイズを10~100%の間で10%刻みで指定できます。

├ スマホヘッダーロゴ画像サイズ

スマホ表示時のヘッダーロゴの横幅のサイズを10~100%の間で10%刻みで指定できます。
100%にしても他の要素と被らないように上限はあらかじめ設定されていますので、主に縮小にお使いください。

└ スマホフッターロゴ画像サイズ

スマホ表示時のフッターロゴの横幅のサイズを10~100%の間で10%刻みで指定できます。

テキストロゴ設定

「◆ ロゴ：フォントを選ぶ」以降の項目で設定できます。
「ショップロゴ」で画像ではなくテキストで表示させるロゴにした場合のロゴのカスタマイズができます。

◆ ロゴ：フォントを選ぶ

欧文フォント11種類、和文フォント7種類の中から選べます。

├ PC ヘッダーロゴ：文字サイズ

PC表示時のヘッダーロゴの文字サイズを5段階で変更できます。

├ PC フッターロゴ：文字サイズ

PC表示時のフッターロゴの文字サイズを5段階で変更できます。

├ スマホヘッダーロゴ：文字サイズ

スマホ表示時のヘッダーロゴの文字サイズを5段階で変更できます。

└ スマホフッターロゴ：文字サイズ

スマホ表示時のフッターロゴの文字サイズを5段階で変更できます。

フッター設定

「◆ フッター：ロゴを表示する」以降の項目で設定できます。
フッターロゴの表示／非表示、SNSアイコンに関する設定ができます。

◆ フッター：ロゴを表示する

ONにすると表示、OFFにすると非表示になります。

◆ フッター：SNSアイコンを白にする

ONにするとフッターに表示されるSNSアイコンの色を白にします。
OFFにすると黒になります。
背景色を変更して視認性が悪くなった場合にお使いください。
※ 各種SNSアイコンごとの表示／非表示やリンク先については、デザイン編集でなくBASEの管理画面から設定したものが反映されます。具体的には、BASE管理画面->ショップ設定->SNS設定にBASEから設定できるSNSアカウントの入力欄がありますので該当のSNSアカウントを入力・保存すると反映されます。
YouTubeなどの記載のないものに関しては今のところこのテーマでは設定できませんので予めご了承ください。

フォント設定

「◆ テキスト全体のフォントを変更する」以降の項目で設定できます。
文字の字体を一括で変更できます。
明朝体を選ぶと高級感が、丸ゴシックを選ぶと温かみが出ます。
サイトの雰囲気に合わせて変えてみてください。

◆ テキスト全体のフォントを変更する

ONにすると全体のテキストのフォントを変更できます。
OFFの場合はデフォルトの「Noto Sans JP」というゴシック体のフォントになります。

└ フォントを選ぶ

このテーマは日本語のみの対応になっているので、7種類の和文フォントから選べます。
※ 「◆ テキスト全体のフォントを変更する」がONになっている場合のみ有効になります。

YouTube動画設定

「◆ YouTube埋め込み動画を表示」以降の項目で設定できます。
お問い合わせ以外の全ページにYouTube動画を埋め込みめます。
TOPページはメイン画像のすぐ下に、他のページはページ下部に動画を埋め込むことができます。

◆ YouTube埋め込み動画を表示

ONにすると表示、OFFにすると非表示になります。

└ 埋め込みコードを入力

YouTubeで該当の動画ページから「共有」=>「埋め込む」で表示されるiframeの埋め込みコードをコピーしてきてここにそのまま貼り付けると表示されます。

CTAエリア設定

「◆ CTAエリアを表示」以降の項目で設定できます。
タイトル・メッセージ・リンク・背景画像でできるCTA（Call To Action）エリアを設置できます。
お問い合わせページや公式サイトへの導線として使うことができます。

◆ CTAエリアを表示

ONにすると表示、OFFにすると非表示になります。

├ タイトル

CTAエリアのタイトル文字を入れることができます。
下に置くリンクを押してもらえるようなキャッチコピーを入れるといいかと思います。

├ タイトル：フォントを選ぶ

タイトルのフォントを欧文フォント11種類、和文フォント7種類の中から選べます。

├ タイトル：フォントサイズ

文字サイズを5段階に設定できます。

├ メッセージ

下に置くリンクを押してもらえるようなメッセージを入力します。

├ リンクURL

導線としておきたいリンクのURLを設定できます。

├ リンクを新しいタブで開く

「リンクURL」を入力した場合、
ONにするとクリックしたら新しいウィンドウでページを開きます。
OFFにすると通常のページ遷移になります。

├ ボタンテキスト

ボタンの文言を変更できます。
デフォルトは「CONTACT US」となっています。

├ ボタン背景色

ボタンの背景色を変更できます。

├ ボタン文字色

ボタンの文字色を変更できます。

└ 背景画像推奨サイズ横2880×縦1080（px）

背景画像用の画像をアップロードして設定できます。
推奨サイズ：横2880×縦1080（px）
文字を目立たせるために自動的に黒フィルターがかかるような設定になっています。
※BASEでアップロードできる画像容量の上限は1MBですので、おさまらない場合は圧縮・または縮小してください。

TOPページ

TOPページのみで調整できる設定について

メインビジュアル設定

「◆ TOP：メインビジュアルを表示」以降の項目で設定できます。
TOPページ最上部のメインビジュアルを設定できます。

◆ TOP：メインビジュアルを表示

ONにすると表示、OFFにすると非表示になります。

├ PC画像推奨サイズ：横2880 × 縦1200（px）

PC表示時に、表示させたい画像をアップロードして設定できます。
推奨サイズ：横2880 × 縦1200（px）
※ メインビジュアルを設定する場合は【PC画像が必須】です。スマホ画像のみ設定した場合は表示崩れを防ぐために表示されないようになっています。スマホ画像を設定する場合は必ずPC画像とセットで設定してください。
※BASEでアップロードできる画像容量の上限は1MBですので、おさまらない場合は圧縮・または縮小してください。

├ スマホ画像推奨サイズ：横750×縦600（px）

スマホ表示時に、表示させたい画像をアップロードして設定できます。
推奨サイズ：横750×縦600（px）
※ メインビジュアルを設定する場合は【PC画像が必須】です。スマホ画像のみ設定した場合は表示崩れを防ぐために表示されないようになっています。スマホ画像を設定する場合は必ずPC画像とセットで設定してください。
※BASEでアップロードできる画像容量の上限は1MBですので、おさまらない場合は圧縮・または縮小してください。

└ 画像の説明

画像の説明（alt属性に入れる文言）を設定できます。
特に画面上のどこかに表示されるものではありませんが、もしも画像が表示されなかった場合に代替でこちらがテキスト表示されます。
また、Googleの画像検索のキーワードとしても使われます。

ピックアップ設定

TOPページにピックアップとしてメインビジュアルのすぐ下に表示させることができます。
任意の商品を最大3件まで掲載できます。

◆ TOP：ピックアップを表示

ONにすると表示、OFFにすると非表示になります。

├ ❶〜❸ 画像：推奨サイズ横750 × 縦720（px）

商品画像をアップロードして設定できます。
推奨サイズ：横750 × 縦720（px）
※BASEでアップロードできる画像容量の上限は1MBですので、おさまらない場合は圧縮・または縮小してください。

├ ❶〜❸ 商品名

商品名として任意のテキストを設定できます。

├ ❶〜❸ 簡単な商品説明

商品説明として任意のテキストを設定できます。
あまり長くなるといびつになるので、多くても3行程度の簡単な説明にすることをおすすめします。

├ ❶〜❸ 商品価格

商品価格として任意のテキストを設定できます。

├ ❶〜❸ セール価格

セール価格として、商品の割引後の価格を任意のテキストで設定できます。
入力があれば「商品価格」が打ち消し表示され、セール価格が目立つように表示されます。

├ ❶〜❸ リンク先URL

リンクをつける場合にURLを設定できます。

└ ❶〜❸ リンクを新しいタブで開く

「リンク先URL」を入力した場合、
ONにするとクリックしたら新しいウィンドウでページを開きます。
OFFにすると通常のページ遷移になります。

サイト概要設定

「◆ TOP：サイト概要を表示」以降の項目で設定できます。
TOPページに画像・タイトル・文章のセットで簡単なサイト概要コンテンツを掲載できます。

◆ TOP：サイト概要を表示

ONにすると表示、OFFにすると非表示になります。

├ 画像：推奨サイズ横660× 縦450（px）

概要と一緒に掲載できる画像をアップロードして設定できます。
推奨サイズ：横660× 縦450（px）
※BASEでアップロードできる画像容量の上限は1MBですので、おさまらない場合は圧縮・または縮小してください。