飲食店などにも扱いやすいように「お取り寄せグルメサイト」をイメージしてデザインを起こしました。
「Foooood」は丸みがアクセントとなったフレンドリーなデザインですので、どんな商品でも気取らないポップな印象なサイトにできます。
デフォルトで落ち着いた色味を使っていますのであまり細かく設定しなくても商品画像さえ用意できればすぐに扱えるテーマとなっています。
もちろん色味を変えたり、不要なコンテンツを非表示にしたりと細かく幅広いカスタマイズが可能ですので、食品に限らず販売する商品によって印象をガラリと変えることも可能です。
弊社が販売しているテーマの中では設定が比較的簡単で扱いやすいテーマとなっております。
ぜひご利用ください！
=======================================
詳しい使い方はこちら
https://sharesl.net/base/foooood/
デモサイトはこちら
https://sharesl.net/base/foooood/demo/
※デモサイトは見た目の確認用です。
実際にBASEショップで作成したものではないため、機能や仕様が異なります。対応しているBASE Appsなども含めて機能や仕様の確認が必要な場合はプレビュー機能をご利用ください。
=======================================
■ 特徴
・丸みがアクセントになったフレンドリーなデザイン
・複数デバイスに対応するレスポンシブデザイン
・設定が簡単で扱いやすい
・デフォルト設定にロゴと商品画像だけ追加すればすぐに公開可能
・画像は推奨サイズに合わせて作れば整ったサイトに
・フォントや背景色、ボタンの色などを簡単に一括で変更可能
・ON/OFFの簡単操作で各エリアを表示・非表示
-------------------------------------
■ カスタマイズ
・テーマカラー変更
色を変更することで、サイトの印象を変えることができます。
背景色やロゴの色以外に、このテーマでは以下の項目の色を設定することでサイト内の共通部分を一括で色変更できます。
- テキストカラー
全体の基本の文字色を一括で設定できます。
- リンクテキストカラー
ブログの投稿記事など平文の中にあるリンクの文字色を一括で設定できます。
- アクセントカラー
商品一覧の背景、お問い合わせフォームの背景、ブログ記事の枠線など、サイトのアクセントとなる色を一括で設定できます。
- ポイントカラー
ボタン全般やFAQのアイコンなど、ポイントで使われている背景色を一括で変更できます。
- ポイントテキストカラー
ポイントカラーと同じ要素の文字色を一括で変更できます。ポイントカラーを変更して文字の視認性が悪くなった際にお使いください。
- ヘッダー&フッターカラー
ヘッダーとフッターの背景色を変更できます。ヘッダーはスマホ表示時の固定ヘッダーや画像がない時の背景色としてこちらに設定した色が入ります。
- 見出し：文字色
各見出しの文字色を一括で変更できます。
- フッター：文字色
上フッターの文字色を変更できます。
その他に個別に変更できる色設定もあります。
- ブログ記事固定表示（Blog App）：背景色・文字色
- 購入ボタン：背景色／文字色
- お問い合わせフォーム：ラベル文字色／必須タグ 背景色・文字色／確認・送信ボタン 背景色・文字色
- FAQ：Q／Aアイコン 背景色・文字色
- ACCESSエリアの各要素：PC表示のコンテンツ部分／電話番号ボタン／GoogleMapリンクボタンの背景色・文字色
-------------------------------------
・フォント
文章全体はデフォルトはゴシック体ですが、明朝体・丸ゴシックにも変更できます。
明朝体を選ぶと高級感が、丸ゴシックを選ぶと温かみが出ます。サイトの雰囲気に合わせて変えてみてください。メニュー、見出しも個別に設定可能です。
・ロゴ
テキストロゴの場合はフォントを変更できます。
13種類の中から選べ、文字サイズもスマホ／PCそれぞれで5段階で調整可能です。
ロゴ画像の場合もサイズの微調整が可能です。
※サイトのデザイン上、極端な縦長・横長のロゴは縮小表示される可能性がありますのでご了承ください。
-------------------------------------
TOPページ
・メインビジュアル
TOPページのメインビジュアル画像を変更できます。
スマホ用とPC用でそれぞれ違う画像を設定できます。
PCは横長、スマホは縦長の画像に切り替えることでよりデバイスに合ったデザインにできます。
非表示にすることも可能です。
※画像の推奨サイズ
PC : 横2880 × 縦1800（px）
スマホ : 横750 × 縦900（px）
・ピックアップ
TOPページでは商品一覧の上、カテゴリー・検索ページでは商品一覧の下に、画像とタイトルをセットにしたピックアップを5件まで設定できます。手動での入力にはなりますが、おすすめのカテゴリーページへのリンクとして使うことがおすすめです。
・商品一覧
TOPページの商品一覧の表示・非表示を切り替えたりできます。
└「画像を幅いっぱいに合わせる」
ONにするとすべての枠内の商品画像が枠いっぱいに広がり画像の大きさを均一にします。
OFFにすると枠内に収まるようになりますが、画像の大きさは不均一になります。
※ONにすると、画像が小さい場合に引き延ばされます。
※画像の推奨サイズ
横960 × 縦840（px）
・ショップの特徴
TOPページにショップの簡単な特徴を掲載できるエリアです。(アイコン・特徴・概要)というグループを1つとして、最大3つまで追加できます。TOPページにショップのことが簡単にわかるコンテンツがあると、お客様もどんなお店かわかりやすいと思いますのでぜひご利用ください。リンクをつけることも可能です。
※ アイコン画像の推奨サイズは600×600（px）です。
・ブログ表示（BlogApp）
TOPページにブログ一覧（BlogAppの記事）を表示できます。
表示件数は最大2~10件までで選択できます。
-------------------------------------
ABOUTページ
コンセプトやアクセス、FAQなど、お店についてのコンテンツをより詳しく掲載できます。
・メイン画像
ABOUTページ画面上部に画像を設置できます。
※画像の推奨サイズ
PC：横2880 × 縦1140（px）
スマホ：横750 × 縦570（px）
・コンセプト
ABOUTページにコンセプトとしてテキストコンテンツを追加できます。
・YouTube動画
ABOUTページにYouTube動画の埋め込みコードを入力することで動画を掲載できます。
・アクセス
店舗へのアクセス情報を追加できます。住所・電話番号・GoogleMapの埋め込み・リンク・注意事項を掲載
できます。
・FAQ
ABOUTページ下部にFAQコンテンツを最大10件追加できます。
-------------------------------------
商品詳細ページ
任意のテキストを置けるフリースペースの利用、関連商品の表示設定ができます。
-------------------------------------
その他の機能
・フッター
フッターのSNSアイコンを白に変更したり、表示・非表示できます
ロゴの表示・非表示を切り替えられます。
・メニュー
ナビゲーションの文字・アイコン色を白か黒のどちらかに変更できます。
※任意の色にすることはできませんのご注意ください。
・「この記事を固定する」機能対応
Blog Appを使用して記事を投稿する際、「この記事を固定にする」にチェックを入れると各記事リストの先頭に固定記事が表示され、TOPページのメイン画像下にテキストリンクで記事が固定表示されます。メイン画像がない場合はナビゲーションの直下になります。
・ 独自のスタイルシートを追加【上級者向け機能】
独自のスタイルシートでCSSを上書きできます。独自拡張になりますので上級者向けです。意味がわかる方のみご使用ください。テーマにもともと入っているCSSファイルの詳細についての質問は、お問い合わせいただいても細かくお答えできかねます。上書きする場合は確かな知識をお持ちの方が自己責任でお願いいたします。
※画像のサイズについてのご注意
アップロードできる画像の容量は上限1MBとなっています。
推奨サイズで作成した画像の容量が1MBより大きくなってしまう場合は画像圧縮ツールなどを活用することで容量を軽くできます。
-------------------------------------
■モバイル設定について
レスポンシブコーディングしていますので、スマホ・タブレット・PCでご覧いただけます。デザイン編集からデフォルトのモバイルテーマを使用をオフにしてお使いください。
-------------------------------------
■対応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は対応していません
※ショップの表示に影響のあるAppsの一覧です。その他のAppsは全てご利用いただけます。
---------------------------------------
■更新情報
・2024/12 SNSアイコン画像を変更しました。
・2024/11 Pay ID あと払いウィジェットに対応しました。
・2023/06 メンバーシップAppに対応しました。
・2022/03 メールマガジンAppに対応しました。
・2021/12 お知らせバナーAppに対応しました。
・2021/11 年齢制限Appに対応しました。
・2021/09 「Youtube」「note」「Tik Tok」をSNSアイコンリンク一覧に追加しました。
・2020/11 コミュニティAppに対応しました。
=======================================
もっと詳しいテーマの詳細はこちら
https://sharesl.net/base/foooood/
テーマの関するご質問・ご要望はこちらから
https://sharesl.net/contact/
よくある質問はこちら
https://notes.sharesl.net/articles/1952/
=======================================
