BASE DESIGN THEME

RUKA

テーマ一覧/RUKA [ルカ]
pv1
pv2
pv3
pv4
pv5
pv6
pv7
pv8
唯一無二のBASEテーマ、
究極のフラグシップモデル

アクセシビリティにも配慮、強化された商品検索やカテゴリ機能に加え、流れるメインイメージなど、独自の演出を多数搭載した究極のフラグシップモデルです。

さらに、ABOUTページはタブで三つのコンテンツを作成可能で、ショッピングガイドやよくある質問などお好きなコンテンツページを作成可能です。

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

主な特徴

  • BASEで唯一、アクセシビリティに配慮したテーマ設計(*一部非対応)
  • ABOUTページ、タブコンテンツ
  • 流れるメインイメージ
  • 商品一覧サイドバー
  • カテゴリアイコン
  • 商品ページに商品説明や共通テキストをタブで表示
  • Markdownを使った商品説明、ショッピングガイドに対応
  • おしゃれなフォント設定
  • 追従ヘッダー
  • 独自カラーに対応
  • かわいいフォント
  • 角丸を使った柔らかいデザイン
  • TOPページのコンテンツを自由に並び替え
  • YouTube動画コンテンツ
  • Instagram埋め込み

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

カテゴリリストパターン

カテゴリリストは5つのデザインパターンがあり、さらに子カテゴリを非表示にしたり、特定のカテゴリを非表示にする機能も備わっています。

カテゴリアイコンやカテゴリリスト画像と組み合わせることでさまざまな見せ方が可能で、ヘッダーメニュー内にも設置可能です。
カテゴリ画像はこちら参照してください。

ショッピングガイドタブ

RUAKのABOUTページには三つのタブを設置し、それぞれのタブにリンクを設置することも可能です。各URLは/about#tab1~3です。会社案内とお買物ガイドを別ページにしたり、任意のページ代わりとして使用することも可能です。

各テキストエリアにはMarkdownを適用することも可能です。Markdownについてはこちらをご覧ください。

流れるメインイメージ

メインイメージは5パターンから選択でき、デモサイト1のような流れるメインイメージも簡単に設定できます。

対応App

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

テーマの購入はこちら

はじめに

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

おすすめApp

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

各種設定

背景の設定

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

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

画像の設定

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

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

全体設定

カラー設定

サイト全体のカラーテーマを設定します。サブ背景カラーは全体文字カラーとの組み合わせでも文字が読める、全体背景カラーと近い濃度のカラーを設定してください。

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

全体の設定

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

  • 画像の角丸 / 画像の角丸を設定します。
  • 見出しタイプ(PCのみ) / PC時の見出しの設定です。左/横並び、左右/横並びは二行目以降が横に並ぶようになります。

フォント設定

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

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

ポップアップバナー設定

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

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

ヘッダーの設定です。

  • レイアウト / 2パターンから選択できます。
  • 追従 / ヘッダーの追従の有無を選択します。
  • 追従時のスタイル / 追従ヘッダーのスタイルを選択します。
  • ロゴ画像の高さ / 各種高さを設定します。
  • メニュー / メニューの表示、非表示の設定です。
  • 各種テキスト / 各種テキストの設定です。
  • メニューカテゴリタイプ / メニュータイプを5パターンから選択できます。カテゴリ画像はこちら参照してください。
  • 子カテゴリ非表示 / 子カテゴリ非表示の設定です。
  • 非表示カテゴリID(,区切り) / 非表示にしたいカテゴリページのURLの末尾の数字を入力してください。(例:123456,234567)

ヘッダーメニュー内のバナーの設定です。

  • ドロワー/サイドバーに表示 / ドロワー、サイドバー内に表示の有無を設定できます。
  • 画像 / バナー画像です。横長の画像推奨です。
  • リンクURL / バナーのリンク先の設定です。

ドロワー設定

ドロワーの設定です。
カテゴリ画像の設定は、こちら参照してください。

  • SNSアイコン / SNSアイコンを表示します。
  • 翻訳 / 翻訳の選択エリアを表示します。
  • 子カテゴリ展開方法 / 子カテゴリの展開方法を選択します。矢印でのみ子カテゴリ表示、親カテゴリ全体（親カテゴリのどこをクリックしても子カテゴリを表示）から選択可能です。
  • 各種テキスト / 各種テキストの設定です。

ガイドドロワー設定

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

  • テキストMarkdown許可(上級者向け) / Markdownについてはこちらをご覧ください。
  • タブ01~06 / 見出しタブのテキストを入力します。
  • テキスト01~06 / コンテンツ内容を入力します。Markdownに対応しています。
  • 各種テキスト / 各種テキストの設定です。

フッターの設定です。

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

HOME設定

並び替え設定

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

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

メインイメージ設定

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

  • ページングカラー / ページングの色を設定します。
  • タイプ / 5パターンから選択します。
  • 中央画像 / メインイメージ中央に配置する画像です。
  • 中央画像の横幅 / 中央画像のサイズです。
  • 中央画像リンクURL / 中央画像のリンクURLです。
  • ホバーテキスト(上下ループのみ) / 上下ループタイプのみホバーテキストを表示します。
  • 各種メインイメージ設定 / それぞれのメインイメージの設定です。
  • ポップアップテキスト表示 / 右下のテキストの表示の設定です。
  • スマホタイプ / ポップアップテキストのスマホ時の表示方法です。
  • 各種テキスト / 各種テキストの設定です。

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

  • 大きく配置 / バナーを大きく配置します。
  • 各種バナー設定 / 各種バナーの設定です。

キーワード検索設定

キーワード検索の設定です。
キーワード検索、次のカテゴリリストは背景の有無、タイトルの有無で繋げて表示するデザインもおすすめです。

  • 背景 / 背景の表示設定です。
  • タイトル / タイトル設定です。

カテゴリリスト設定

カテゴリリストの設定です。

  • 背景 / 背景の表示設定です。
  • タイトル / タイトル設定です。
  • タイプ / タイプを5パターンから選択できます。カテゴリ画像はこちら参照してください。
  • 子カテゴリ非表示 / 子カテゴリ非表示の設定です。
  • 非表示カテゴリID(,区切り) / 非表示にしたいカテゴリページのURLの末尾の数字を入力してください。(例:123456,234567)

コンセプト設定

コンセプトの設定です。

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

画像背景バナー設定

画像背景バナーの設定です。

  • 画像 / 背景画像の設定です。
  • 各種テキストの設定 / 各種テキストの設定です。テキストは最大で150文字以内を目安に入力してください。

ランキング設定

ランキングの設定です。

  • ランク / ランキングアイコンを表示します。
  • 各種テキストの設定 / 各種テキストの設定です。

お知らせ設定

お知らせの設定です。

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

カテゴリスライド設定

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

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

新着商品設定

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

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

セール設定

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

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

閲覧履歴設定

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

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

YouTube設定

YouTubeの設定です。

  • 埋め込みコード / YouTubeの動画再生ページの共有ボタンをクリックし、埋め込むから埋め込みコードを取得してください。
  • 各種テキストの設定 / 各種テキストの設定です。

Instagram設定

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

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

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

新着ブログ/お知らせ設定

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

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

ABOUT設定

ABOUTページ設定

ABOUTページの設定です。各タブページへのリンクは/about#tab1、/about#tab2、/about#tab3となります。

  • ページタイトル / ページのタイトルの設定です。
  • メイン画像 / タイトル画像の設定です。
  • タブテキストMarkdown許可(上級者向け) / 各種タブテキストでMarkdownを許可します。Markdownについてはこちらをご覧ください。
  • 各種テキストの設定 / 各種テキストの設定です。Googleマップの埋め込みコード（iframe）などの設置も可能です。

商品ページ設定

商品詳細設定

商品詳細の設定です。

  • タイプ / 3パターンから選択できます。表示エリアは大きなサイズの画像に合わせて調整されます。（同じ比率の画像推奨）
  • 商品名のフォント / 商品名のフォントの設定です。
  • 共通テキスト(クーポン情報など) / 全商品ページに共通のテキストを設定できます。
  • 商品説明タブを使用 / 商品説明欄タブを使用します。
  • 各種タブテキストの設定 / 各種タブテキストの設定です。
  • 商品説明Markdown許可(上級者向け) / Markdownについてはこちらをご覧ください。
  • 自由タブテキスト / 自由タブのテキストを入力します。
  • 自由タブMarkdown許可(上級者向け) / Markdownについてはこちらをご覧ください。
  • 商品説明カスタムAppを画像下に移動 / 商品説明カスタムAppの表示位置を変更します。
  • Pay ID あと払いに関する情報を表示 / Pay ID あと払いに関する情報を非表示にします。

商品一覧設定

商品一覧の設定です。

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

App設定

商品検索App設定

商品検索Appの設定です。

  • placeholder / 検索エリアのplaceholderの設定です。
  • キーワードタイトル / キーワードリストのタイトルの設定です。
  • キーワードリスト(,区切り) / 半角カンマ区切りでキーワードを入力してください。検索結果ページにリンクします。

カテゴリApp設定

カテゴリAppの設定です。カテゴリ画像はこちら参照してください。

  • パンクズのホーム / パンクズのHOMEのテキスト設定です。
  • カテゴリアイコン(200×200/マニュアル参照) / ドロワーで使用するカテゴリアイコン画像です。
  • カテゴリリスト画像(500×250/マニュアル参照) / カテゴリリストで使用する画像です。
  • 子カテゴリアイコン – 使用(200×200/マニュアル参照) / ドロワー、カテゴリリストで使用する子カテゴリアイコンの設定です。
  • 各種画像 / 子カテゴリ画像です。

その他設定

各種ページ設定

各種ページの設定です。

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

その他の設定

その他の設定です。

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

Markdown記法について

本テンプレートでは、Markdown記法を一部サポートしており、テキストの装飾が可能です。
ただし、この機能は上級者向けであり、自己責任でのご利用をお願いいたします。
また、Markdown記法やHTML、CSSに関する技術的なサポートは行っておりませんのでご了承ください。

本テンプレートでは、以下のHTMLタグにスタイリングを適用しています：

  • 見出し（h1～h6）
  • リンク（a）
  • 太字（strong）
  • 区切り線（hr）
  • リスト（ul, ol）
  • 表（table）
  • 画像（img）

その他のタグを使用する場合は、必要に応じてカスタマイズが必要です。
Markdown記法については、Qiitaの記事をご参照ください。

また、ChatGPTなどのAIツールを利用すれば、Markdown形式への変換も簡単に行えます。

カテゴリアイコン、カテゴリリスト画像について

これらの画像は全カテゴリ分の画像を縦に結合して一つの画像として作成する必要があります。
メガメニュー画像は500x250px、ドロワーカテゴリ画像は200x200px、カテゴリリストのカテゴリ画像は500x250pxの画像を縦に結合してください。

以下デモサイトのサンプル画像になります。

画像の結合には、ブラウザ上で画像を縦結合するだけの画像ツールなどをご利用ください。

子カテゴリアイコン

子カテゴリアイコンも同様の方法で作成可能です。使用する場合、テーマ設定＞App設定＞■子カテゴリアイコン – 使用(200×200/マニュアル参照)をONにしてご利用ください。

ご意見・ご要望

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

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

ご意見・ご要望はこちら

カスタマイズのご依頼

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

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

カスタマイズのご依頼はこちら
© GRAYEL Inc.