GRAYEL Inc.

BASEデザインテーマ

BASE DESIGN THEME

HERMANS

ダークモードに対応した
革新的なBASEデザインテーマ

ダークモード対応、テーマカラー設定、グラデーションカラー、コンテンツの並べ替え、YouTube背景動画など凡ゆる機能を網羅した革新的なBASEデザインテーマです。

BASEのテーマの上限ギリギリまで機能を盛り込み、各コンテンツのタイトルの配置を左右に振り分けることで、単調にならずダイナミックなデザインを実現しました。

姉妹テーマ

  • HERMANS : 変則的な見出しデザイン、シャドウとグラデを使ったデザイン
  • MONTANHA : ミニマル・シンプルデザイン、見出しやボタンの組み合わせ自由自在

主な特徴

  • ダークモード対応(時間帯で自動でカラーが変わる)
  • 数十種類のカラーパターンを用意
  • 独自カラーにも対応
  • 自由に設定できるフォント
  • トレンドのグラデーションカラーにも対応
  • TOPページのコンテンツを自由に並び替え
  • YouTube背景動画コンテンツ
  • Instagram埋め込み

他にも様々な機能がありますので、以下ご参照ください。

ヘッダー設定

ヘッダー背景ありなしや、デザイン3パターンから設定できます。左右の表示内容もそれぞれ自由に選択できます。

テーマカラー設定

数十種類の配色パターンから好きなカラーを選択するだけでショップ作成することができます。もちろん独自カラーでのショップ作成も可能です。

コンテンツの並び替え

TOPページには17ものコンテンツを配置可能で、これらのコンテンツは自由に並び替えることが可能です。
使いたいコンテンツ、強調したいコンテンツを上に配置したりなど自由度の高いテーマです。

対応App

テーマ側で対応が必要なAppにはすべて対応しています。

更新履歴

2023.12.15
リリースしました

はじめに

テーマ購入後、BASE管理画面のデザインから購入したテーマを選択してテーマを適用してください。
テーマ適用後にカスタマイズ設定が行えます。

おすすめApp

以下App以外にもすべてのAppに対応しております。

各種設定

背景の設定

テーマ設定の「■カラー設定 – 背景をテーマのカラーで上書き」をONにすることでテーマ設定で背景を設定することを推奨します。

ロゴはテーマ設定の下の「ロゴ」から設定します。
ロゴの設定には「メインイメージと重なる時、テキスト/ロゴを白にする(ヘッダー背景なしで適用)」と「ダークモードでロゴを白にする(png画像推奨)」の二つがあり、それぞれテーマに合わせてご利用ください。

画像の設定

各コンテンツの推奨サイズは以下を目安に作成してください。
基本的に柔軟性を持たせて設計してますので、画像比率などはご自由に選択いただけます。

  • 大きい画像 / 1600x800px
  • 中くらいの画像 / 1200x800px
  • 小さめの画像 / 800x500px

テーマ設定

テーマの設定です。

  • 背景をテーマのカラーで上書き / テーマ設定のカラーを反映します。ON推奨。
  • ダークモードを使用 / PCやスマホでダークモードの設定をしている端末では自動で配色パターンが切り替わります。

カラー設定

サイト全体のカラーテーマを設定します。

  • テーマカラー / 使いたいカラーを選択してください。
  • 配色パターン(全体) / 好きなタイプを選んでください。ボタンやテキストのカラーが変わります。
  • 配色パターン(ヘッダー) / ヘッダーのみ別の配色パターンを適用できます。

デザイン設定

各パーツデザインの設定です。

  • ボタンデザイン / 5つのデザインパターンから選択してください。画像の上に配置されるボタンは、配色パターン(全体)で色が変わります。

ヘッダーの設定です。

  • デザイン / ヘッダーのデザインを選択できます。
  • 左側 / ヘッダーの左側に配置する要素を選択できます。
  • 右側 / ヘッダーの右側に配置する要素を選択できます。
  • ロゴ画像の高さ(16~80px) / PCのロゴ画像の高さを設定します。
  • ロゴ画像の高さ(スマホ, 12~60px) / スマホのロゴ画像の高さを設定します。
  • メインイメージと重なる時、テキスト・ロゴを白にする(ヘッダー背景なしで適用) / メインイメージを全画面にし、ヘッダー背景なしにした場合のヘッダーのテキスト・ロゴの色を白に変更します。スクロールでヘッダー外に移動するとテキストカラーに戻ります。
  • ダークモードでロゴを白にする / ダークモード時にロゴを自動で白に変更します。(png画像推奨)

フォント設定

フォントの設定です。本文と見出しで別々の設定ができます。

  • サイズ / フォントのサイズを設定します。本文のサイズを+した場合見出し含め全体の文字サイズが大きくなります。
  • 文字間 / 文字間の設定です。
  • 英語 / 英語フォントの設定です。
  • 日本語 / 日本語フォントの設定です。

独自カラー設定

自由に色を設定したい場合はこちらの設定を使用します。

  • 各種カラー設定 / それぞれのパーツのカラーの設定です。

ポップアップバナー設定

ポップアップバナーの設定です。クーポンAppなどと併用がおすすめです。

  • 再表示の間隔(時間) / バナーを再表示する時間の間隔の設定です。
  • 画像 / バナー画像です。
  • リンクURL / バナーのリンク先の設定です。
  • 表示位置 / 中央と右下の配置の二つから選択できます。

ドロワー、フッターなどのメニュー名の設定です。

  • 各種メニュー名設定 / それぞれのメニュー名の設定です。
  • 追加リンクテキスト、URL / 追加リンクの設定です。
  • placeholder(検索) / 検索フィールドの初期表示テキストの設定です。

商品一覧設定

商品一覧の設定です。

  • 表示(TOP) / TOPページの商品一覧を非表示にできます。
  • タイトル(TOP・検索結果) / TOPページの商品一覧、検索結果ページのタイトルの設定です。
  • 画像の比率 / 商品画像の比率の設定です。
  • テキストの配置 / テキストの配置の設定です。
  • 商品名の太さ / 商品名の太さの設定です。
  • ボタンテキスト / 商品追加読み込みボタンのテキストです。

商品詳細設定

商品詳細の設定です。

  • 商品名のフォント / 商品名のフォントの設定です。
  • 共通テキスト(クーポン情報など) / 全商品ページに共通のテキストを設定できます。
  • 商品説明カスタムAppを小さく表示 / 商品説明カスタムAppの表示エリアが小さくなります。
  • 関連商品タイトル / 関連商品タイトルの設定です。
  • レビューAppタイトル / レビューAppタイトルの設定です。

メインイメージ設定

メインイメージの設定です。

  • 全画面 / メインイメージを全画面表示します。
  • バナー表示(テキスト非表示) / 背景画像の上にバナー画像を表示、もしくはテキスト表示を自由に切り替えられます。
  • スライドタイプ / スライドタイプの設定です。
  • テキスト表示位置 / テキストの表示位置の設定です。
  • テキスト表示位置(スマホ) / スマホでのテキストの表示位置の設定です。
  • テキスト背景タイプ / 背景あり、なし、カラーパターンを選択できます。
  • テキスト背景透明度 / 背景ありの時の背景の透明度の設定です。
  • 各種メインイメージ設定 / それぞれのメインイメージの設定です。

TOPコンテンツ並び替え設定

TOPコンテンツ並び替えの設定です。半角の数字を入力してください。

  • 各種コンテンツの順番 / 半角数字を入力してください。100などの大きな数字を入力して一番後ろに移動なども可能です。

コンセプト設定

コンセプトの設定です。コンセプトを一番上に設置するとメインイメージとの間のマージンが0になります。

  • 各種テキストの設定 / 各種テキストの設定です。

カテゴリ別スライド設定

カテゴリ別スライドの設定です。

  • カテゴリ01~03 – タイトル / タブに表示するタイトルテキストの設定です。
  • カテゴリ01~03 – ID / カテゴリページURLの末尾の数字を入力してください。商品が自動で12件取得されます。

画像背景バナー設定

画像背景バナーの設定です。一番下に配置するとフッターとの間のマージンが0になります。

  • 画像 / 背景画像の設定です。
  • 各種テキストの設定 / 各種テキストの設定です。

カテゴリリスト設定

カテゴリリストの設定です。商品詳細にも表示できます。

  • 表示(TOP) / TOPページに表示の設定です。
  • 表示(商品詳細) / 商品詳細ページに表示の設定です。
  • レイアウト / 3つのパターンから選択してください。

バナーリスト設定

バナーリストの設定です。

  • レイアウト / レイアウトの設定です。タイプ3の場合、スマホ表示時に3と4の並び順が変わります。
  • バナーリスト01~03の各種設定 / 画像、テキスト、リンクの設定です。

お知らせ設定

お知らせの設定です。

  • お知らせ01~03の各種設定 / 日時、本文、リンクの設定です。

メッセージ設定

メッセージの設定です。

  • メッセージ01~02の各種設定 / 画像、テキスト、リンクの設定です。

セール設定

セールの設定です。セールAppで設定した商品を自動で12件取得します。

  • 表示(TOP) / TOPページに表示の設定です。
  • 表示(商品詳細) / 商品詳細ページに表示の設定です。

ピックアップ設定

ピックアップの設定です。画像を大きく配置したエリアです。ピックアップ商品の紹介や、SHOP INFOなどにおすすめです。

  • テキスト表示位置 / テキストの表示位置の設定です。
  • 各種テキストの設定 / 各種テキストの設定です。

新着商品設定

新着商品の設定です。新着商品を自動で12件取得します。

  • 表示(TOP) / TOPページに表示の設定です。
  • 表示(商品詳細) / 商品詳細ページに表示の設定です。

YouTube設定

YouTubeの設定です。新着商品を自動で12件取得します。

  • 動画URL / YouTubeの動画再生ページのURLを入力してください。
  • 各種テキストの設定 / 各種テキストの設定です。

Instagram設定

Instagramの投稿を外部ツールを使って埋め込みできます。
外部ツールはSnapWidgetSauceが簡単でおすすめです。有料もありますが、無料でデモサイトのような表示が可能です。

* 埋め込みコードのエリアは自由エリアとして利用することも可能です。

  • 埋め込みコード / Instagram埋め込みコードを入力してください。
  • 各種テキストの設定 / 各種テキストの設定です。

閲覧履歴設定

閲覧履歴の設定です。最近見た商品を自動で12件取得します。

  • 表示(TOP) / TOPページに表示の設定です。
  • 表示(商品詳細) / 商品詳細ページに表示の設定です。

クーポン設定

クーポンの設定です。クーポンAppで設定した内容。

  • 各種テキストの設定 / 各種テキストの設定です。
  • クーポンバナー – タイプ / 右側に表示するクーポンバナーのタイプを設定します。

新着ブログ設定

新着ブログの設定です。ブログAppの新着記事を4件表示します。

  • レイアウト / 2タイプから選択できます。
  • 画像の比率 / 商品画像の比率です。
  • 各種テキストの設定 / 各種テキストの設定です。

フッターの設定です。

  • ABOUTエリア表示(ABOUT,MENUのエリア) / フッターの上部の表示設定です。
  • 各種テキストの設定 / 各種テキストの設定です。

カテゴリページ設定

カテゴリページの設定です。

  • パンクズのホーム / パンクズのHOMEのテキスト設定です。
  • カテゴリ画像を使用(↓画像を指定したいカテゴリのIDを入力) / カテゴリページの上部のタイトルの設定です。
  • デフォルト画像 / 以下で設定しないカテゴリの画像、検索結果ページのタイトル画像の設定です。
  • 01~08ID / カテゴリページURLの末尾の数字を入力してください。表示したいページのIDです。
  • 01~08画像 / カテゴリページタイトル画像の設定です。設定した画像は子カテゴリにも反映れます。

ABOUTページ設定

ABOUTページの設定です。

  • メイン画像 / タイトル画像の設定です。
  • 各種サブタイトル・画像・テキスト01~02の設定 / ABOUTページのメッセージエリアの設定です。
  • 各種ACCESSの設定 / ACCESSの表示設定です。
  • Googleマップ埋め込みコード / Googleマップの埋め込みコード(iframe)を入力してください。
  • 各種SHOPPING GUIDEの設定 / SHOPPING GUIDEの各種設定です。
  • 各種FAQの設定 / FAQの各種設定です。

その他の設定

その他の設定です。

  • 各ページメイン画像 / 各ページのタイトル画像の設定です。
  • 各ページタイトル / 各ページのタイトルの設定です。
  • OGP画像(商品ページ以外) / OGP画像を設定できます。
  • CSS(上級者向け) / 独自のCSSを定義できます。
  • HTMLヘッダー追加コード(上級者向け) / HTMLのheadタグ内にコードを追加できます。

メッセージApp・お知らせバナーAppにテーマカラー適用

メッセージApp・お知らせバナーAppにテーマカラーを適用する場合は「CSS(上級者向け)」に以下スタイルを貼り付けてください。

.msg_startButton {
  background: var(--msgBgColor) !important;
}
.msg_startButton:before {
  background: var(--msgTextColor) !important;
}
.informationBanner {
  background: var(--informationBannerBgColor) !important;
}
.informationBannerIcon i {
  color: var(--informationBannerTextColor) !important;
}
.informationBannerText strong {
  color: var(--informationBannerTextColor) !important;
}
.informationBannerClose[data-color-mode="light"] {
  color: var(--informationBannerTextColor) !important;
}
.informationBannerArrow {
  color: var(--informationBannerTextColor) !important;
}

ご意見・ご要望

テーマに関するご意見やご要望、お問い合わせは随時受け付けております。
通常2日以内に返信させていただいておりますが、稼働状況によりお時間をいただくこともございます。

テーマ購入後のお問い合わせはテーマ利用中のサイトURLを記載の上お問い合わせください。

カスタマイズのご依頼

テーマには多数の機能を備えておりますが、さらに特化したサイトをご希望の場合は、お客様のご要望に合わせてテーマのカスタマイズを承っております。
テーマのカスタマイズは、テーマの販売価格よりも高額な料金がかかる場合がございます。カスタマイズ作業についての詳細やご予算については、お問い合わせフォームよりお気軽にお問い合わせください。

テーマカスタマイズ費用 : ¥30,000(税別)〜