HOME › #2 HOME設定

#2 HOME設定
スライドショー、コレクション、商品一覧、お知らせなど

メイン画像（スライドショー）の設定

トップページを開くと最初に表示されるメインビジュアルとして大きな画像を表示できます。このテーマでは、印象的な写真でブランドイメージを表現するのではなく、実用的なバナーを複数表示できるようなレイアウトのスライドバナーをメインとしています。

バナースライドは最低3枚のバナーを一覧してスライド
高さ、自動送り、スピードを設定

◾️メイン画像：1〜4枚目 メイン画像は「画像＋リンク先URL＋キャプション」のセットを最大6枚設定できます。リンクURLが空欄の場合、リンクのない単純な画像表示となります。キャプションも空欄で非表示となります。どちらも必要な場合のみ入力してください。
⌊ リンク先URL バナーからのリンク先URLを入力します。
⌊ キャプション 画像の上にテキストを表示します。画像自体に文字を入れたデザインバナーにする場合は空欄にすると表示されません。
⌊ メイン画像スライドタイプ ON：一覧性の高いバナースライド — 複数のバナーが並んで表示されるスライドタイプになります。様々なキャンペーンや商品紹介バナーを同時に見せるのに適しています。画像は最低3枚必要です。

OFF：大きく1枚づつフェード — ごく一般的な1枚づつの画像を大きくスライドさせます。スライドのために画像は2枚以上必要です。

1枚のみアップロードした状態ではスライド自体できませんので、この設定がON/OFFどちらであっても1枚が大きく表示される状態になります。
⌊ スライド最大高さ調整 スライドエリアの最大高さを選択できます。PCなどの大きな画面でウィンドウを広げた際に、どこまで高さを大きくするかという最大の高さです。スライドタイプが「一覧性の高いバナースライド」では、最大高さがどのような設定であっても、スマホなど小さな画面では「1枚目の画像の縦横比を維持＋左右の他の画像が少し見える状態」に合わせて高さが小さくなります。
⌊ スライド送りガイド スライダーの下にあるガイド（ページネーション）のデザイン「番号付き / シンプルドット」から選択できます。
⌊ 一定時間ごとに自動スライド 画像を自動的にスライドさせる場合はONに。静止させたい場合はOFFに。どちらの場合でも、訪問者が左右の矢印ボタン、また画面フリップなどで任意でスライドを前後させることができます。
⌊ 自動スライド間隔 自動送りをONにした場合、その切り替わる速さを調整できます。スライドの数、順序の調整を優先し、出来るだけゆっくりのスライドとするのがおすすめです。
⌊ 滑らかに連続スクロール 画像が滑らかに連続スクロールします。サイトを開いた瞬間から動きのある表現が可能です。こちらをONにすると「一定時間ごとに自動スライド」よりも優先して適用され、スライド間隔の時間設定も無視されます。

一覧性の高いバナースライド — バナースライドは最低3枚設定してください。アップロードされていない状態ではグレーの空欄画像が表示されます。

大きく1枚づつフェード — 大きく1枚づつフェードでは「1枚だけ」の場合は静止画として表示されます。2枚目に画像がアップロードされているとスライダーが起動します。（例えば、1枚目と3枚目だけではスライドになりませんので、複数枚を利用する場合は必ず2枚目からアップロードが必要です）

大きく1枚づつフェードでは「横長」で表示されますので横長の画像をご利用ください。「大きく1枚づつフェード」の状態で各画像を全体表示させることは不可能ですので、あらかじめクロップされることを考慮した画像を利用してください。

1枚のみの場合は、その画像の比率でそのまま表示されます。

※5枚以上に増やしたい場合はテーマのHTML編集が必要です。サポートフォーラムではコードレベルのご案内はできないのですが「どの辺をどうする」といった解説は可能です。コードの編集に抵抗の無い方や時間に余裕にある方は一度サポートフォーラムにご質問ください。

オーダーメイドサービスではそのような場合のカスタマイズを承っております。

コレクションの設定

コレクションはトップページの前半に表示する「画像 + リンク先URL」を１セットとしたタイル型のメニューセクションです。リンク付き画像を4つまで設定することができます。カテゴリーAppなどと自動連動している訳ではありませんので、自由な使い方が可能です。

例えばキャンペーンのバナーなどを一覧表示、リンク先はカテゴリー一覧や、特定の商品ページ、ブログ記事ページなど

【TOP】コレクション ON/OFF コレクションを利用する場合はONに
⌊ コレクションタイトル コレクションの見出しを設定。用途によって自由に見出しを決めることができます。
⌊ コレクション1〜4 画像 より自由にデザインしていただくため縦横比率を指定していません。アップロードされた画像をピッタリと表示します。ただし必ず全ての画像で縦横比を統一してください。縦横比が統一されることで、折り返した時にうまく整列させることができます。表示サイズは後述の「画像の並べ方」によって異なりますが、ピクセルサイズは長辺で800pxあれば十分です。
⌊ コレクション1〜4 リンク先 コレクション画像からのリンク先URL。キャンペーンなどで利用する場合、商品詳細URLやブログ記事URLなどに。カテゴリー一覧にする場合はカテゴリーページURLをここにペーストします。
⌊ 画像の並べ方 列の数を2列〜4列で選択することができます。画像数、奇数偶数に応じて、最適な列数を選択してください。（スマホサイズでは2列になります）

コレクションの機能説明にて、一時誤った内容が記載されておりました。コレクションの画像数は4つ、テキストラベルのない仕様となっております。コレクション画像数を増やす場合はカスタマイズをご検討ください。

お知らせの設定

トップページに表示するお知らせを3件まで設定できます。日付、内容、リンク先を手動で入力します。ブログ機能と連動する訳ではありませんので、ブログとは別のシンプルなテキストニュースとして利用できます。

ピックアップカテゴリーの設定

ピックアップカテゴリーの設定

特定のカテゴリーを指定し、そのカテゴリーから10個の商品をカルーセル表示できる機能です。

◾️ピックアップカテゴリー：タイトル ピックアップカテゴリーの見出しテキストを設定します。
⌊ カテゴリーID カテゴリーIDを入力します。カテゴリーIDの確認方法は「App設定 カテゴリーIDの確認方法」をご覧ください。

※プレビューでは商品は読み込まれません。これはカテゴリーを読み込んでいる仕組み上の理由ですので、不具合ではありません。カテゴリーピックアップでの商品表示は実際のショップサイトにてご確認ください。
⌊ 表示タイプ ピックアップの表示方法として「登録順」「ランダム」「ランキング」を設定できます。売りたい商品が決まっている場合は、その商品登録の順序変更をして調整してください。ランダムの表示内容は制御できません。商品は先頭10個だけを読み込みます。ランダムは「先頭10個をランダム表示」となりますので、最後の設定にある「表示数」が多いほどランダム感は感じにくくなります。
⌊ 枠タイプ そのカテゴリーを色分けして枠をつけることができます。枠なし、枠あり（テキストカラーをベースにしたシンプルタイプ）、枠あり（ヘッダーカラーをベースにしたタイプ）から選択できます。

※枠はベースカラーを元に薄くした色を使用するため、背景色が暗い色の場合は枠が見えなくなります。枠なしをご利用ください。
◾️ピックアップカテゴリー表示列数 表示数を「２〜５」まで何個並びにするかを選択できます。

ランキング形式の使い方 — カテゴリーピックアップで表示タイプ「ランキング形式」を選ぶと、商品が登録順に並び、ランキングのデザインが適用されます。例えば、「トップス」カテゴリーがあり、その中でランキング形式で紹介したい場合。カテゴリーの「トップス」の中の子カテゴリーとして「ランキング」というカテゴリーを作成しておきます。そしてピックアップカテゴリーの1つにそのカテゴリーIDを入力し「トップスランキング」などとしておくことで、トップスのランキングを表示することができます。さらに、そのような使い方をして「トップス」の中の「ランキング」というカテゴリーはカテゴリーナビなどには表示する必要がないといった場合、特定カテゴリーをナビから隠す機能も備わっています。「テーマ設定 > App設定 > ◾️非表示カテゴリー：ナビには表示しないカテゴリId 」をご参照ください。

新着商品一覧の設定

BASEでの通常の商品一覧です。すべての商品を登録が新しい順に一覧表示し、24個目以上は「もっと見る」ボタンによって読み込みます。

◾️商品一覧の見出し 商品一覧の見出しテキスト
商品一覧下の読込みボタン名 「もっと見る」ボタンのテキストをカスタマイズできます。HOME、カテゴリーページで共通となります。

ブログの新着記事の設定

トップページの商品一覧下にブログAppによるブログの新着記事を表示できます。ブログ内の画像と共に新着記事が３件表示されます。「App設定 > 新着記事の見出し」にて見出しテキストの設定ができます。また「App設定 > 日付を表示する」をOFFにすると、新着表示を含めブログページ全体を通して日付を非表示にできます。

※ トップページの「コレクション」「お知らせ」「ピックアップカテゴリー」の順序を変更したい場合

以下のコードをデザイン設定の「その他設定 > 独自スタイルシート」にコピーペーストします。1行目から順に、コレクション、お知らせ、ピックアップカテゴリーの順序を数字で示しています。それぞれの「1」「2」「3」の数字をお好みで変更し、保存してください。

#TopContentOrder #collections { order: 1;}
#TopContentOrder #newsbox { order: 2;}
#TopContentOrder #catItemLists { order: 3;}

3つの数字の比較で、数字が小さいものから順に表示されます。例えば「#newsbox」だけを「5」にしておけばお知らせは一番下に移動します。コードは半角英数字のみですので、全角文字や全角スペースが入ってしまわないようにご注意ください。