トップページ機能一覧
たくさんの商品が陳列され、あらゆる物が購入できる場所「デパート」。そんなデパートのように、様々なジャンルの商品に利用できるよう、シンプルかつ柔軟な構造にしあげた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」テンプレートを適用した編集画面のプレビューを確認できますので、実際にどのように設定するかご購入前に確認できます。
背景やテキストカラーの他、サイトの枠カラーやタイトル下線カラー等も選択できるようになっております。
ショップのイメージに合わせたカラーを選択できます。
ヘッダー部分に、サイトの説明文を表示できます。空白の場合、表示されません。
ヘッダーのレイアウトを2通りから選択できます(ブラウザサイズ992px以上閲覧時のみ)。
サイトのデザインに合わせて「ロゴ上部」または「ロゴ左」を選択してください。
ナビゲーションメニューおよび、タイトル・見出し部分のフォントを選択できます。
サイトデザインに合わせて選択してください。
ヘッダーに表示されるメニューの数によっては「ロゴ左」を選択した際に1列には入りきらず、2列になる場合がございます。その場合は「ロゴ上部」を選択してください。
サイドバーに送料を表示できます。送料無料の場合のアピール等にご利用ください。
「送料表示ON-OFF」から表示非表示を選択できます。
カテゴリー一覧に表示されるカテゴリーは、BASEの「カテゴリ管理」というAppsを利用して追加や編集が可能です。
https://apps.thebase.in/detail/16
カテゴリ管理の詳しい使い方は、上記ページの説明をご覧ください。
カテゴリーは「大カテゴリ」「中カテゴリ」「小カテゴリ」と設定することができます。左サイドバー部分、およびヘッダーメニューのカテゴリー表示部分には、「大カテゴリ」および「中カテゴリ」が表示されます。
またPC閲覧時、左サイドバーのカテゴリー一覧部分に常時「中カテゴリー」も表示させておきたい場合、「左サイドバーカテゴリー一覧マウスオーバー表示(PC閲覧時にマウスオーバーで中カテゴリーを表示)ON-OFF」ボタンをオフにして下さい。
最大4枚までスライド画像を表示できます。また画像からリンク設定も可能です。
※リンク部分を空白の場合、リンクは設定されません。
「スライドON-OFF」から、スライドを利用するかしないか選択できます。
オフにした場合、「スライド画像01」に登録されている画像が、1枚の固定画像として表示されます。
画像のサイズは、閲覧環境でレスポンシブ対応されますが、992px以上のブラウザ幅で閲覧した場合の横幅サイズは705pxとなるので、横幅サイズは705px以上を推奨いたします。縦幅に制限はありませんが、異なった縦幅の画像を設定した場合、スライドする度にスライドの縦幅も増減します。そのため、スライド画像は同じサイズで統一することをオススメいたします。(推奨サイズ:横幅705px × 縦幅470px)
PCでの閲覧時、縦幅のサイズが470px以外の場合、サイト表示時にスライダー部分の縦幅が増減します。この増減が気になる方は、デザイン編集画面の下の方に「※メインスライダー画像の縦幅の数値。詳しくはDEPARTMENTマニュアルをご参照下さい。」という項目に、画像縦幅の数値を入れて下さい。そうすると、縦幅の増減が解消されます。
スライドの動きは、デフォルトでは画像が横スライドされますが、「スライド フェード利用」をオンにしてもらうことで、画像の動きをフェードに切り替えることが可能です。
スライド画像の下に、重要なお知らせを掲載できます。またテキストと枠線のカラーを設定できます。
空白の場合、表示されません。
「Blog」appには「この記事を固定にする」機能があります。「この記事を固定にする」にチェックを入れた場合、チェックを入れた記事のタイトルがブログ記事固定表示に表示され、記事ページへリンクが張られます。
※この機能を利用するためには「Blog」Appのご利用が必須となります。⇒https://apps.thebase.in/detail/43
特に目立たせたい商品や内容を表示させるために、最大3点までピックアップ画像および文章を掲載できます。
ピックアップ画像からリンク設定も可能です。
登録する画像の横幅は固定されておりますが、縦幅は固定しておりません。そのため、異なるサイズの画像を登録されると、行の高さが揃わず、若干バラつく印象となりますので、同じサイズの画像を登録することを推奨いたします。
「PickupON-OFF」から表示非表示を選択できます。
ピックアップ表示には、アイテム画像だけでなく、セールのお知らせ画像や、新着入荷のお知らせ画像等、好きな画像を挿入することが可能です。販促アピールにご利用ください。
フリースペースとして、画像1点および文章を掲載できます。画像からリンクを張ることも可能です。
「トップフリースぺースON-OFF」から表示非表示を選択できます。
「トップフリースペーステキスト」部分には、htmlタグを挿入することも可能です。公式サイトをお持ちの場合は、公式サイトのウェブサーバの領域にバナー画像等をアップし、その画像を<img>タグで「トップフリースペーステキスト」に挿入することで、追加で画像を表示させることも可能です。
オフィシャルサイトをお持ちの場合、オフィシャルサイトへのリンクを張ることができます。デザイン編集画面に「ショップ公式サイト」という入力欄がありますので、そちらに公式サイトへのURLをご入力ください。空白の場合、表示されません。
リンク部分には、オフィシャルサイトの他に「フェイスブック」「ツイッター」「アメーバブログ」「Instagram」へのリンクを掲載できます。こちらは管理画面の「ショップ設定」画面から入力した内容が表示されます。
また、リンクの背景は黒となっておりますが、背景色・文字色は「リンク・検索・カートに入れるボタン等背景色」「リンク・検索・カートに入れるボタン等文字色」で変更可能です。
フリースペースとして、画像1点と文章を掲載できます。お好きな内容を掲載ください。
「左サイドフリースペースON-OFF」から表示非表示を選択できます。
「左サイドフリースペーステキスト」部分には、htmlタグを挿入することも可能です。公式サイトをお持ちの場合は、公式サイトのウェブサーバの領域にバナー画像等をアップし、その画像を<img>タグで「左サイドフリースペーステキスト」に挿入することで、追加で画像を表示させることも可能です。
新着情報を最大3件まで掲載できます。タイトルからリンクを張ることも可能です。
「新着情報ON-OFF」から表示非表示を選択できます。
トップページに、「Blog」Appで作成した新着ブログ記事3件を表示することができます。表示されるのは、ブログタイトルおよび、投稿日時のみとなり、タイトルをクリックすることで、該当のブログページへリンクが飛びます。
トップページにブログを表示させる場合は、「★ブログ一覧表示ON-OFF」ボタンをオンにして下さい。
※この機能を利用するためには「Blog」Appのご利用が必須となります。⇒https://apps.thebase.in/detail/43
また、Blog機能を新着情報として利用したい場合、「★ブログ一覧表示名を『NEWS』に変更機能ON-OFF」ボタンをオンにして下さい。すると、「Blog」と表記されている部分が、「News」表記に変更されます。
「News」と表記変更される箇所は、「トップページブログ表示部分」「メニューバーのBLOG部分」「ブログページのタイトル部分」のみとなります。
※既存の新着情報表示部分は、「★新着情報ON-OFF」で非表示にすることができますので、必要であれば既存の新着情報表示部分は非表示にしてください。
登録された商品は、商品一覧に新しいものから表示されます。BASEのデフォルト機能であり、DEPARTMENTのカスタム機能ではありませんが、DEPARTMENTで商品一覧を表示する場合、登録された商品の横幅は固定しておりますが、縦幅は固定しておりません。そのため、商品の1枚目に登録した画像のサイズが異なると、一覧の高さが異なり、少しバラバラした表示になります。
そのため、登録する商品画像のサイズを統一することを推奨いたします。
デフォルトでは、1行に表示される商品画像数は4個ですが、2~4個の間で設定可能です(ブラウザサイズ992px以上閲覧時のみ。スマホ・タブレットは表示数は固定されています。)
「商品一覧表示個数(PC閲覧時)」から選択してください。
※トップページの商品一覧は、デフォルトでは商品のタイトル&料金は表示されません。「トップページ商品一覧 タイトル&料金表示ON-OFF」をオンにすることで、商品のタイトルおよび料金が表示されます。
※デフォルトでは商品画像にマウスオーバーすると、商品のタイトルが表示されます。不要であれば「商品一覧画像マウスオーバー時のタイトル表示ON-OFF」をOFFにすると非表示となります。
BASEの「商品検索」Appsをインストールした場合、検索窓が設置されます。DEPARTMENTのカスタム機能で入力したテキストは、検索の対象外となりますので、ご了承くださいませ。
商品検索Appsについては、下記ページをご参照ください。
https://apps.thebase.in/detail/60
検索フォームの「search」ボタンの色・文字色は「リンク・検索・カートに入れるボタン等背景色」「リンク・検索・カートに入れるボタン等文字色」で変更可能です。
商品詳細ページに表示される拡大画像は、縦幅の最大値が「640px」までとなって、それ以上のサイズの画像を登録された場合は自動で縮小表示されます。縦幅640px以上のサイズを登録された場合、拡大画像をクリックすることで、実際に登録された画像サイズで表示させることが可能です。
※ただし、ユーザーが閲覧しているブラウザサイズよりも大きく表示させることはできません。
商品詳細ページにフリースペースとして、各商品の商品説明文の下に、共通の画像や文章を掲載できます。お好きな内容を掲載ください。ここに記載された内容は、すべての商品詳細ページに表示されます。
「商品情報フリースペースON-OFF」から表示非表示を選択できます。
カートに入れるボタンの色・文字色は「リンク・検索・カートに入れるボタン等背景色」「リンク・検索・カートに入れるボタン等文字色」で変更可能です。
またセール価格の文字色は「セール価格のプライスカラー※要セールApp」から設定することが可能です。
※セール価格設定には「セールApp」のインストールが必要となります。「セールApp」については、下記ページをご参照ください。
https://apps.thebase.in/detail/66
カートに入れるボタンの位置を変更できます。通常は商品説明文の右横に表示されますが、「★「カートに入れる」ボタンの表示位置を商品説明の下にするON-OFF」ボタンをオンにすることで、カートに入れるボタンが商品説明文の下に表示されます。
※カートに入れるボタンが右横に表示されるのは、画面サイズが768px以上の場合のみになります。
関連商品が3点表示されます。関連商品表示はBASEの既存機能であり、商品点数の増減や、関連商品の指定はできません。自動的に表示されます。
関連商品を表示させたくない場合は「★商品詳細ページに関連商品表示ON-OFF」をオフにしてください。
「レビューApp」をインストールしている場合、ショップレビューが表示されます。「レビューApp」については、下記ページをご参照ください。
https://apps.thebase.in/detail/64
youtubeの動画を掲載できます。掲載したい動画をYoutubeにアップし、「共有」の「埋め込みコード」(<iframe~から始まるもの)を入力してください。
空白の場合、表示されません。
最大2枚までショップ画像を掲載できます。
ショップ詳細情報を追加で掲載できます。追加できる内容は、下記になります。
DEPARTMENTテーマは海外対応Appsも利用できますが、DEPARTMENTテーマのカスタム部分は言語の変更等ができません。
例えば、aboutページの「ショップ名」や「住所」等の見出し部分は、日本語のまま表示されますのでご注意ください。
セールAppをインストールすると、セール商品価格を表示することが可能です。
セール商品の価格および割引率の色は「セール価格のプライスカラー※要セールApp」で設定することができます。
「HTML編集App」をインストールした場合、それ以後のDEPARTMENTテーマのアップデートはサイトに反映されません。
以後のテーマの管理は、ご利用者様本人の自己責任となりますので、ご了承ください。
個別にDEPARTMENTをカスタムできるよう、「スタイルシート(css)用フリースペース」を設置してあります。
DEPARTMENTテーマのhtmlは変更することはできませんが、一部の色やスタイルについては、「スタイルシート(css)用フリースペース」にスタイルシート(CSS)を書き込むことで、変更できる場合もあります。ご自由にご活用下さい。
※こちらに書き込んでも変更できない箇所もありますので、ご了承ください。
MULBERRY https://mulberry.promo/
WEBサイト構築・名刺等印刷物の制作
DEPARTMENTについて、ご不明点等はこちらのお問い合わせフォームからご連絡ください。
※内容を確認次第、折り返しご連絡させていただきます。万が一メールが返信できない場合は、こちらのサイトでお知らせさせていただきます。
※メールでのご返信となります。携帯電話のメールアドレスをご入力された場合、パソコンからのメールが受信できるようになっているか、設定のご確認をお願いいたします。
※土日祝日のお問合せの場合、ご返信が遅れる場合がございますので、ご了承くださいませ。
※申し訳ございませんが、お電話やチャットでのサポート対応はしておりません。ご了承くださいませ。
DEPARTMENTテーマは、BASEのシステム変更や、各種ブラウザ・OSのバージョンアップに伴い定期的にデータをアップデートしております。これに伴い、予告なくテーマが変更される場合がありますのでご了承ください。