BASE専用テーマ【Fortune】をショップに適用したデモショップをご用意しています。

Fortuneの特徴[ Overview ]

ブランド公式オンラインショップのような洗練されたデザイン

大胆で印象的なイメージスライダーをはじめとした細部までこだわったデザインによる
ブランド公式オンラインショップのようなおしゃれで高級感のあるテーマです。

デザイン

デザインマーケット最大級の多彩なカスタマイズ機能

送料表示や新着情報、ピックアップ表示をはじめとした自由なカスタマイズが可能です。
全てのオリジナルカスタマイズ機能はON/OFFが切替可能なため、
好みに応じて必要な機能のみ利用することができます。
(少し下へスクロールして頂くと、各カスタマイズ機能を個別にご説明しています。)


多彩なカスタマイズ機能

スマートフォンにも対応したレスポンシブデザイン

スマートフォンにも最適化されたレスポンシブ対応。
スマホサイトでは商品の情報や購入ボタン等の位置が自動的に調整されるなど、
ビジュアルだけでなく「ショップとしての機能性」にも配慮しています。

レスポンシブデザイン

好みで選べるデザインレイアウト

「商品説明」や「商品画像の拡大エフェクト」などの
商品一覧のサムネイルのレイアウトをお好みで設定することができます。
スマホ閲覧時のトップページの商品レイアウトは1カラム/2カラムから選択可能です。

スマートフォンデザイン
レイアウト

印象的なイメージスライダー

サイドナビゲーション以外の画面全体を覆うヒーローイメージスライダーです。
どんな画面サイズでも最適化されて美しく表示されます。
画像はPC用/スマホ用にそれぞれ5枚まで設定可能です。
スライダー機能をOFFにしてミニマルな印象にすることも可能です。

ヒーローイメージ

おしゃれなワンポイントアイコンでアクセントを添えて

         
あなたのショップに合ったお好みのアイコンタイプを選ぶことができます。
アイコンの色も自由に変更することができます。
ワンポイントアイコンが不要な場合は非表示にすることも可能です。

ワンポイントアイコンs

便利な送料表示

ショップ運営に便利な「送料表示」は2種類のデザインから選ぶことができます。
カラーやテキスト内容は自由に設定できるので、ショップイメージに合った送料表示をして頂けます。
もちろん送料表示をOFFにすることも可能です。

送料表示

ニュース/新着情報表示

新着情報を3件まで表示してテキストやリンクを設定することができます。
日付の代わりにタイトルに「人気No.1」などのテキストを入れて
商品へリンクさせることでランキングのように利用することも可能です。
新着情報表示が不要な場合はOFFにすることができます。

新着情報表示

ピックアップ表示

ピックアップ情報を4件まで表示して画像、テキスト、リンクを設定することができます。
リンク先は商品ページだけでなく、カテゴリページや外部サイトにすることも可能です。
リンクを設定せずに情報掲載スペースとして利用して頂く事もできます。

ピックアップ表示

画像やテキストを表示できるフリースペース

目的に応じて設定できるフリースペースです。
画像、テキスト、それぞれのリンクを設定することができます。
サイトコンセプト文章やリンクバナーの表示などに利用して頂けます。

フリースペース

重要なお知らせの表示

お客様に伝えたい重要なお知らせを見やすく表示することができます。
表示位置をトップページのみ / 全てのページから選択することも可能です。
表示が不要な場合はOFFにすることができます

重要なお知らせ
重要なお知らせ

サイドバナーの表示

必要に応じてサイドナビゲーションにバナー画像とリンクを設定することができます。
サイドバナーはスマホ閲覧時にはスワイプメニュー内に表示されます。

重要なお知らせ

テキストロゴもWebフォントで美しく

テキストロゴはWebフォント*に対応しているので、ロゴ画像がなくても綺麗に表示することができます。
フォント/サイズ/カラーを自由に設定することが可能です。
(*Webフォントはアルファベットのみ対応しています。)

Webフォント

柔軟なカラーカスタマイズ

背景色、フッターの背景色、テキスト、リンク、カートに入れるボタン、
アイコンなどのカラーを自由に変更することが可能です。

カラーカスタマイズ

ナビゲーションを自由に設定

「Category」「News」「Pickup」などのナビゲーションタイトルや、
「About」「Contact」などのリンクテキストを変更することが可能です。

また、ナビゲーションに「外部リンク」を2つまで設定することもできます。

ナビゲーション

アバウトページカスタマイズ

BASE管理画面で登録した「ショップの説明」の他に、
画像・キャッチコピー・住所や営業時間等のカスタムショップ情報を掲載することができます。

アバウトページ

必要な時にすぐに商品を検索できる

ナビゲーションの検索アイコン をクリックすると、
検索ボックスがフォーカスされた状態でフェードインします。
ショップを訪れるお客様にストレスなく商品を検索して頂く事ができます。
(商品検索Appsのインストールが必要です。)

実際の動作はお手持ちのスマートフォンなどで デモサイト をご確認下さい。

検索

BASEアプリとの連携

商品ページに「この商品をアプリで見る」ボタンを表示することができます。
BASEアプリと連携することでショップのフォロワーを増やすことで、
プッシュ通知などで継続的にお客様へアプローチすることが可能です。
BASEアプリではショップが自らファンを作り、商品情報をより多くのファンに発信して購入してもらう仕組みを提供しています。


「この商品をアプリで見る」ボタンは非表示にすることもできます。

BASEアプリ

簡単カスタマイズで初めての方も安心

カスタマイズはBASE管理画面上で簡単に操作できます。
ON/OFFを切り替えたり、テキストを入れたり、色や画像を指定するだけで
どなたでも簡単にオリジナルのショップデザインにして頂けます。

スクリーンショットをまじえた分かりやすいオンラインマニュアルもご用意しています。
ページ下部の「使い方 / マニュアル」をご覧下さい。

簡単カスタマイズ

各種BASE Appsに対応

セール / レビュー / ブログ / ラベルをはじめとした【全てのBASE Appsに対応】しています。
HTML編集Appsにも対応しており、Fortuneを改造した独自のショップデザインを構築することも可能です。
HTML編集Appsの操作方法や改造方法についてはサポート対象外となります。

安心の無料アップデート

BASEに新機能が追加された際には、新機能に合わせたテーマの無料アップデートを致します。
アップデートが行われた際には、ご購入頂いたテーマも自動的に更新されますので安心してご利用頂けます。
テーマのアップデートはBASEの新機能追加と同時ではなく、多少お時間を頂くことについては予めご了承下さい。
また、HTML編集Appsを利用されている場合には、編集内容を保護する為に自動では更新されませんので手動でアップデート内容を適用して頂く必要があります。

BASE専用テーマ【Fortune】をショップに適用したデモショップをご用意しています。
実際のショップイメージをご確認頂けます。
QRコード
Fortuneテーマを適用した
デモショップのQRコード

Fortune 使い方 / マニュアル [ How To Use ]

BASEデザインテンプレート【Fortune】

Fortuneは様々なカスタマイズを簡単に行うことができます。
BASE管理画面のデザイン編集からテンプレートの編集が可能です。


スマートフォンでショップを閲覧した際にもFortuneのテーマデザインを使用する場合には、
デザイン編集の一番下にある「デフォルトのモバイルテーマを使用」をOFF(グレーの状態)にして下さい。
ONの状態ではBASEのデフォルトテーマが表示されるため、スマートフォンから閲覧した際にはFortuneで設定した内容が反映されませんのでご注意下さい。
初期状態の「デフォルトのモバイルテーマを使用」はON(緑の状態)になっています。

色の設定

背景色

背景色を変更することができます。

フッターの背景色

フッターの背景色を変更することができます。

テキストカラー

商品説明等の通常のテキストの色を変更することができます。 (一部のテキスト色はテーマデザインで固定されているため変更できない場合があります。)

リンクカラー / リンクカラー(マウスオーバー)

リンクテキスト色を変更することができます。

「カートに入れる」ボタンカラー

商品ページの「カートに入れる」ボタンの色を変更することができます。

アイコン/ボタンカラー

ナビゲーションの矢印アイコン、ワンポイントアイコン、トップページをスクロールした際の追加商品読み込みボタン(More)などの色を変更することができます。

セール価格カラー

セールAppsを利用した際のセール価格や、商品在庫がない場合の「SOLD OUT」のテキスト色を変更することができます。

ワンポイントアイコン設定

1.ワンポイントアイコン ON/OFF

ワンポイントアイコンの表示のON/OFFを切り替えることができます。
初期状態ではONになっています。

アイコンタイプ

お好みのアイコンタイプを選択することができます。

アイコンカラー

上記「アイコン/ボタンカラー 」の項目でワンポイントアイコンのカラーを設定することができます。

基本設定

2.商品アイテムに1行の「商品説明」を表示 ON/OFF

商品サムネイルの「商品説明」の表示を切り替えることができます。
商品説明は自動的に1行分のみ表示されます。
初期状態ではONになっています。

商品アイテムの画像拡大エフェクト(マウスオーバー時) ON/OFF

商品サムネイルにマウスをのせたときに画像が拡大するエフェクトを切り替えることができます。
OFFにすることで拡大する動きを無効にしてシンプルな印象に見せることができます。
初期状態ではONになっています。

トップページに商品一覧を表示する ON/OFF

トップページの商品一覧の表示を切り替えることができます。
一般的なショップのようにトップページに商品を表示する場合にはON、トップページには商品一覧を非表示にしてすっきりと見せたい場合にはOFFにして下さい。
初期状態ではONになっています。

スマホサイトで商品を2列に並べる(2カラム) ON/OFF

スマートフォンで閲覧時、商品一覧のレイアウトを1列(1カラム) / 2列(2カラム)に切り替えることができます。
OFFの状態では1列、ONの状態では2列で表示されます。
初期状態ではON(2列)になっています。

スマホ閲覧時の「この商品をアプリで見る」ボタン ON/OFF

BASEアプリとの連携として、商品ページに「この商品をアプリで見る」ボタンを表示することができます。
初期状態ではOFFになっています。

イメージスライダー設定

3.イメージスライダー ON/OFF

サイドナビゲーション以外の画面全体を覆う印象的なヒーローイメージスライダーです。
どんな画面サイズでも最適化されて美しく表示されます。
画像はPC用/スマホ用にそれぞれ5枚まで設定可能です。
イメージスライダーをONにする場合には最低1枚以上の画像の設定が必要になるため「PC用画像 1」と「スマホ用画像 1」は必須となります。
初期状態ではONになっています。
【画像の推奨サイズ】
Fortuneのイメージスライダーは、画面サイズに応じて自動的に切り抜かれることで画面全体に表示されるため、画像は大きめのものをご用意下さい。
PC用画像の推奨サイズは「 横1600px × 縦1100px 」です。
スマホ用画像の推奨サイズは「 横414px × 縦736px 」(Retinaディスプレイを考慮して綺麗に表示させたい場合は「 横828px × 縦1472px 」)です。
全画面に表示する仕様上、PC/スマホどちらも画面サイズによっては画像の端が切れる可能性がありますので、
画像内に文字等を入れる場合にはなるべく中央寄りに配置して頂くと美しく表示されます。

PC用画像 1

(イメージスライダーをONにする場合は必須) PCで閲覧した際に表示される1枚目の画像をアップロードする事ができます。

PC用画像 2

(任意)PCで閲覧した際に表示される2枚目の画像をアップロードする事ができます。

PC用画像 3

(任意)PCで閲覧した際に表示される3枚目の画像をアップロードする事ができます。

PC用画像 4

(任意)PCで閲覧した際に表示される4枚目の画像をアップロードする事ができます。

PC用画像 5

(任意)PCで閲覧した際に表示される5枚目の画像をアップロードする事ができます。

スマホ用画像 1

(イメージスライダーをONにする場合は必須) スマホで閲覧した際に表示される1枚目の画像をアップロードする事ができます。

スマホ用画像 2

(任意)スマホで閲覧した際に表示される2枚目の画像をアップロードする事ができます。

スマホ用画像 3

(任意)スマホで閲覧した際に表示される3枚目の画像をアップロードする事ができます。

スマホ用画像 4

(任意)スマホで閲覧した際に表示される4枚目の画像をアップロードする事ができます。

スマホ用画像 5

(任意)スマホで閲覧した際に表示される5枚目の画像をアップロードする事ができます。

ショップロゴ設定

ロゴは「画像」と「Webフォントによるテキスト」が選択して頂けます。
画像で表示する場合には【ロゴ : 画像を使用する】をONにして画像をアップロードして下さい。
画像はお好みのサイズで構いませんが、推奨サイズは「 横420px × 縦100px 」です。
テキストで表示する場合には【ロゴ : 画像を使用する】をOFFにしてフォント/サイズ/カラーを設定して下さい。
文字数やフォントサイズによって折り返される場合がありますので、実際にPCやスマホでご確認頂きながら調整して下さい。

4.PCサイトでのロゴ上下の余白(例:40px)

PCで閲覧した際の画像ロゴ / テキストロゴの上下の余白を設定することができます。
「 40px 」のような形式で入力して下さい。
初期設定は40pxです。
(スマホで閲覧した際には上部ナビゲーションの高さの都合上、余白設定は無視されます。)
Webフォント

テキストロゴのフォント

ロゴをテキストで表示する場合、Webフォントによりお好みのフォントへ変更することができます。
Webフォントはアルファベットのみ対応しています。

テキストロゴのフォントサイズ

テキストロゴのフォントサイズを変更することができます。 「 24px 」のような形式で入力して下さい。

テキストロゴのカラー

テキストロゴの色を自由に選択することができます。

* ロゴは画像を指定して頂くことも可能です。

送料表示設定

5.送料表示 ON/OFF

サイト上部に表示される「送料表示」のON/OFFを切り替えることができます。
初期状態ではONになっています。

送料表示のデザイン A or B

送料表示のデザインを A または B に切り替えることができます。
初期状態では A になっています。

送料表示のカラー

送料表示の色を変更することができます。
デザインAでは文字の色、デザインBでは背景色が対象となります。

条件テキスト

条件をテキストで自由に設定することができます。
上の画像サンプルの中では「 10,000円以上のご購入で 」の部分に相当します。

送料テキスト

送料をテキストで自由に設定することができます。
上の画像サンプルの中では「 送料無料 」の部分に相当します。

補足テキスト

補足をテキストで自由に設定することができます。
上の画像サンプルの中では「 ※北海道・沖縄・離島は除きます 」の部分に相当します。

ナビゲーション/タイトル設定

6.Categoryのタイトル(カテゴリ管理Apps)

サイドバーのカテゴリのナビゲーションのタイトルを変更することができます。
(カテゴリ管理Appsをインストールしている場合にのみ表示されます。)
上記サンプル画像では「 Category 」の部分に相当します。

Categoryのタイトル サブテキスト

サイドバーのカテゴリのナビゲーションのサブテキストを変更することができます。
(カテゴリ管理Appsをインストールしている場合にのみ表示されます。)
上記サンプル画像では「 カテゴリー 」の部分に相当します。

Newsのタイトル

サイドバーの新着情報のナビゲーションのタイトルを変更することができます。
(9.【新着情報表示】がONの場合にのみ表示されます。)
上記サンプル画像では「 News 」の部分に相当します。

Newsのタイトル サブテキスト

新着情報のナビゲーションのサブテキストを変更することができます。
(9.【新着情報表示】がONの場合にのみ表示されます。)
上記サンプル画像では「 ニュース 」の部分に相当します。

Infoのタイトル

サイドバーのショップ情報のナビゲーションのタイトルを変更することができます。
上記サンプル画像では「 Info 」の部分に相当します。

Infoのタイトル サブテキスト

サイドバーのショップ情報のナビゲーションのサブテキストを変更することができます。
上記サンプル画像では「 インフォメーション 」の部分に相当します。

Linkのタイトル

サイドバーのリンクのナビゲーションのタイトルを変更することができます。
上記サンプル画像では「 Link 」の部分に相当します。

Linkのタイトル サブテキスト

サイドバーのリンクのナビゲーションのサブテキストを変更することができます。
上記サンプル画像では「 リンク 」の部分に相当します。

Aboutのリンクテキスト

アバウトページへのリンクの名前を変更することができます。
上記サンプル画像では「 ショップコンセプト 」の部分に相当します。

Blogのリンクテキスト(ブログApps)

ブログページへのリンクの名前を変更することができます。
(ブログAppsをインストールしている場合にのみ表示されます。)
上記サンプル画像では「 ブログ 」の部分に相当します。

Contactのリンクテキスト

お問い合わせページへのリンクの名前を変更することができます。
上記サンプル画像では「 お問い合わせ 」の部分に相当します。

トップページ商品一覧のタイトル

トップページの商品一覧タイトルを変更することができます。
上記サンプル画像では「 New Arrival 」の部分に相当します。

外部リンク設定

7.サイドメニューに外部リンクを表示 ON/OFF

サイドメニューに2つまで表示することができる外部リンクの表示のON/OFFを設定できます。
初期状態ではOFFになっています。

外部リンク1のタイトル

外部リンク1のタイトルを設定することができます。

外部リンク1のURL

外部リンク1のURLを設定することができます。
「 https://dolcevivace.com/ 」のような形式でリンク先のURLを入力して下さい。

外部リンク2のタイトル

外部リンク2のタイトルを設定することができます。

外部リンク2のURL

外部リンク2のURLを設定することができます。
「 https://dolcevivace.com/ 」のような形式でリンク先のURLを入力して下さい。

サイドバナー設定

8.サイドバナー ON/OFF

サイドメニューに表示するバナーの表示のON/OFFを切り替えることができます。
スマホで閲覧した際にはスワイプメニュー内にバナーが表示されます。
初期状態ではOFFになっています。

サイドバナーの画像

バナーの画像をアップロードすることができます。

外部リンクのURL

バナーのURLを設定することができます。
「 https://dolcevivace.com/ 」のような形式でリンク先のURLを入力して下さい。

新着情報設定

9.新着情報表示 ON/OFF

新着情報表示(3件まで設定可能)のON/OFFを切り替えることができます。
初期状態ではOFFになっています。

新着情報 1 日付/タイトル

(新着情報表示をONにする場合は必須)1件目の新着情報の日付/タイトルをテキストで入力することができます。
ニュース機能として利用する場合には「2017/01/01」や「7月10日」などのように設定して下さい。
ランキング機能として利用する場合には「人気No.1」などのように設定して下さい。

新着情報 1 内容

(新着情報表示をONにする場合は必須)1件目の新着情報の内容をテキストで入力することができます。

新着情報 1 リンク先

(任意)1件目の新着情報のURLを設定することができます。
「 https://dolcevivace.com/ 」のような形式でリンク先のURLを入力して下さい。

新着情報 2 日付/タイトル

(任意)2件目の新着情報の日付/タイトルをテキストで入力することができます。
ニュース機能として利用する場合には「2017/01/01」や「7月10日」などのように設定して下さい。
ランキング機能として利用する場合には「人気No.1」などのように設定して下さい。

新着情報 2 内容

(任意)2件目の新着情報の内容をテキストで入力することができます。

新着情報 2 リンク先

(任意)2件目の新着情報のURLを設定することができます。
「 https://dolcevivace.com/ 」のような形式でリンク先のURLを入力して下さい。

新着情報 3 日付/タイトル

(任意)3件目の新着情報の日付/タイトルをテキストで入力することができます。
ニュース機能として利用する場合には「2017/01/01」や「7月10日」などのように設定して下さい。
ランキング機能として利用する場合には「人気No.1」などのように設定して下さい。

新着情報 3 内容

(任意)3件目の新着情報の内容をテキストで入力することができます。

新着情報 3 リンク先

(任意)3件目の新着情報のURLを設定することができます。
「 https://dolcevivace.com/ 」のような形式でリンク先のURLを入力して下さい。

重要なお知らせ設定

10.重要なお知らせ表示 ON/OFF

重要なお知らせ表示のON/OFFを切り替えることができます。
初期状態ではOFFになっています。

重要なお知らせをトップページ以外にも表示 ON/OFF

重要なお知らせの表示位置を切り替えることができます。
ONにすると「ショップ内の全てのページ」にお知らせが表示されます。
OFFにすると「トップページのみ」にお知らせが表示されます。
初期状態ではOFF(トップページのみに表示)になっています。

重要なお知らせテキスト

お知らせの内容をテキストで入力することができます。

重要なお知らせカラー

お知らせの背景色を選択することができます。
テキストカラーは白で固定となっています。

ピックアップ表示設定

11.Pickup ON/OFF

ピックアップ情報表示のON/OFFを切り替えることができます。
初期状態ではOFFになっています。
ピックアップ情報は1~4件まで設定が可能ですが、デザインの仕様上、ピックアップ表示をご利用になる場合には4件設定することをお奨めします。

Pickupのタイトル

ピックアップ情報のタイトルを設定することができます。
上記サンプル画像では「 Pick Up 」の部分に相当します。

Pickup 1 画像

1件目のピックアップ情報の画像をアップロードすることができます。
画像の表示サイズは画面サイズに応じて自動的に調整されます。
アップロードする画像サイズ(縦横の比率)はお好みのもので構いませんが、デザインの仕様上、4件全て画像のサイズを合わせることをお奨めします。

Pickup 1 内容

(任意)1件目のピックアップ情報の内容をテキストで入力することができます。

Pickup 1 リンク先

(任意)1件目のピックアップ情報のURLを設定することができます。
「 https://dolcevivace.com/ 」のような形式でリンク先のURLを入力して下さい。

Pickup 2 画像

2件目のピックアップ情報の画像をアップロードすることができます。
画像の表示サイズは画面サイズに応じて自動的に調整されます。
アップロードする画像サイズ(縦横の比率)はお好みのもので構いませんが、デザインの仕様上、4件全て画像のサイズを合わせることをお奨めします。

Pickup2 内容

(任意)2件目のピックアップ情報の内容をテキストで入力することができます。

Pickup 2 リンク先

(任意)2件目のピックアップ情報のURLを設定することができます。
「 https://dolcevivace.com/ 」のような形式でリンク先のURLを入力して下さい。

Pickup 3 画像

3件目のピックアップ情報の画像をアップロードすることができます。
画像の表示サイズは画面サイズに応じて自動的に調整されます。
アップロードする画像サイズ(縦横の比率)はお好みのもので構いませんが、デザインの仕様上、4件全て画像のサイズを合わせることをお奨めします。

Pickup 3 内容

(任意)3件目のピックアップ情報の内容をテキストで入力することができます。

Pickup 3 リンク先

(任意)3件目のピックアップ情報のURLを設定することができます。
「 https://dolcevivace.com/ 」のような形式でリンク先のURLを入力して下さい。

Pickup 4 画像

4件目のピックアップ情報の画像をアップロードすることができます。
画像の表示サイズは画面サイズに応じて自動的に調整されます。
アップロードする画像サイズ(縦横の比率)はお好みのもので構いませんが、デザインの仕様上、4件全て画像のサイズを合わせることをお奨めします。

Pickup 4 内容

(任意)4件目のピックアップ情報の内容をテキストで入力することができます。

Pickup 4 リンク先

(任意)4件目のピックアップ情報のURLを設定することができます。
「 https://dolcevivace.com/ 」のような形式でリンク先のURLを入力して下さい。

フリースペース設定

12.フリースペース表示 ON/OFF

フリースペース表示のON/OFFを切り替えることができます。
初期状態ではOFFになっています。

フリースペースのタイトル

フリースペースのタイトルを設定することができます。
上記サンプル画像では「 SALE 」の部分に相当します。

フリースペースの画像

フリースペースの画像をアップロードすることができます。

フリースペースの画像 リンク先

フリースペースの画像のURLを設定することができます。
「 https://dolcevivace.com/ 」のような形式でリンク先のURLを入力して下さい。

フリースペースのテキスト

フリースペースのテキストを入力することができます。

フリースペースのテキスト リンク先

フリースペースの画像のURLを設定することができます。
「 https://dolcevivace.com/ 」のような形式でリンク先のURLを入力して下さい。

アバウトページ設定

13.アバウトページタイトル下に画像を表示 ON/OFF

アバウトページの上部にお好きな画像を表示することができます。
初期状態ではOFFになっています。
画像を載せる場合にはこの項目をONにした上で画像をアップロードして下さい。

アバウトページ画像

アバウトページに載せる画像をアップロードすることができます。

アバウトページ画像下の見出しテキスト

アバウトページの「画像」の下に見出しテキストを入れることができます。
(見出しテキストの下には、BASE管理画面の「設定」→「ショップ設定」の「ショップ情報」タブにある「ショップの説明」に設定したテキストが表示されます。)

カスタムショップ情報 - 住所

ショップの所在地を表示することができます。
この項目は各ページ下部のショップ情報にも表示されます。

カスタムショップ情報 - TEL

ショップの電話番号を表示することができます。
この項目は各ページ下部のショップ情報にも表示されます。

カスタムショップ情報 - FAX

ショップのFAX番号を表示することができます。
この項目は各ページ下部のショップ情報にも表示されます。

カスタムショップ情報 - 営業時間

ショップの営業時間を表示することができます。

カスタムショップ情報 - 定休日

ショップの定休日を表示することができます。

カスタムショップ情報 - E-Mail

ショップのメールアドレスを表示することができます。
この項目は各ページ下部のショップ情報にも表示されます。

独自スタイルシート設定

14.独自スタイルシート(CSS)

オリジナルのスタイルシートを記述することができます。

記述例: p { font-size:14px !important;}

独自スタイルシート(CSS)は知識のある上級者向けの設定です。
CSSについてはサポート対象外となります。
CSSの記述方法やclass名のご案内等は致しかねますことを予めご了承下さい。

画像の推奨サイズ

Fortuneをご利用頂く際の登録する画像の推奨サイズは以下の通りです。

【ロゴ画像】
お好みのサイズで構いません。
正方形や縦長のロゴの場合、スマホサイトでは表示が小さくなる場合がありますので横長の画像をお勧め致します。
ご参考までに、デモショップでは「 横420px × 縦100px 」の画像を使用しております。

【イメージスライダー】
イメージスライダーは画面サイズに応じて自動的に切り抜かれることで画面全体に表示されるため、画像は大きめのものをご用意下さい。
PC用画像の推奨サイズは「 横1600px × 縦1100px 」です。 スマホ用画像の推奨サイズは「 横414px × 縦736px 」(Retinaディスプレイを考慮して綺麗に表示させたい場合は「 横828px × 縦1472px 」)です。
全画面に表示する仕様上、PC/スマホどちらも画面サイズによっては画像の端が切れる可能性がありますので、画像内に文字等を入れる場合にはなるべく中央寄りに配置して頂くと美しく表示されます。

【サイドバナー】
縦長/横長に関わらずお好みのサイズで構いません。
ご参考までに、デモショップでは「 横600px × 縦600px 」の画像を使用しております。

【Pickup】
縦長/横長に関わらずお好みのサイズで構いません。
但しデザインの仕様上、設定する4件の画像は全て同じサイズにすることをお勧め致します。
ご参考までに、デモショップでは「 横640px × 縦360px 」の画像を使用しております。

【フリースペース】
縦長/横長に関わらずお好みのサイズで構いません。
ご参考までに、デモショップでは「 横1140px × 縦160px 」の画像を使用しております。

【アバウトページ画像】
縦長/横長に関わらずお好みのサイズで構いません。
ご参考までに、デモショップでは「 横1400px × 縦400px 」の画像を使用しております。

【商品画像】
推奨サイズは「 横900px × 縦900px 」です。
上記以外のサイズの商品画像をご利用頂くこともできますが、その場合でも全ての商品の1枚目の画像は同じサイズのものを設定して下さい。 サイズの異なる商品画像がある場合には、商品一覧のデザインが崩れる可能性があります。
ご参考までに、デモショップでは「 横900px × 縦540px 」の画像を使用しております。

モバイルテーマ設定

スマートフォンでショップを閲覧した際にもFortuneのテーマデザインを使用する場合には、
デザイン編集の一番下にある「デフォルトのモバイルテーマを使用」をOFF(グレーの状態)にして下さい。
ONの状態ではBASEのデフォルトテーマが表示されるため、スマートフォンから閲覧した際にはFortuneで設定した内容が反映されませんのでご注意下さい。
初期状態の「デフォルトのモバイルテーマを使用」はON(緑の状態)になっています。

よくある質問 [ FAQ ]

Fortuneに関するよくあるお問い合わせとその回答です。


  • 有料テーマの利用は初めてなのですが、設定やカスタマイズは私にもできますか?

    カスタマイズはBASE管理画面上で簡単に操作できます。
    自由にカスタマイズして頂けるようにたくさんの設定項目をご用意しておりますが、
    どれも「ON/OFFを切り替える」「テキストを入れる」「色を選ぶ」「画像選ぶ」などの簡単な設定になっています。
    どなたでも簡単にオリジナルのショップデザインにして頂けます。

    詳しくは「使い方 / マニュアル」をご覧下さい。

    簡単カスタマイズ
  • 本当にデモショップのようなデザインになるのですか?

    はい。 デモショップ は実際にBASEで開設したショップにFortuneテーマを適用した上で、 BASE管理画面の「デザイン編集」で画像やテキストの設定をしただけのものとなっています。

    もちろん写真や商品画像はご自身でご用意頂く必要がありますが、 「ON/OFFを切り替える」「テキストを入れる」「色を選ぶ」「画像選ぶ」などの簡単な設定をするだけで、 どなたでも簡単にデモショップのようなオリジナルのデザインにして頂けます。

  • 設定する画像の推奨サイズを教えて下さい。

    画像の推奨サイズは以下の通りです。

    【ロゴ画像】
    お好みのサイズで構いません。
    正方形や縦長のロゴの場合、スマホサイトでは表示が小さくなる場合がありますので横長の画像をお勧め致します。
    ご参考までに、デモショップでは「 横420px × 縦100px 」の画像を使用しております。

    【イメージスライダー】
    イメージスライダーは画面サイズに応じて自動的に切り抜かれることで画面全体に表示されるため、画像は大きめのものをご用意下さい。
    PC用画像の推奨サイズは「 横1600px × 縦1100px 」です。 スマホ用画像の推奨サイズは「 横414px × 縦736px 」(Retinaディスプレイを考慮して綺麗に表示させたい場合は「 横828px × 縦1472px 」)です。
    全画面に表示する仕様上、PC/スマホどちらも画面サイズによっては画像の端が切れる可能性がありますので、画像内に文字等を入れる場合にはなるべく中央寄りに配置して頂くと美しく表示されます。

    【サイドバナー】
    縦長/横長に関わらずお好みのサイズで構いません。
    ご参考までに、デモショップでは「 横600px × 縦600px 」の画像を使用しております。

    【Pickup】
    縦長/横長に関わらずお好みのサイズで構いません。
    但しデザインの仕様上、設定する4件の画像は全て同じサイズにすることをお勧め致します。
    ご参考までに、デモショップでは「 横640px × 縦360px 」の画像を使用しております。

    【フリースペース】
    縦長/横長に関わらずお好みのサイズで構いません。
    ご参考までに、デモショップでは「 横1140px × 縦160px 」の画像を使用しております。

    【アバウトページ画像】
    縦長/横長に関わらずお好みのサイズで構いません。
    ご参考までに、デモショップでは「 横1400px × 縦400px 」の画像を使用しております。

    【商品画像】
    推奨サイズは「 横900px × 縦900px 」です。
    上記以外のサイズの商品画像をご利用頂くこともできますが、その場合でも全ての商品の1枚目の画像は同じサイズのものを設定して下さい。
    サイズの異なる商品画像がある場合には、商品一覧のデザインが崩れる可能性があります。
    ご参考までに、デモショップでは「 横900px × 縦540px 」の画像を使用しております。

  • スマホで見るとイメージスライダーの下に大きな余白ができてしまいます。

    イメージスライダーのスマホ用画像は「縦長の画像」を設定するように想定しておりますが、
    PCサイトと同様の「横長の画像」を設定してしまっているために画像の下部に余白ができてしまっている可能性がございます。

    スマホ用画像の推奨サイズは「 横414px × 縦736px 」
    (Retinaディスプレイを考慮して綺麗に表示させたい場合は「 横828px × 縦1472px 」)
    となっておりますので、推奨サイズの画像、または縦長の画像を設定することをお試し下さい


    どうしてもスマホ用画像にも「PC用画像と同様の横長の画像」をご利用されたい場合には、
    すぐ下の【スマホ閲覧時のトップページのイメージスライダーに横長の画像を使いたいのですが。】の項目をご覧下さい。

  • スマホ閲覧時のトップページのイメージスライダーに横長の画像を使いたいのですが。

    イメージスライダーのスマホ用画像は設定した「縦長の画像」が切り抜かれて画面全体に表示される仕様となっております。
    通常、イメージスライダーのスマホ用画像には推奨サイズの「 横414px × 縦736px 」
    (Retinaディスプレイを考慮して綺麗に表示させたい場合は「 横828px × 縦1472px 」)をご利用下さい。

    どうしてもスマホ用画像にも「PC用画像と同様の横長の画像」をご利用されたい場合には、「独自スタイルシート(CSS)」機能をご利用下さい。
    「独自スタイルシート(CSS)」機能の操作方法、及びCSSの編集内容等についてはサポート対象外となっておりますが、
    下記に簡単ではございますが『スマホで閲覧した場合のイメージスライダー画像の高さを変更する方法』をご案内させて頂きます。


    ①. BASE管理画面の「デザイン」画面の最下部にある「独自スタイルシート(CSS)」に以下のコードを記述します。

    
    @media (max-width: 600px) {
    .heroheader{
    min-height:200px !important;
    height:200px !important;
    max-height:200px !important;
    margin-top:0px !important;
    }
    .heroimage{
    min-height:200px !important;
    height:200px !important;
    max-height:200px !important;
    }
    }
    
    

    ②. 6箇所ある 200px という部分が画像の高さになりますので、お好みの数字に調整します。
    ③. 「保存」を押して編集を完了します。
    ④. スマホやブラウザ等のキャッシュを削除してからショップをご確認下さい。


    以上の方法にて、スマホ閲覧時のイメージスライダーの高さを変更する事で、縦長の画像ではなくとも余白がでないようにして頂けます。
    しかしながら、Fortuneのイメージスライダーは本来、画像が切り抜かれて画面全体に表示される仕様となっておりますので、
    上記の方法にてCSSにより高さを指定した場合でも、スマホの機種や画面方向によっては余白が出る場合がございます。
    全ての環境において表示が崩れないことへの保障は致しかねますことをご了承下さい。

    ※ 上記設定方法は多くのお客様からお問い合わせを頂いた内容についてご案内させて頂いたものであり、
    「独自スタイルシート(CSS)」機能の操作方法、及びCSSの編集内容等については基本的にサポート対象外となっております。
    本ご案内に関するお問い合わせや、その他テーマのCSSやHTMLに関するお問い合わせには対応致しかねますことを予めご了承下さい。

  • メインの写真や新着情報、フリースペースが表示されません。

    メインの写真や新着情報を設定しても表示されない場合は、その項目の表示設定がOFFになっている可能性があります。
    ON/OFFの切替ができる項目についてはOFF(グレーの状態)からON(緑の状態)に切り替わっているかご確認下さい。

    それでも解決しない場合には、すぐ下の【スマホで見るとメインの写真や新着情報、フリースペースが表示されません。】の項目をご覧下さい。

  • スマホで見るとメインの写真や新着情報、フリースペースが表示されません。

    「デフォルトのモバイルテーマを使用」がONになっている可能性があります。

    スマートフォンでショップを閲覧した際にもFortuneのテーマデザインを使用する場合には、
    デザイン編集の一番下にある「デフォルトのモバイルテーマを使用」をOFF(グレーの状態)にして下さい。
    ONの状態ではBASEのデフォルトテーマが表示されるため、スマートフォンから閲覧した際にはFortuneで設定した内容が反映されませんのでご注意下さい。
    初期状態の「デフォルトのモバイルテーマを使用」はON(緑の状態)になっています。

  • スマホサイトのデザインがデモショップと違うのですが、どうすればいいですか?

    「デフォルトのモバイルテーマを使用」がONになっている可能性があります。

    スマートフォンでショップを閲覧した際にもFortuneのテーマデザインを使用する場合には、
    デザイン編集の一番下にある「デフォルトのモバイルテーマを使用」をOFF(グレーの状態)にして下さい。
    ONの状態ではBASEのデフォルトテーマが表示されるため、スマートフォンから閲覧した際にはFortuneで設定した内容が反映されませんのでご注意下さい。
    初期状態の「デフォルトのモバイルテーマを使用」はON(緑の状態)になっています。

  • 「デフォルトのモバイルテーマを使用」をOFFにしても設定が反映されません。

    スマートフォンでは通信量を減らすために一度閲覧したサイトをキャッシュに保存して、
    次回以降にサイトを表示する際にはスマホ内に保存されたキャッシュを優先的に読み込むことで表示速度を上げる仕様になっています。

    「デフォルトのモバイルテーマを使用」をOFFにしても設定が反映されない場合、
    デフォルトのモバイルテーマ(ONの状態)のキャッシュがスマホ内に残っている可能性がございますので、
    スマートフォンのブラウザ等のキャッシュを削除した上で、再度ご確認下さい。

  • テーマのアップデートはありますか?

    BASEに新機能が追加された際などには、新機能に合わせたテーマの無料アップデートをさせて頂きます。
    アップデートが行われた際には、ご購入頂いたテーマも自動的に更新されますので安心してご利用頂けます。

    テーマのアップデートはBASEの新機能追加と同時ではなく、多少お時間を頂くことについては予めご了承下さい。
    また、HTML編集Appsを利用されている場合には、編集内容を保護する為に自動では更新されませんので手動でアップデート内容を適用して頂く必要があります。

  • テーマが自動的にアップデートされないのですが、どうすればいいですか?

    通常、アップデートが行われた際にはご購入頂いたテーマも自動的に更新されますが、
    HTML編集Appsを利用している場合には、編集内容を保護する為に自動では更新されません。
    その際には手動でアップデート内容を適用して頂く必要があります。

    HTML編集Appsを利用してテーマを改造している場合には、現在選択されているテーマが「カスタムテーマ」となっています。
    これはご購入頂いたテーマを元にしたオリジナルの別のテーマとして保存されているためです。
    「Fortune」テーマを選択して頂くことでアップデートが適用された最新の状態のテーマとなりますので、
    改めてHTML編集Appsを利用してオリジナルの改造/編集を行って下さい。

  • HTML編集Appsを利用して購入したテーマを改造することはできますか?

    可能です。
    ご購入頂いたテーマをBASE管理画面の「デザイン」で適用した状態にてHTML編集Appsを利用することで、
    Fortuneを元にしたオリジナルのショップデザインを構築して頂くことが可能です。
    HTML編集Appsの操作方法や改造方法はサポート対象外となりますことについては予めご了承下さい。

  • プレビュー画面でデモショップと同じように見えません。(スマホ・タブレットサイトが表示されてしまいます。)

    ご購入前のプレビューやご購入後のカスタマイズ画面のプレビューでは、
    画面左側にカスタマイズ項目のメニュー部分があるためその分だけ実際のショップよりも画面幅が狭く表示されます。

    大きなPCのモニターではプレビュー画面でも通常のPCデザインが表示されますが、ノートパソコンのような小さめのPCをご利用の場合やブラウザを小さく表示している場合などは、PCのデザインではなくタブレット用のデザインが表示される場合があります。
    ブラウザをPCの画面全体にしていない場合には全画面に、ブラウザの左側にお気に入りバー等を出している場合には非表示にすることをお試し下さい。

    PCのサイズ等によってはプレビューでタブレット用のデザインが表示されることもありますが、
    実際のショップではデモショップと同様の見え方となりますのでご安心下さい。

機能一覧 [ Spec ]

Fortuneの主な機能


HTML5+CSS3コーディング 最新のHTML5+CSS3によるテーマ設計
スワイプ操作対応 スマホ/タブレット閲覧時のスライドメニューはスワイプ操作可能
レスポンシブレイアウト デフォルトのモバイルテーマと切替可能
基本設定 スマホ閲覧時のデザイン設定(1カラム/2カラム)
最初の商品アイテムを2倍の大きさで表示 ON/OFF
商品アイテムに1行の「商品説明」を表示 ON/OFF
商品アイテムに画像拡大エフェクト(マウスオーバー時) ON/OFF
ワンポイントアイコン設定 アイコンタイプ/カラーを選択可能 
表示ON / OFF設定
ヒーローイメージスライダー設定 サイドナビゲーション以外の画面全体を覆う印象的なスライダー 
画像をPC用/スマホ用にそれぞれ 5枚まで 設定可能
表示ON / OFF設定
送料表示設定 デザイン設定(2種類)
カラー / 送料テキスト設定
表示ON / OFF設定
ニュース/新着情報設定 日付の設定 / 内容の設定 / リンクの設定 
3件まで設定可能
表示ON / OFF設定
フリースペース設定 画像の設定 / テキストの設定 / リンクの設定 
表示ON / OFF設定
サイドバナー設定 画像の設定 / テキストの設定 / リンクの設定 
表示ON / OFF設定
背景色設定 メインエリア / フッターの背景色設定
カラー設定 テキスト / ナビゲーション / リンク / リンク(マウスオーバー) / 「カートに入れる」ボタン / アイコンのカラー設定
ロゴ設定 Webフォント対応 : フォント / サイズ / カラーを選択可能
PC閲覧時のロゴの余白設定
ナビゲーション/タイトル設定 カラーを選択可能 
「About」等のデフォルトの名前を自由に変更可能
外部リンク設定 ナビゲーションに外部へのリンクを2つまで設定可能
表示ON / OFF設定
サイトコンセプト設定 挨拶やコンセプトなどの文章を表示
表示ON / OFF設定
重要なお知らせ設定 重要なお知らせ等の文章を表示
カラー設定 / 表示位置設定(トップページのみor全てのページ)
表示ON / OFF設定
アバウトページ設定 アバウトページ画像設定
キャッチコピー設定
カスタムショップ情報設定設定
表示ON / OFF設定
BASEアプリ連携設定 スマホ閲覧時の「この商品をアプリで見る」ボタン ON/OFF
レビュー機能対応 レビューAppsにも対応
各種BASE Apps対応 カテゴリ管理 / Blog / 海外対応 / デジタルコンテンツ販売 / ラベル / BASEロゴ非表示 / 商品検索 / 送料詳細設定 / 数量制限 / 定期便 / レビュー / セール など全てのBASE Appsに対応
独自スタイルシート(CSS)設定 お客様独自のスタイルシートを記述可能 (CSSについてはサポート対象外となります。)
HTML編集可能 HTML編集Appsを利用したテーマを改造が可能
(HTML編集Appsの操作方法/改造方法はサポート対象外となります。)

ご購入 [ Preview and Purchase ]

BASE専用テーマ【 Fortune 】はBASEデザインマーケットにてご購入頂けます。

お問い合わせ [ Contact ]

【 Fortune 】に関するお問い合わせは下記のメールフォームよりお問い合わせ下さい。
テーマの設定方法等については「使い方 / マニュアル」や「よくある質問」をご覧下さい。

お問い合わせへの対応は通常2営業日以内に行っております。
場合によってはお時間を頂く場合があります事を予めご了承下さい。