ELBERT

アクセシビリティに配慮した安心設計
ショッピングガイド重視の方にもおすすめ

WEBアクセシビリティとは、障がいの有無を問わず、すべての訪問者が快適に利用できるUIを目指す取り組みです。
ELBERTはアクセシビリティを考慮し、視認性・操作性・音声対応にも配慮した使いやすいユニバーサルデザインのテーマです。

さらに、ショッピングガイドはモーダル表示や商品ページでの表示に対応しており、購入をスムーズにサポートします。
モーダル表示は簡易的なページ代わりとしてもご利用いただけます。

もちろんレスポンシブ対応で、コンテンツの並べ替え、YouTube背景動画などその他の機能も充実しています。

主な特徴

アクセシビリティに配慮した安心設計
ショッピングガイドモーダル
商品ページにショッピングガイドや共通テキストをタブで表示
Markdownを使ったショッピングガイドに対応
サブヘッダーを使ったデザイン
追従ヘッダー
独自カラーに対応
自由に設定できるフォント
角丸を使った柔らかいデザイン
TOPページのコンテンツを自由に並び替え
YouTube背景動画コンテンツ
Instagram埋め込み
グラデーションを使ったデザイン

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

こだわりのショッピングガイド機能

ショッピングガイドはモーダル表示や商品ページの表示に対応しており、コンテンツはMarkdown記法で記述することも可能です。購入前にお知らせしたいことや、簡易的なページの代わりとしてもご利用できます。

ガイドドロワーへのリンクは、各コンテンツのリンクURLに#guideと入力するとガイドドロワーを表示、#guide-01(01~06)で各タブのコンテンツにリンクします。

様々なメインイメージパターン

ELBERTはメインイメージを含めた全てのコンテンツが並び替え可能です。
YouTube動画をページ上部に配置したり、メインイメージのスライドもフェード、スライド、左右表示、全画面表示など細かな調整が可能です。

さらにデスクトップとスマホで別々にレイアウトも調整できるので、文字数が多い場合などはスマホでは縦のレイアウトにするなど自由に設定も可能です。

対応App

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

テーマの購入はこちら

デモサイト

はじめに

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

各種設定

背景の設定

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

ロゴの設定

ロゴはテーマ設定の下の「ロゴ」から設定します。
テーマ設定で、PC、スマホとそれぞれ高さを指定できます。
フッターのロゴを白にするをオンにするとフッターロゴの色を白に変更できます。

画像の設定

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

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

全体設定

カラー設定

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

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

全体の設定

サイト全体の設定します。

要素の間隔 / 各コンテンツ間の間隔、その他各要素の間隔を調整します。
画像の間隔 / 画像同士の間隔を調整します。
画像の角丸 / 画像の角丸を設定します。

フォント設定

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

サイズ / フォントのサイズを設定します。本文のサイズを+した場合見出し含め全体の文字サイズが大きくなります。
太さ / 文字の太さの設定です。
文字間 / 文字の文字間の設定です。
行間 / 文字の行間の設定です。
英語 / 英語フォントの設定です。
日本語 / 日本語フォントの設定です。
見出しデザイン / 見出しのデザインを選択できます。見出しは複数行にも対応しています。

ポップアップバナー設定

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

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

サブヘッダー設定

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

SNSアイコン / SNSアイコンを表示します。
翻訳 / 翻訳の選択エリアを表示します。
中央タイプ / 中央に表示するコンテンツを選択します。
各種テキスト / 各種テキストの設定です。

ヘッダーの設定です。

高さ / ヘッダーの高さを調整します。
追従 / ヘッダーの追従タイプを選択します。
追従時のスタイル / 追従ヘッダーのスタイルを選択します。
ロゴ画像の高さ / 各種高さを設定します。
メニュー / メニューのタイプを選択します。メガメニューではプロモブロックを使用できます。
各種テキスト / 各種テキストの設定です。

メガメニュー内のプロモブロックの設定です。

文字カラー / 文字のカラーの設定です。
各種テキスト / 各種テキストの設定です。

ドロワー設定

ドロワーの設定です。

SNSアイコン / SNSアイコンを表示します。
翻訳 / 翻訳の選択エリアを表示します。
各種テキスト / 各種テキストの設定です。

ガイドドロワー設定

ガイドドロワーの設定です。
各コンテンツのリンクURLに#guideと入力するとガイドドロワーを表示、#guide-01(01~06)で各タブのコンテンツにリンクします。

タブ01~06 / 見出しタブのテキストを入力します。
テキスト01~06 / コンテンツ内容を入力します。Markdownに対応しています。
各種テキスト / 各種テキストの設定です。

フッターの設定です。

タイプ / フッターのタイプを選択します。
ロゴ表示 / ヘッダーと同様のロゴを表示します。
ロゴを白にする / ロゴを白にします。png画像推奨です。
各種テキスト / 各種テキストの設定です。

HOME設定

並び替え設定

TOPコンテンツの並び替え設定です。

各種テキスト / 表示したい順番を入力してください。

メインイメージ設定

メインイメージの設定です。スマホとデスクトップで別々に設定できます。

文字カラー / 画像の上に表示する場合のテキストカラーを設定します。
サイズ / メインイメージのサイズを選択します
テキスト配置 / テキストの配置でデザインも変わります。
サイズ(スマホ) / スマホ時のメインイメージのサイズを選択します
テキスト配置(スマホ) / スマホ時のテキスト配置を選択します。
各種メインイメージ設定 / それぞれのメインイメージの設定です。

バナーの設定です。

テキストをALTで使用 / テキストを画像のALTで使用します。
画像の横幅 / 最大100%です。%やpxで指定してください。
各種バナー設定 / 各種バナーの設定です。テキストは複数行に対応しています。

お知らせ設定

お知らせの設定です。

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

カテゴリスライド設定

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

カテゴリタイトル / カテゴリのタイトルを入力します。
カテゴリID / カテゴリページURLの末尾の数字を入力してください。商品が自動で12件取得されます。

ループテキスト設定

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

スピード / テキストの流れるスピードを調整します。
テキストサイズ / テキストサイズを選択します。
各種テキストの設定 / 各種テキストの設定です。

コンセプト設定

コンセプトの設定です。

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

画像背景バナー設定

画像背景バナーの設定です。01と02の二つあります。

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

ピックアップ設定

ピックアップの設定です。

ランキング表示 / ランキングアイコンを表示します。
タイトル / タイトルは非表示にすることも可能です。
各種ピックアップの設定 / 各種ピックアップの設定です。テキストは複数行に対応しています。

セール設定

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

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

閲覧履歴設定

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

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

YouTube設定

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

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

Instagram設定

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

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

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

ABOUT設定

ABOUTページ設定

ABOUTページの設定です。

ページタイトル / ページのタイトルの設定です。
メイン画像 / タイトル画像の設定です。
各種フリーテキスト設定 / ABOUTページのフリーテキストの設定です。
各種ACCESSの設定 / ACCESSの表示設定です。
Googleマップ埋め込みコード / Googleマップの埋め込みコード（iframe）を入力してください。

商品ページ設定

商品詳細設定

商品詳細の設定です。

タイプ / 3パターンから選択できます。表示エリアは大きなサイズの画像に合わせて調整されます。（同じ比率の画像推奨）
商品名のフォント / 商品名のフォントの設定です。
共通テキスト(クーポン情報など) / 全商品ページに共通のテキストを設定できます。
商品説明タブを使用 / 商品説明欄タブを使用します。
各種タブテキストの設定 / 各種タブテキストの設定です。
ガイドタブテキスト(Markdown使用可) / Markdonw記法を使用できます。
ガイドドロワーボタンテキスト / 入力するとガイドタブへのリンクボタンを表示します。
ガイドドロワー個別表示 / ガイドドロワー内のタブコンテンツのリンクを表示します。
商品説明カスタムAppを画像下に移動 / 商品説明カスタムAppの表示位置を変更します。

商品一覧設定

商品一覧の設定です。

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

カテゴリページ設定

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

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

その他設定

各種ページ設定

各種ページの設定です。

各ページメイン画像 / 各ページのタイトル画像の設定です。
各ページタイトル / 各ページのタイトルの設定です。

その他の設定

その他の設定です。

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

ご意見・ご要望

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

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

ご意見・ご要望はこちら

カスタマイズのご依頼

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

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

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

GRAYEL Inc.