BASE デザインテーマDEPARTMENT

 DEPARTMENTについて

たくさんの商品が陳列され、あらゆる物が購入できる場所「デパート」。そんなデパートのように、様々なジャンルの商品に利用できるよう、シンプルかつ柔軟な構造にしあげたBASE専用テンプレートが『DEPARTMENT』です。

■DEPARTMENTを利用した参考サイト
https://www.tumugu.kitchen/
http://www.mulberry-web.com/

[2021.09.16] ・Youtube / note / TikTokのリンク表示ができるように対応しました。
[2021.05.06] ・SNSリンクをアイコン表示できるように対応しました。

BASEのアカウントをお持ちの場合、ログインした状態で「デザインマーケット」ページの「DEPARTMENT」ページを閲覧すると「プレビュー」というボタンがついております。こちらより「DEPARTMENT」テンプレートを適用した編集画面のプレビューを確認できますので、実際にどのように設定するかご購入前に確認できます。

 トップページ機能説明

[1] 自由なカラー選択

背景やテキストカラーの他、サイトの枠カラーやタイトル下線カラー等も選択できるようになっております。 ショップのイメージに合わせたカラーを選択できます。
自由なカラー選択

[2] サイト説明文表示

ヘッダー部分に、サイトの説明文を表示できます。空白の場合、表示されません。

[3] ヘッダーレイアウト&フォント選択

ヘッダーのレイアウトを2通りから選択できます(ブラウザサイズ992px以上閲覧時のみ)。
サイトのデザインに合わせて「ロゴ上部」または「ロゴ左」を選択してください。
ヘッダーレイアウト&フォント選択

ナビゲーションメニューおよび、タイトル・見出し部分のフォントを選択できます。 サイトデザインに合わせて選択してください。
ヘッダーに表示されるメニューの数によっては「ロゴ左」を選択した際に1列には入りきらず、2列になる場合がございます。その場合は「ロゴ上部」を選択してください。
ヘッダーレイアウト&フォント選択

[4] 送料表示

サイドバーに送料を表示できます。送料無料の場合のアピール等にご利用ください。
「送料表示ON-OFF」から表示非表示を選択できます。

[5] カテゴリー一覧(BASE機能)

カテゴリー一覧に表示されるカテゴリーは、BASEの「カテゴリ管理」というAppsを利用して追加や編集が可能です。

https://apps.thebase.in/detail/16
カテゴリ管理の詳しい使い方は、上記ページの説明をご覧ください。

カテゴリーは「大カテゴリ」「中カテゴリ」「小カテゴリ」と設定することができます。左サイドバー部分、およびヘッダーメニューのカテゴリー表示部分には、「大カテゴリ」および「中カテゴリ」が表示されます。
カテゴリー一覧(BASE機能)
カテゴリー一覧(BASE機能)

またPC閲覧時、左サイドバーのカテゴリー一覧部分に常時「中カテゴリー」も表示させておきたい場合、「左サイドバーカテゴリー一覧マウスオーバー表示(PC閲覧時にマウスオーバーで中カテゴリーを表示)ON-OFF」ボタンをオフにして下さい。カテゴリー一覧(BASE機能)

[6] スライド画像表示

最大4枚までスライド画像を表示できます。また画像からリンク設定も可能です。
※リンク部分を空白の場合、リンクは設定されません。
「スライドON-OFF」から、スライドを利用するかしないか選択できます。
オフにした場合、「スライド画像01」に登録されている画像が、1枚の固定画像として表示されます。

画像のサイズは、閲覧環境でレスポンシブ対応されますが、992px以上のブラウザ幅で閲覧した場合の横幅サイズは705pxとなるので、横幅サイズは705px以上を推奨いたします。縦幅に制限はありませんが、異なった縦幅の画像を設定した場合、スライドする度にスライドの縦幅も増減します。そのため、スライド画像は同じサイズで統一することをオススメいたします。(推奨サイズ:横幅705px × 縦幅470px)

PCでの閲覧時、縦幅のサイズが470px以外の場合、サイト表示時にスライダー部分の縦幅が増減します。この増減が気になる方は、デザイン編集画面の下の方に「※メインスライダー画像の縦幅の数値。詳しくはDEPARTMENTマニュアルをご参照下さい。」という項目に、画像縦幅の数値を入れて下さい。そうすると、縦幅の増減が解消されます。
スライド画像表示

スライドの動きは、デフォルトでは画像が横スライドされますが、「スライド フェード利用」をオンにしてもらうことで、画像の動きをフェードに切り替えることが可能です。

[7] 重要なお知らせ

スライド画像の下に、重要なお知らせを掲載できます。またテキストと枠線のカラーを設定できます。
空白の場合、表示されません。

[8] ブログ記事固定表示

「Blog」appには「この記事を固定にする」機能があります。「この記事を固定にする」にチェックを入れた場合、チェックを入れた記事のタイトルがブログ記事固定表示に表示され、記事ページへリンクが張られます。
※この機能を利用するためには「Blog」Appのご利用が必須となります。⇒https://apps.thebase.in/detail/43

[9] ピックアップ表示

特に目立たせたい商品や内容を表示させるために、最大3点までピックアップ画像および文章を掲載できます。
ピックアップ画像からリンク設定も可能です。
登録する画像の横幅は固定されておりますが、縦幅は固定しておりません。そのため、異なるサイズの画像を登録されると、行の高さが揃わず、若干バラつく印象となりますので、同じサイズの画像を登録することを推奨いたします。
「PickupON-OFF」から表示非表示を選択できます。

ピックアップ表示には、アイテム画像だけでなく、セールのお知らせ画像や、新着入荷のお知らせ画像等、好きな画像を挿入することが可能です。販促アピールにご利用ください。
ピックアップ表示

[10] トップページフリースペース

フリースペースとして、画像1点および文章を掲載できます。画像からリンクを張ることも可能です。
「トップフリースぺースON-OFF」から表示非表示を選択できます。

「トップフリースペーステキスト」部分には、htmlタグを挿入することも可能です。公式サイトをお持ちの場合は、公式サイトのウェブサーバの領域にバナー画像等をアップし、その画像を<img>タグで「トップフリースペーステキスト」に挿入することで、追加で画像を表示させることも可能です。

[11] オフィシャルサイトへリンク

オフィシャルサイトをお持ちの場合、オフィシャルサイトへのリンクを張ることができます。デザイン編集画面に「ショップ公式サイト」という入力欄がありますので、そちらに公式サイトへのURLをご入力ください。空白の場合、表示されません。

リンク部分には、オフィシャルサイトの他に「フェイスブック」「ツイッター」「アメーバブログ」「Instagram」へのリンクを掲載できます。こちらは管理画面の「ショップ設定」画面から入力した内容が表示されます。

また、リンクの背景は黒となっておりますが、背景色・文字色は「リンク・検索・カートに入れるボタン等背景色」「リンク・検索・カートに入れるボタン等文字色」で変更可能です。

[12] サイドバーフリースペース

フリースペースとして、画像1点と文章を掲載できます。お好きな内容を掲載ください。
「左サイドフリースペースON-OFF」から表示非表示を選択できます。

「左サイドフリースペーステキスト」部分には、htmlタグを挿入することも可能です。公式サイトをお持ちの場合は、公式サイトのウェブサーバの領域にバナー画像等をアップし、その画像を<img>タグで「左サイドフリースペーステキスト」に挿入することで、追加で画像を表示させることも可能です。

[13] 新着情報表示

新着情報を最大3件まで掲載できます。タイトルからリンクを張ることも可能です。
「新着情報ON-OFF」から表示非表示を選択できます。

[14] トップページブログ表示

トップページに、「Blog」Appで作成した新着ブログ記事3件を表示することができます。表示されるのは、ブログタイトルおよび、投稿日時のみとなり、タイトルをクリックすることで、該当のブログページへリンクが飛びます。
トップページにブログを表示させる場合は、「★ブログ一覧表示ON-OFF」ボタンをオンにして下さい。
トップページブログ表示
※この機能を利用するためには「Blog」Appのご利用が必須となります。⇒https://apps.thebase.in/detail/43


また、Blog機能を新着情報として利用したい場合、「★ブログ一覧表示名を『NEWS』に変更機能ON-OFF」ボタンをオンにして下さい。すると、「Blog」と表記されている部分が、「News」表記に変更されます。
「News」と表記変更される箇所は、「トップページブログ表示部分」「メニューバーのBLOG部分」「ブログページのタイトル部分」のみとなります。
トップページブログ表示
※既存の新着情報表示部分は、「★新着情報ON-OFF」で非表示にすることができますので、必要であれば既存の新着情報表示部分は非表示にしてください。

[15] 商品一覧表示

登録された商品は、商品一覧に新しいものから表示されます。BASEのデフォルト機能であり、DEPARTMENTのカスタム機能ではありませんが、DEPARTMENTで商品一覧を表示する場合、登録された商品の横幅は固定しておりますが、縦幅は固定しておりません。そのため、商品の1枚目に登録した画像のサイズが異なると、一覧の高さが異なり、少しバラバラした表示になります。
そのため、登録する商品画像のサイズを統一することを推奨いたします。

デフォルトでは、1行に表示される商品画像数は4個ですが、2~4個の間で設定可能です(ブラウザサイズ992px以上閲覧時のみ。スマホ・タブレットは表示数は固定されています。)
「商品一覧表示個数(PC閲覧時)」から選択してください。

※トップページの商品一覧は、デフォルトでは商品のタイトル&料金は表示されません。「トップページ商品一覧 タイトル&料金表示ON-OFF」をオンにすることで、商品のタイトルおよび料金が表示されます。
※デフォルトでは商品画像にマウスオーバーすると、商品のタイトルが表示されます。不要であれば「商品一覧画像マウスオーバー時のタイトル表示ON-OFF」をOFFにすると非表示となります。

[16] 検索フォーム設置

BASEの「商品検索」Appsをインストールした場合、検索窓が設置されます。DEPARTMENTのカスタム機能で入力したテキストは、検索の対象外となりますので、ご了承くださいませ。
商品検索Appsについては、下記ページをご参照ください。

https://apps.thebase.in/detail/60

検索フォームの「search」ボタンの色・文字色は「リンク・検索・カートに入れるボタン等背景色」「リンク・検索・カートに入れるボタン等文字色」で変更可能です。

 商品詳細ページ・aboutページ機能説明

[1] 商品画像拡大

商品詳細ページに表示される拡大画像は、縦幅の最大値が「640px」までとなって、それ以上のサイズの画像を登録された場合は自動で縮小表示されます。縦幅640px以上のサイズを登録された場合、拡大画像をクリックすることで、実際に登録された画像サイズで表示させることが可能です。
※ただし、ユーザーが閲覧しているブラウザサイズよりも大きく表示させることはできません。

[2] 商品情報フリースペース

商品詳細ページにフリースペースとして、各商品の商品説明文の下に、共通の画像や文章を掲載できます。お好きな内容を掲載ください。ここに記載された内容は、すべての商品詳細ページに表示されます。
「商品情報フリースペースON-OFF」から表示非表示を選択できます。

[3-1] カートに入れるボタン・セール価格

カートに入れるボタンの色・文字色は「リンク・検索・カートに入れるボタン等背景色」「リンク・検索・カートに入れるボタン等文字色」で変更可能です。
またセール価格の文字色は「セール価格のプライスカラー※要セールApp」から設定することが可能です。
※セール価格設定には「セールApp」のインストールが必要となります。「セールApp」については、下記ページをご参照ください。

https://apps.thebase.in/detail/66

[3-2] カートに入れるボタンの表示位置設定

カートに入れるボタンの位置を変更できます。通常は商品説明文の右横に表示されますが、「★「カートに入れる」ボタンの表示位置を商品説明の下にするON-OFF」ボタンをオンにすることで、カートに入れるボタンが商品説明文の下に表示されます。
※カートに入れるボタンが右横に表示されるのは、画面サイズが768px以上の場合のみになります。
カートに入れるボタンの表示位置設定

[4] 関連商品表示

関連商品が3点表示されます。関連商品表示はBASEの既存機能であり、商品点数の増減や、関連商品の指定はできません。自動的に表示されます。
関連商品を表示させたくない場合は「★商品詳細ページに関連商品表示ON-OFF」をオフにしてください。

[5] ショップの評価

「レビューApp」をインストールしている場合、ショップレビューが表示されます。「レビューApp」については、下記ページをご参照ください。

https://apps.thebase.in/detail/64

[6] Youtube動画掲載

youtubeの動画を掲載できます。掲載したい動画をYoutubeにアップし、「共有」の「埋め込みコード」(<iframe~から始まるもの)を入力してください。
空白の場合、表示されません。

Youtube動画掲載

[7] ショップ写真掲載

最大2枚までショップ画像を掲載できます。

[8] ショップ詳細情報掲載

ショップ詳細情報を追加で掲載できます。追加できる内容は、下記になります。

  • ・ショップ所在地
  • ・ショップ所在地マップへのリンク(googlemap等)
  • ・ショップTEL
  • ・ショップFAX
  • ・ショップ営業時間
  • ・ショップ定休日
  • ・その他

 スマートフォンでの表示について

スマートフォンでの表示について

■スマホでDEPARTMENTテーマが反映されない場合

DEPARTMENTテーマはレスポンシブとなっておりますので、スマートフォンで見た際も、最適化されたレイアウトが表示されます。
スマートフォンで見た際に、BASEのデフォルトモバイルテーマが表示される場合は、「デフォルトのモバイルテーマを使用」がオンになっている可能性があります。
その場合は、BASEの管理画面のデザイン編集ページより、使用をオフに設定してください。

■背景画像を設定し、かつ「背景画像を繰り返す」設定をしていない場合

背景画像を設定し、かつ「背景画像を繰り返す」設定をしていない場合、「※背景画像を使用し、かつ背景画像を繰り返さない設定にする場合、オンにして下さい。」のオンオフボタンを「オン」にして下さい。
スマホのブラウザで見た場合、特定のブラウザで背景画像がぼやける場合がございます(ブラウザの仕様)。このボタンを「オン」にすることで、回避できます。
背景画像を使用しない場合や背景画像を繰り返し表示させる場合は、このボタンは必ず「オフ」のままにしておいてください。

 英語・外貨対応Appについて

DEPARTMENTテーマは海外対応Appsも利用できますが、DEPARTMENTテーマのカスタム部分は言語の変更等ができません。
例えば、aboutページの「ショップ名」や「住所」等の見出し部分は、日本語のまま表示されますのでご注意ください。

 セールAppについて

セールAppをインストールすると、セール商品価格を表示することが可能です。
セール商品の価格および割引率の色は「セール価格のプライスカラー※要セールApp」で設定することができます。

 HTML編集App利用の注意点

「HTML編集App」をインストールした場合、それ以後のDEPARTMENTテーマのアップデートはサイトに反映されません。
以後のテーマの管理は、ご利用者様本人の自己責任となりますので、ご了承ください。

 「スタイルシート(css)用フリースペース」について

「スタイルシート(css)用フリースペース」について

個別にDEPARTMENTをカスタムできるよう、「スタイルシート(css)用フリースペース」を設置してあります。
DEPARTMENTテーマのhtmlは変更することはできませんが、一部の色やスタイルについては、「スタイルシート(css)用フリースペース」にスタイルシート(CSS)を書き込むことで、変更できる場合もあります。ご自由にご活用下さい。
※こちらに書き込んでも変更できない箇所もありますので、ご了承ください。

 お問合せ

制作者

MULBERRY https://mulberry.promo/

主な業務

WEBサイト構築・名刺等印刷物の制作

 DEPARTMENTについて、ご不明点等はこちらのお問い合わせフォームからご連絡ください。
※内容を確認次第、折り返しご連絡させていただきます。万が一メールが返信できない場合は、こちらのサイトでお知らせさせていただきます。
※メールでのご返信となります。携帯電話のメールアドレスをご入力された場合、パソコンからのメールが受信できるようになっているか、設定のご確認をお願いいたします。
※土日祝日のお問合せの場合、ご返信が遅れる場合がございますので、ご了承くださいませ。
※申し訳ございませんが、お電話やチャットでのサポート対応はしておりません。ご了承くださいませ。

 修正履歴

DEPARTMENTテーマは、BASEのシステム変更や、各種ブラウザ・OSのバージョンアップに伴い定期的にデータをアップデートしております。これに伴い、予告なくテーマが変更される場合がありますのでご了承ください。

[ 修正履歴 ]

  • ◎Youtube / note / TikTokのリンク表示ができるように対応しました。(2021.09.16)
  • ◎SNSリンクをアイコン表示できるように対応しました。(2021.05.06)
  • ◎コミュニティAppに対応いたしました。(2020.09.07)
  • ◎テイクアウトApp、抽選販売Appに対応いたしました。(2020.07.11)
  • ◎「商品説明カスタムApp」に対応いたしました。(2020.04.10)
  • ◎「カートに入れる」ボタンを商品画像のすぐ下にも表示する機能を追加しました。(2020.06.26)
  • ◎「商品説明カスタム App」に対応いたしました。(2020.04.10)
  • ◎トップページスライド画像の仕様を一部修正しました。(2020.02.22)
  • ◎「予約販売App」に対応させました。(2019.06.21)
  • ◎「販売期間設定App」に対応させました。また商品が売切れた場合「再入荷についてお問い合わせをする」ボタンが表示するようになりました。(2019.02.22)
  • ◎クロームブラウザで閲覧した際、ブラウザのバージョンやご利用PCの環境により、メインスライダーからのリンクが反映されない不具合を改修いたしました。(2018.10.24)
  • ◎「ショップコイン」に対応させました。ショップコインAppをインストールされている方は、メニューバーに「COIN」が表示されます。この修正にともない。メニューバーのメニューの並び順を変更いたしました。(2018.05.30)
  • ◎商品詳細ページに関連商品が表示されるように修正しました。(2018.02.23)
  • ◎ブログAppの「この記事を固定にする」にチェックをいれた記事のタイトルをトップページに表示されるように修正しました。(2018.01.13)
  • ◎背景「黒」を設定した場合「特定商取引法に基づく表記」の電話番号部分が見えなくなる症状を修正しました。(2017.11.24)
  • ◎「セールApp」に対応いたしました。(2017.09.23)

COPYRIGHT c mulberry ALL RIGHTS RESERVED.

TOP