OULU

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

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

4つのメインイメージと角丸を使ったデザインタイプで北欧デザインや柔らかいイメージのデザイン、コンテンツを右寄せ配置にしたり、縦書きの見出しなどを使ったレイアウトで和風デザインにもおすすめです。

姉妹テーマ

OULU : 北欧デザインにおすすめ、角丸を使った柔らかいデザイン
HERMANS : 変則的な見出しデザイン、シャドウとグラデを使ったデザイン
MONTANHA : ミニマル・シンプルデザイン、見出しやボタンの組み合わせ自由自在

主な特徴

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

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

メインイメージ

メインイメージは4パターンから選択、デザイン設定の角丸によりメインイメージも変化します。バナー画像を使えばさらに違ったメインイメージを作成できます。

コンテンツの並び替え

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

対応App

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

テーマの購入はこちら

デモサイト

更新履歴

2024.03.09: リリースしました

はじめに

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

各種設定

背景の設定

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

ロゴの設定

ロゴはテーマ設定の下の「ロゴ」から設定します。
ロゴは通常のロゴ、固定のロゴ、スマホ時の4つそれぞれ高さを指定できます。

画像の設定

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

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

テーマ設定

テーマの設定です。

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

カラー設定

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

テーマカラー / 使いたいカラーを選択してください。

デザイン設定

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

タイプ / 3つのデザインパターンから選択してください。
コンテンツサイズ / 右寄せにすると左に余白が開き、少し違ったイメージになります。
見出し / 6つのデザインパターンから選択してください。
ボタン / 4つのデザインパターンから選択してください。

ヘッダーの設定です。

下部 / ヘッダー下部のメニューを4パターンから選択できます。
ホバータイプ / ヘッダー下部メニューのホバータイプを選択できます。
固定ヘッダー表示 / 固定ヘッダー表示を選択できます。
ダークモードでロゴを白にする / ダークモード時にロゴを自動で白に変更します。(png画像推奨)
ロゴ画像の高さ(16~80px) / PCのロゴ画像の高さを設定します。
ロゴ画像の高さ(スマホ/12~60px) / スマホのロゴ画像の高さを設定します。
固定ロゴ画像の高さ(14~70px) / PCのロゴ画像の高さを設定します。
固定ロゴ画像の高さ(スマホ/10~50px) / スマホのロゴ画像の高さを設定します。
各種テキスト / メニュー表示時の表示名を接敵できます。

フォント設定

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

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

独自カラー設定

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

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

ポップアップバナー設定

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

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

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

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

商品一覧設定

商品一覧の設定です。

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

商品詳細設定

商品詳細の設定です。

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

メインイメージ設定

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

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

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

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

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

コンセプト設定

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

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

カテゴリ別スライド設定

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

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

画像背景バナー設定

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

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

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

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

バナーリスト設定

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

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

お知らせ設定

お知らせの設定です。

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

特徴設定

特徴の設定です。

特徴01~03の各種設定 / 画像、テキスト、リンクの設定です。

セール設定

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

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

ピックアップ設定

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

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

YouTube設定

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

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

Instagram設定

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

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

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

閲覧履歴設定

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

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

クーポン設定

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

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

カテゴリページ設定

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

パンクズのホーム / パンクズの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(税別)〜

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

GRAYEL Inc.