共通項目、トップページの特徴

2022/08/22 16:47

「GOODLIFE」は自由度が高く、細部までカスタマイズできるのが特徴です。このページでは、共通項目とメインビジュアルでできることを記載いたします。

■ 共通項目

■ フォント ○ フォントの種類　別ページにて詳細を記載していますので、下記リンクよりお進みください。　https://goodlife1.base.shop/blog/2022/08/22/190743 ○ フォントサイズ（14px、15px、16px） ■ 本文 ○ テキストの色 ○ リンクテキストの色 ■ ヘッダーとナビゲーション ○ 背景色メインビジュアルや下層ページにヘッダー画像の表示があるページは、背景色は透明の設定になっています。ヘッダー画像の表示がないページとスクロール後はヘッダーに背景色が付与されます。その際の背景色の設定です。

■ ロゴ画像 ○ 画像の変更　※ヘッダー背景色付与後に、色違いなどの画像を変更する場合の設定

○ 画像の大きさの設定（XS、S、M、L、XL） ■ テキストロゴ　※ショップロゴで画像を使わない場合 ○ 色の変更　※ヘッダー背景色付与後に、色を変更する場合の設定 ○ フォントサイズ（XS、S、M、L、XL） ■ ナビゲーション ○ テキストの色（背景が透明の時） ○ テキストの色（背景付与後）

○ フォントサイズ（15px、16px、17px、18px） ○ テキストの太さ（標準、太字） ○ 文言の変更　・HOME 　・CATEGORY 　・ABOUT 　・BLOG 　・COMMUNITY

　・MEMBERSHIP

　・LOGIN

　・MY PAGE 　・COIN 　・CONTACT ○ 追加リンク（最大3件） ○ カートアイコンの設定（カート、バッグ）

○ SNSアイコンの背景色　※背景色でアイコンが見えにくい場合

○ バナー画像とリンク（最大2件）

■ フッターナビゲーション ○ 背景色（幅1199px以下の時） ○ テキストの色（幅1199px以下の時） ■ フッターコピーライト ○ 背景色 ○ テキストの色 ■ デザイン設定 ○ 角丸デザイン　※画像などの角が角丸になり、柔らかい印象を演出できます。

■ 見出し ○ フォントサイズ（XS、S、M、L、XL） ○ 太さ（標準、太字） ○ 色 ○ 位置 ■ ボタン ○ 種類（背景色あり、細枠線、太枠線） ○ 形状（四角、角丸、丸型）

○ ボタンの色 ○ テキストの色　※背景色ありの場合のみ ○ テキストの太さ（標準、太字）

■ メインビジュアル

スライド画像は最大3枚まで登録が可能です。スライドを静止画で使いたい場合は1枚のみ登録してください。

タイトルやボタンは任意ですので、イメージ画像のみでブランディング用に使用したり、商品画像を使用して商品詳細ページへリンクさせたり、自由度が高い仕様になっています。

またスライド毎にタイトルとボタンの色を変更することが可能で、画像の影響で文字が見えにくくなることも防止できます。

○ スライドの種類（スライド、フェード、静止）

○ フルスクリーン表示（ON/OFF）

○ フェード選択時のアニメーション設定（ON/OFF）

○ フェード選択時の画像遷移速度（ゆっくり）設定（ON/OFF）

○ スライド画像（最大3枚）

　・画像（横）※推奨［W1600×H任意］px

　・画像（縦）※推奨［W800×H任意］px

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

○ タイトル　※省略可

○ リンク先　※省略可

○ ボタンのテキスト　※リンク先の設定が必要

○ タイトルとボタンの色

○ ボタンのテキストの色　※背景色ありの場合のみ

■ INFORMATIONエリア

テキストのみで、最大3件まで登録が可能です。

○ エリアの表示・非表示設定

○ 見出しの文言

○ 日付

○ テキスト

○ リンク先

■ エリアの並べ替え

エリアの順番を入れ替えることが可能です。同じ数字を選んだ場合は上のエリアが優先されます。お好みの位置でコンテンツを発信できます。

○ バナーエリア ○ PICK UPエリア ○ RANKINGエリア ○ BLOGエリア ○ ITEMエリア

■ ITEMエリア

商品画像は4種類の比率からお選びください。画像サイズがバラバラでも選択した比率で表示される仕様となっていますので表示崩れが起きません。比率からはみ出した部分は切り取られる仕様です。

○ 見出しの文言変更 ○ 商品画像の比率（3:2、4:3、1:1、3:4）

○ 商品価格の文字の太さ（標準、太字） ○ 商品ステータスの色 ○ ボタンのテキストの文言変更

■ Instagramフィード表示

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

○ エリアの表示・非表示設定

○ 見出しの文言

○ フィード埋め込みコードの登録

○ 表示サイズ（幅1200px以上の時）

・フルサイズ

・他のコンテンツに合わせる

○ ボタン

・リンク先

・ボタンのテキスト

設定方法は下記リンクよりご確認ください。

・Sauce by SNPT (Snapppt) の設定方法

■ 商品ページ（共通エリア）

任意で全商品ページに表示できる共通エリアのテキストの設定が可能です。

○ テキスト

○ テキスト色

※テキストは太字になります

■ Apps

■ Blog App

レイアウトは横並びと縦並びの2種類から、サムネイル画像は4種類の比率からお選びください。画像サイズがバラバラでも選択した比率で表示される仕様となっていますので表示崩れが起きません。比率からはみ出した部分は切り取られる仕様です。

ブログ本文の抜粋の表示設定もできますので、レイアウト、画像比率と合わせて、自由に設定することが可能です。

○ レイアウトの選択（横並び、縦並び）

○ ブログ本文の抜粋の表示有無

○ 商品画像の比率（3:2、4:3、1:1、3:4）

○ ボタンのテキストの文言変更

■ メールマガジンApp ○ タイトル文字 ○ テキスト文字

■ お知らせバナーApp ○ テキストの左揃え

○ 区切り線（上下線）有無 ○ 線の色

■ 当デザインテーマで対応しているApps

※下記はショップの表示に影響のあるAppsの一覧です。 ※下記以外にもAppsがあり、その他のAppsも全てご利用いただけます。 ※Appsの使い方はBASEの公式ヘルプをご確認ください。

　「ヘルプ | BASE」→「ショップ向けヘルプ」→「Apps（追加機能）について」

○ 送料詳細設定 ○ メッセージ ○ カテゴリ管理 ○ 再入荷自動通知 ○ BASEロゴ非表示

○ メンバーシップ ○ デジタルコンテンツ販売 ○ 英語・外貨対応 ○ メールマガジン ○ 年齢制限 ○ Blog ○ ラベル ○ 商品検索 ○ 定期便 ○ レビュー ○ セール ○ ショップコイン ○ 販売期間設定 ○ 予約販売 ○ 抽選販売 ○ 商品説明カスタム ○ 商品オプション ○ コミュニティ ○ テイクアウト ○ お知らせバナー

■ OGP画像設定

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

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

※各SNSでOGPのキャッシュ削除が必要

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

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

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

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

BLOG