GRAYEL Inc.

BASEデザインテーマ

BASE DESIGN THEME

MCKENLEY

テーマの購入
デモサイト1
デモサイト2
サイドバーを使ったデザイン
特徴的な商品ページのレイアウトで
他と差をつけたい方におすすめ

2つのパターンのサイドバー採用した自由度の高いデザインテーマです。商品ページの画像表示パターンは5種類あり、シンプルなスライダーパターンから特徴的なスライドなど他と差をつけたい方に特におすすめのテーマです。

もちろんダークモードや対応、テーマカラー設定、コンテンツの並べ替え、YouTube背景動画など凡ゆる機能を網羅しています。

主な特徴

  • 2つのタイプのサイドバー
  • 商品ページのレイアウトを5パターン用意
  • ダークモード対応（時間帯で自動でカラーが変わる）
  • 数十種類のカラーパターンを用意
  • 独自カラーにも対応
  • 自由に設定できるフォント
  • 角丸を使った柔らかいデザイン
  • TOPページのコンテンツを自由に並び替え
  • YouTube背景動画コンテンツ
  • Instagram埋め込み

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

メインイメージも並び替え

MCKENLEYではメインイメージを含めた全18コンテンツを自由に並び替えることができます。コンセプトやスクロールコンテンツ、YouTube動画を上部に配置したレイアウトなど自由自在に変更可能です。

5パターンの商品ページ

サイドバーを使うことで柔軟なレイアウトが可能となったMCKENLEYでは5パターンの商品ページを用意しています。基本のスライダーから画面を覆う形のスライダー、横に流れるスライダー、画像1列、2列の5パターン。どのパターンもサイドバーとの組み合わせで美しく見えるように調整しました。

また、画像とテキストの左右入れ替え、スクロールに追従、画像ズーム機能など様々な機能を有しています。

対応App

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

テーマの購入はこちら

はじめに

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

おすすめApp

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

各種設定

背景の設定

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

ロゴはテーマ設定の下の「ロゴ」から設定します。
テーマ設定で、PC、タブレット、スマホとそれぞれ高さを指定できます。
ダークモードでロゴを白にする(png画像推奨)でダークモード時に色を白に変更できます。

画像の設定

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

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

テーマ設定

テーマの設定です。

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

カラー設定

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

  • テーマカラー / サイト全体のカラーを設定できます。カラーに規則性はございません。カラーを調整したい場合は次の項目の独自カラーをご利用ください。

独自カラー設定

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

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

フォント設定

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

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

デザイン設定

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

  • コンテンツ間隔 / バナーリスト、左右バナーの要素間のマージン設定。要素と要素の隙間にも適用されます。
  • コンテンツサイズ / 右寄せにすると左に余白が開き、少し違ったイメージになります。
  • 見出し / 左寄せ、中央揃えから選択してください。
  • ボタン / 3つのデザインパターンから選択してください。

サブヘッダー設定

サブヘッダーの設定です。

  • タイプ / 背景の有無を選択できます。
  • テキスト / 左上のテキストです。
  • リンクURL / 左上のテキストのリンクURLです。
  • 下層ではHOMEリンクに変更 / 左上テキストをHOMEリンクに変更します。
  • HOMEテキスト / HOMEリンクテキストを変更します。ホーム、TOPなど。

サイドバーの設定です。

  • タイプ / 通常のタイプと折りたたみの2パターンから選択できます。
  • タイプ2 ボタンデザイン / 折りたたみ時のボタンデザインを選択できます。
  • サイドバー下部表示 / サイドバー下部のテキストエリアを表示します。
  • 各種テキスト / 各種テキストの設定です。
  • SNS表示 / サイドバー下部にSNSリンクを表示します。
  • コピーライト表示 / サイドバー下部にコピーライトを表示します。
  • 各種サイドバナー / 各種サイドバナーの設定です。

ポップアップバナー設定

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

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

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

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

商品一覧設定

商品一覧の設定です。

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

商品詳細設定

商品詳細の設定です。

  • レイアウト / 画像とテキストの配置を選択できます。
  • タイプ / 5パターンから選択できます。表示エリアは大きなサイズの画像に合わせて調整されます。（同じ比率の画像推奨）
  • スクロールに追従 / 左右の要素をスクロールに追従します。
  • 画像をズーム / パソコン時にマウスホバーで画像をズームします。
  • 商品名のフォント / 商品名のフォントの設定です。
  • 共通テキスト(クーポン情報など) / 全商品ページに共通のテキストを設定できます。
  • 商品説明カスタムAppを小さく表示 / 商品説明カスタムAppの表示エリアが小さくなります。
  • 関連商品タイトル / 関連商品タイトルの設定です。
  • レビューAppタイトル / レビューAppタイトルの設定です。

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

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

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

スライダー設定

スライダーの設定です。

  • 全画面 / メインイメージを全画面表示します。
  • バナー表示(テキスト非表示) / 背景画像の上にバナー画像を表示、もしくはテキスト表示を自由に切り替えられます。
  • タイプ / 4つのデザインパターンから選択できます。
  • 各種スライダー設定 / それぞれのスライダーの設定です。

コンセプト設定

コンセプトの設定です。

  • 画像サイズ / 画像のサイズ設定です。
  • 各種テキストの設定 / 各種テキストの設定です。
  • ボタンリンク先URL / URLまたはアンカーリンク(下記参照)を入力してください。

例: スライダーにリンクする場合は、#sliderと入力してください。
各項目の設定値は以下参照してください。

  • #slider : スライダー
  • #looptext : ループテキスト
  • #categoryslide : カテゴリ別スライド
  • #bgimage : 画像背景バナー
  • #scrollcontent : スクロールコンテンツ
  • #bannerlist : バナーリスト
  • #news : お知らせ
  • #message : メッセージ
  • #saleitems : セール
  • #dualbanner : 左右バナー
  • #itemlist : 商品一覧
  • #newitems : 新着商品
  • #youtube : YouTube
  • #instagram : Instagram
  • #historyitems : 閲覧履歴
  • #coupon : クーポン
  • #newblog : 新着ブログ

ループテキスト設定

ループテキストの設定です。

  • スピード / テキストの流れるスピードを調整できます。
  • 各種テキストの設定 / 各種テキストの設定です。

カテゴリ別スライド設定

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

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

画像背景バナー設定

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

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

スクロールコンテンツ設定

スクロールコンテンツの設定です。スクロールで要素が切り替わるコンテンツです。メインイメージにもおすすめ。

  • タイプ / 3パターンから選択できます。
  • 各種コンテンツ設定 / それぞれのコンテンツの設定です。

バナーリスト設定

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

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

お知らせ設定

お知らせの設定です。

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

メッセージ設定

メッセージの設定です。

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

セール設定

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

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

左右バナー設定

左右バナーの設定です。

  • 左右バナー01~02の各種設定 / 画像、テキスト、リンクの設定です。

新着商品設定

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

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

YouTube設定

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

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

Instagram設定

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

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

  • 埋め込みコード / 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(税別)〜

カスタマイズのご依頼はこちら