Debutのセクション

セクションは、オンラインストアの各ページのレイアウトを決定するカスタマイズ可能なコンテンツブロックです。

• ホームセクションでは、スライドショーやニュースレターの登録といった機能が含まれており、追加、再配置、削除することができます。ホームページには最大25個のセクションを追加できます。

• 各ページタイプには、独自のセクションが含まれています。たとえば、商品ページセクションで、オンラインストアの各商品ページのレイアウトを決定します。

• ページセクションは常に、オンラインストアの特定の場所にあります。カスタマイズ可能ですが、再配置および削除することはできません。

• 各テーマには、ヘッダーやフッターなどの固定セクションが含まれており、オンラインストアの各ページに表示されます。

Debut独自のセクションの選択、およびビジネスに適したカスタマイズ方法を詳しく知ることができます。

Debutには、以下の静的セクションが含まれます。

• ヘッダー
• フッター
• 商品ページ
• コレクションページ
• コレクションリストのページ
• ブログページ
• 投稿
• カートページ

動的セクション

動的セクションを追加、並べ替え、あるいは削除して、ホームページのレイアウトをカスタマイズすることができます。各テーマには、選択可能な固有の動的セクションがあります。

Debutには、以下の動的セクションが含まれます。

• ブログ記事
• コレクションリスト
• 特集コレクション
• ギャラリー
• テキスト付き画像
• テキストオーバーレイ付き画像
• ロゴリスト
• スライドショー
• 特集商品
• ニュースレター
• マップ
• リッチテキスト
• お客様の声
• 画像付きテキスト列
• ビデオ
• コンテンツをカスタムする

ヘッダー

ヘッダーセクションでは、ストアの各ページの上部に表示されるコンテンツを編集できます。ロゴ画像を追加したり、表示するメニューを選択したり、告知メッセージを作成したりすることができます。

ヘッダーセクションをカスタマイズするには

デスクトップ

1. 管理画面から [オンラインストア] > [テーマ] の順に移動します。

iPhone

1. Shopifyアプリで [ストア] をタップします。
2. [販売チャネル] セクションで、[オンラインストア] をタップします。
3. [テーマを管理する] をタップします。

Android

1. Shopifyアプリで [ストア] をタップします。
2. [販売チャネル] セクションで、[オンラインストア] をタップします。
3. [テーマを管理する] をタップします。

1. Debutのセクションの隣にある [カスタマイズする] をクリックします。

2. [セクション] をクリックします。

3. [ヘッダー] をクリックします。

4. ロゴの配置を設定するには、ロゴアラインメントエリアで、[左揃え] または [中央揃え] を選択します。ロゴ画像を追加しない場合、代わりにストア名がテキストで表示されます。管理画面の一般設定ページで、ストア名を変更できます。

5. ロゴを追加するには、ロゴ画像エリアで [画像を選択する] をクリックします。コンピューターから画像をアップロードするには、[アップロード] をクリックします。Burstから無料のストック画像を使用するには、[無料の画像] をクリックします。

6. ロゴのサイズを変更するには、ロゴの幅をカスタムするスライダーを希望の幅に調整します。ロゴの幅を調整してもロゴ画像は歪みません。

7. ヘッダーに表示するメニューを選択するには、メニューエリアで [変更] をクリックします。既存のメニューを選択するか、[メニューを作成する] をクリックして新しいメニューを作成します。ヘッダーにメニューを表示したくない場合は、[削除] をクリックします。

8. ページの上部に告知メッセージを表示するには、次の手順を実行します。

9. 告知バーエリアで、[告知を表示する] にチェックを入れます。

10. ホームページのみで告知を表示するには、[ホームページのみ] をオンにします。それ以外の場合は、ストアの各ページに告知が表示されます。

11. 告知のテキストをテキストフィールドに入力します。

12. リンクフィールドにURLを入力し、告知にリンクを追加します。

13. 告知バーの背景色を変更するには、バーの色見本をクリックして色を選択します。

14. 告知のテキストの配色を変更するには、テキストの色見本をクリックして配色を選択します。

15. [保存] をクリックします。

フッター

テーマのフッターは、ストアの各ページの下部に表示されるセクションです。 以下の機能をフッターに追加できます。

• 決済アイコン
• クイックリンク
• ニュースレターの登録
• あなたのビジネスに関する情報を含むテキストセクション
• SNSのアイコン
• 言語セレクター
• 通貨セレクター

決済アイコンを追加する

フッターには、対応している決済方法のアイコンを表示することができます。このエリアには、管理画面の決済設定セクションで有効にした決済サービスに関連付けられているアイコンが表示されます。

デスクトップ

1. 管理画面から [オンラインストア] > [テーマ] の順に移動します。

iPhone

1. Shopifyアプリで [ストア] をタップします。
2. [販売チャネル] セクションで、[オンラインストア] をタップします。
3. [テーマを管理する] をタップします。

Android

1. Shopifyアプリで [ストア] をタップします。
2. [販売チャネル] セクションで、[オンラインストア] をタップします。
3. [テーマを管理する] をタップします。

1. Debutのセクションの隣にある [カスタマイズする] をクリックします。

2. [セクション] をクリックします。

3. [フッター] をクリックします。

4. [決済アイコンを表示する] にチェックを入れます。

5. [保存] をクリックします。

メニュー、ニュースレターの登録、またはテキストを追加する

<div class="section-tag-block">
  <div class="sections-menu"><ul class="in-page-menu in-page-menu--horizontal"><li class="js-is-active"><a href="#" class="desktop marketing-button marketing-button--small">デスクトップ</a></li><li class=""><a href="#" class="iphone marketing-button marketing-button--small">iPhone</a></li><li class=""><a href="#" class="android marketing-button marketing-button--small">Android</a></li></ul></div><div class="desktop active changeable-content"><ol>
<li>管理画面から <strong>[オンラインストア]</strong> &gt; <strong>[テーマ]</strong> の順に移動します。
</li></ol></div><div class="iphone changeable-content"><ol>
<li><a href="https://www.shopify.com/install/detect">Shopifyアプリ</a>で <strong>[ストア]</strong> をタップします。
</li><li><strong>[販売チャネル]</strong> セクションで、<strong>[オンラインストア]</strong> をタップします。
</li><li><strong>[テーマを管理する]</strong> をタップします。
</li></ol></div><div class="android changeable-content"><ol>
<li><a href="https://www.shopify.com/install/detect">Shopifyアプリ</a>で <strong>[ストア]</strong> をタップします。
</li><li><strong>[販売チャネル]</strong> セクションで、<strong>[オンラインストア]</strong> をタップします。
</li><li><strong>[テーマを管理する]</strong> をタップします。
</li></ol></div>
</div>



1. **Debutのセクション**の隣にある **[カスタマイズする]** をクリックします。

1. [セクション] をクリックします。

2. [フッター] をクリックします。

3. コンテンツエリアの [コンテンツを追加する] をクリックして、コンテンツブロックを追加します。次の選択肢からブロックの種類を選択します。

- メニュー - ニュースレター - テキスト

最大4つのコンテンツブロックを追加できます。

コンテンツブロックを移動するには、[⋮⋮] アイコンをクリックしてブロックを別の場所にドラッグします。

コンテンツブロックを削除するには、ブロックをクリックしてから [コンテンツを削除] をクリックします。

コンテンツブロックをカスタマイズするには、ブロックをクリックしてから設定を編集します。

1. [保存] をクリックします。

SNSのアイコンを追加する

<div class="section-tag-block">
  <div class="sections-menu"><ul class="in-page-menu in-page-menu--horizontal"><li class="js-is-active"><a href="#" class="desktop marketing-button marketing-button--small">デスクトップ</a></li><li class=""><a href="#" class="iphone marketing-button marketing-button--small">iPhone</a></li><li class=""><a href="#" class="android marketing-button marketing-button--small">Android</a></li></ul></div><div class="desktop active changeable-content"><ol>
<li>管理画面から <strong>[オンラインストア]</strong> &gt; <strong>[テーマ]</strong> の順に移動します。
</li></ol></div><div class="iphone changeable-content"><ol>
<li><a href="https://www.shopify.com/install/detect">Shopifyアプリ</a>で <strong>[ストア]</strong> をタップします。
</li><li><strong>[販売チャネル]</strong> セクションで、<strong>[オンラインストア]</strong> をタップします。
</li><li><strong>[テーマを管理する]</strong> をタップします。
</li></ol></div><div class="android changeable-content"><ol>
<li><a href="https://www.shopify.com/install/detect">Shopifyアプリ</a>で <strong>[ストア]</strong> をタップします。
</li><li><strong>[販売チャネル]</strong> セクションで、<strong>[オンラインストア]</strong> をタップします。
</li><li><strong>[テーマを管理する]</strong> をタップします。
</li></ol></div>
</div>



1. **Debutのセクション**の隣にある **[カスタマイズする]** をクリックします。

1. [セクション] をクリックします。

2. [フッター] をクリックします。

3. [テーマ設定] セクションをクリックします。

4. 関連するSNSフィールドに、プロフィールのURLを入力します。

5. [保存] をクリックします。

言語セレクターを追加する

複数のストアの言語を有効にしている場合にのみ、言語セレクターを追加する必要があります。

デスクトップ

1. 管理画面から [オンラインストア] > [テーマ] の順に移動します。

iPhone

1. Shopifyアプリで [ストア] をタップします。
2. [販売チャネル] セクションで、[オンラインストア] をタップします。
3. [テーマを管理する] をタップします。

Android

1. Shopifyアプリで [ストア] をタップします。
2. [販売チャネル] セクションで、[オンラインストア] をタップします。
3. [テーマを管理する] をタップします。

1. Debutのセクションの隣にある [カスタマイズする] をクリックします。

2. [セクション] をクリックします。

3. [フッター] をクリックします。

4. [言語セレクター] で、[言語セレクターを表示する] を選択します。

5. [保存] をクリックします。

通貨セレクターを追加する

複数の通貨を有効にしている場合にのみ、通貨セレクターを追加する必要があります。

デスクトップ

1. 管理画面から [オンラインストア] > [テーマ] の順に移動します。

iPhone

1. Shopifyアプリで [ストア] をタップします。
2. [販売チャネル] セクションで、[オンラインストア] をタップします。
3. [テーマを管理する] をタップします。

Android

1. Shopifyアプリで [ストア] をタップします。
2. [販売チャネル] セクションで、[オンラインストア] をタップします。
3. [テーマを管理する] をタップします。

1. Debutのセクションの隣にある [カスタマイズする] をクリックします。

2. [セクション] をクリックします。

3. [フッター] をクリックします。

4. [通貨セレクター] で、[通貨セレクターを表示する] を選択します。

商品ページ

商品ページセクションでは、以下の要素を追加したり削除したりできます。

• 数量セレクター
• バリエーションのラベル
• 商品のブランド名または販売元
• 画像ズーム
• 動的チェックアウトボタン
• ソーシャル共有ボタン
• 商品の推奨

さらに画像のサイズを設定することもできます。

商品ページの設定を編集する

1. トップバーのドロップダウンメニューから [商品ページ] を選択します。

2. [セクション] をクリックします。

3. [商品ページ] をクリックします。

4. 画像サイズを設定するには、画像サイズドロップダウンメニューから画像サイズを選択します。

5. 数量セレクターを表示するには、[数量セレクターを表示する] にチェックを入れます。

6. 「サイズ」や「色」などのバリエーションのラベルを表示するには、[バリエーションのラベルを表示する] にチェックを入れます。表示されるバリエーションのラベルは、その商品のバリエーションのオプション名に基づいて決まります。

7. 商品のブランド名または販売元を表示するには、[販売元を表示する] にチェックを入れます。ブランド名や販売元を表示するには、商品に販売元を追加する必要があります。

8. お客様が商品画像にマウスポインターを重ねることによりズームインできるようにするには、[画像ズームを有効にする] にチェックを入れます。

9. 動的チェックアウトボタンを表示するには、[動的チェックアウトボタンを表示する] をオンにします。

10. ソーシャルメディアでの共有ボタンを表示するには、[ソーシャル共有ボタンを表示する] にチェックを入れます。

11. [保存] をクリックします。

商品の推奨を追加または削除する

お客様が興味のある可能性がある他の商品を見つけやすくするために、商品ページにおすすめ商品を表示できます。

1. トップバーのドロップダウンメニューから [商品ページ] を選択します。

2. [商品の推奨] をクリックします。

3. 商品ページで商品のおすすめを表示または非表示にするには、[動的推奨を表示する] チェックボックスを使用します。

4. オプション: おすすめ商品の上に表示されるタイトルを変更するには、[見出し] フィールドに新しいタイトルを入力します。

5. オプション: 商品説明で販売元を表示または非表示にするには、[販売元を表示する] チェックボックスを使用します。

6. [保存] をクリックします。

コレクションページ

顧客がコレクション内の商品を絞り込んだり並べ替えたりできるよう、コレクションページを設定できます。グリッドまたはリストのコレクションレイアウトを選択し、表示する商品の数を選択することができます。

コレクションページのレイアウトを設定するには

1. テーマエディタのコレクションページに移動します。

2. [セクション] タブをクリックします。

3. [コレクションページ] をクリックします。

4. レイアウトリストから、グリッドまたはリストを選択します。

5. グリッドスタイルを選択する場合、1行あたりの商品数と1ページあたりの行数をリストから選択します。

6. ページ上部にコレクション画像を表示する場合は、[コレクションの画像を表示する] にチェックを入れます。

7. 商品のブランド名や販売元を表示する場合、[商品の販売元を表示する] にチェックを入れます。

8. 並び替えメニューを表示する場合、[並び替えを有効にする] をクリックします。

9. 顧客が商品タグごとにコレクションを絞り込めるよう、[タグでの絞り込みを有効にする] にチェックを入れます。

10. [保存] をクリックします。

コレクションリストのページ

コレクションリストのページでは、商品コレクションすべてがグリッド形式で表示されます。顧客は、コレクションリストのページでコレクション全体を閲覧し、希望するコレクションを見つけることができます。Debutでは、コレクションリストのページは最上位のリンクで、ヘッダーメニューに配置されています。

メモ

最上位のコレクションリストのメニュー名は変更可能です。この例では、メニュー名は「カタログ」となっています。

グリッド形式でコレクションすべてのサムネイルを表示することや、コレクションの一部を選択して表示することができます。ページのコレクションを並び替えることも可能です。

コレクションリストのページレイアウトを設定するには、以下の手順を実行します。

1. 最上位のコレクションメニュー項目をクリックして、コレクションリストのページに移動します。

2. [セクション] タブをクリックします。

3. [コレクションリストのページ] をクリックします。

4. 以下のいずれかの操作を行います。

   1. グリッド形式でコレクションすべてのサムネイルを表示するには、すべてを選択します。
   2. コレクションリストのページで特定のコレクションを1つ表示するには、選択項目のみを選択します。

5. 1つ前のステップで すべてを選択した場合は、以下の手順を実行します。

   1. コレクションの並び替え方法リストから、並び替えオプションを選択します。
   2. 行あたりのコレクション数リストから、1行あたりのコレクションの数を選択します。

6. [保存] をクリックします。

ブログページ

Debutでは、ブログ記事をリスト形式またはグリッド形式で表示できます。ブログ記事執筆者が複数の場合、各ブログ記事に執筆者名を表示することが可能です。ブログ記事を公開した日付を表示することもできます。

ヒント: ストアに掲載するブログを作成する、または既存のブログに投稿を追加する場合、管理画面から [オンラインストア] > [ブログ記事] に移動します。オンラインストアのブログ作成方法の詳細は、ブログをご覧ください。

1. テーマエディタのプレビューエリアにあるブログページに移動します。

2. [セクション] をクリックします。

3. [ブログページ] をクリックします。

4. レイアウトリストで、ブログ記事の表示形式をリストまたはグリッドから選択します。

5. [執筆者を表示する] にチェックを入れると、執筆者名を表示できます。

6. [日付を表示する] にチェックを入れると、ブログ記事の公開日を表示できます。

7. [保存] をクリックします。

カートページ

カートページセクションで、次の設定を有効にすることができます。

• カートメモ
• カートの自動更新

カートメモを追加する

カートページで顧客が注文にメモを追加できるようにすることができます。

1. トップバーのドロップダウンメニューから [カート] を選択します。

2. [セクション] タブをクリックします。

3. [カートページ] をクリックします。

4. [カートメモを有効にする] にチェックを入れます。

5. [保存] をクリックします。

自動カートの更新を有効にする

お客様が注文を変更するとすぐに、カートに更新された情報を表示することができます。たとえば、お客様がカート内のアイテムの数量を変更すると、小計価格を更新することができます。カートの自動更新を有効にするには、次のことを行います。

1. トップバーのドロップダウンメニューから [カート] を選択します。

2. [セクション] タブをクリックします。

3. [カートページ] をクリックします。

4. [カートの自動更新を有効にする] をチェックします。

5. [保存] をクリックします。

特集コレクション

ホームページにコレクションを特集することができます。コレクションの特集は、販売促進や新作コレクションの宣伝に役立ちます。

Debutでは、[すべて表示] ボタンの追加が可能で、お客様はコレクションを一括して確認することができます。また、各商品画像の下に販売元名を表示することが可能です。

ホームページでコレクションを特集するには

1. [セクション] タブをクリックします。

2. [特集コレクション] セクションをクリックします。

3. コレクションの上に表示されるテキストを変更する場合、[見出し] フィールドにテキストを入力します。

4. コレクションリストから、表示するコレクションを選択します。選択したコレクションに商品を追加または削除するには、[コレクションを編集] リンクをクリックし、新しいタブでコレクションページを開きます。

5. 行ごとの商品リストから、各行に表示する商品数を選択します。

6. 行リストから、表示する商品の行数を選択します。

7. 各商品画像の下に販売元またはブランド名を表示する場合は、[商品の販売元を表示する] にチェックを入れます。

8. お客様がコレクションのすべての商品を閲覧できるようにするに、[「すべて表示」ボタンを表示する] にチェックを入れます。

9. [保存] をクリックします。

テキスト付き画像

Debutでは画像を追加し、画像の左右いずれかにテキストを表示することができます。ストアのページにリンクするボタンを追加することも可能です。

通常ではテキスト付き画像セクションを使用して商品またはコレクションを宣伝するか、ウェブサイトのトラフィックをブログページに誘導します。

テキスト付き画像セクションをホームページに追加するには

1. [セクション] タブをクリックします。

2. [テキスト付き画像] セクションをクリックします。

3. 画像エリアで [画像を選択する] をクリックのうえ、次のいずれかの操作を行います。

- To select an image you have already uploaded to your Shopify admin, click the **Library** tab.
- To select a stock image from [Shopify's Burst stock image collection](https://burst.shopify.com/), click the **Free images** tab. From here you can enter a search term, or browse the image categories.
- To select an image from your local computer, click the **Library** tab, and then click the plus button.

1. レイアウトリストで、テキストの左右どちらに画像を表示するか選択します。

2. 見出しフィールドに、このセクションの新しいタイトルを入力します。

3. ヘッダーの下に表示するテキストを、テキストフィールドに入力します。

4. ボタンに表示するテキストを、[ボタンのラベル] フィールドに入力します。

5. [ボタンのリンク] フィールドで、ボタンをリンクさせるストアのページを選択します。

6. [保存] をクリックします。

テキストオーバーレイ付き画像

ホームページにカスタムテキストオーバーレイ付きの大きな画像を特集することができます。

テキスト付き画像セクションには、以下の設定が含まれます。

• 画像 - セクションに追加する画像を選択します。
• 画像アラインメント - 画像を表示するページの横側を設定します。
• レイアウト - セクションの幅を設定します。
• セクションの高さ - セクションの高さを設定します。画像がトリミングされないようにするには、[画像に対応] を選択し、画像の高さに基づいてセクションの高さを設定します。
• テキストサイズ - テキストのサイズを設定します。
• 見出し - セクションに見出しを追加します。
• テキスト - セクションにテキストを追加します。テキストオーバーレイ付き画像セクションの名前は、入力した見出しに自動的に変更されます。
• ボタンのラベル - テキストラベル付きボタンをセクションに追加します。
  
• ボタンのリンク - ボタンを別のページまたはウェブサイトにリンクさせます。

テキスト付き画像をホームページに追加する

デスクトップ

1. 管理画面から [オンラインストア] > [テーマ] の順に移動します。

iPhone

1. Shopifyアプリで [ストア] をタップします。
2. [販売チャネル] セクションで、[オンラインストア] をタップします。
3. [テーマを管理する] をタップします。

Android

1. Shopifyアプリで [ストア] をタップします。
2. [販売チャネル] セクションで、[オンラインストア] をタップします。
3. [テーマを管理する] をタップします。

1. Debutのセクションの隣にある [カスタマイズする] をクリックします。

2. [セクションを追加] > [テキスト付き画像] > [追加] の順にクリックします。

3. 設定でテキストオーバーレイ付き画像セクションをカスタマイズします。

4. [保存] をクリックします。

ニュースレター

ホームページにニュースレターの登録を追加することができます。これにより、メールマーケティングキャンペーンのお客様のメールアドレスを収集できます。メールマーケティングについて詳しくは、Shopifyブログをご覧ください。

ホームページにニュースレターの登録を追加するには、次のとおりにします。

デスクトップ

1. 管理画面から [オンラインストア] > [テーマ] の順に移動します。

iPhone

1. Shopifyアプリで [ストア] をタップします。
2. [販売チャネル] セクションで、[オンラインストア] をタップします。
3. [テーマを管理する] をタップします。

Android

1. Shopifyアプリで [ストア] をタップします。
2. [販売チャネル] セクションで、[オンラインストア] をタップします。
3. [テーマを管理する] をタップします。

1. Debutのセクションの隣にある [カスタマイズする] をクリックします。

2. [セクション] をクリックします。

3. [セクションを追加] > [ニュースレター] をクリックします。

4. 見出しフィールドに、ニュースレターの登録の見出しを入力します。デフォルトの見出しは「ストアからのお知らせを受け取る」です。

5. 見出しフィールドにニュースレターの登録の小見出しを入力します。

6. [保存] をクリックします。

ビデオ

YouTubeのビデオをホームページに追加できます。ビデオによってお客様を引き込み、ビジネスへの関心を高めることができます。

ヒント: カスタムコンテンツセクションでVimeoのビデオをホームページに追加することができます。

ビデオセクションには、以下の設定が含まれます。

• ビデオの高さ - ビデオの高さを設定します。
• テキストサイズ - ビデオにテキストを追加します。ビデオのスタイルを再生ボタン付き画像に設定した場合、ビデオの再生中はテキストが削除されます。
• オーバーレイを表示する - ビデオに色のレイヤーを追加し、テキストを読みやすくできます。ビデオのスタイルを再生ボタン付き画像に設定した場合、ビデオの再生中はオーバーレイが削除されます。
• スタイル - ビデオのスタイルを設定します。バックグラウンドビデオスタイルはデスクトップのみで利用可能です。お客様がタブレットやモバイルデバイスを使用してストアにアクセスした場合、常に再生ボタン付き画像スタイルで表示されます。
• 見出し - ビデオに見出しを追加します。
• ビデオリンク - ビデオのYouTube URLを追加します。
• 表紙画像 - ビデオに表紙画像を追加します。ビデオの再生中は、表紙画像は非表示になります。
• 画像アラインメント - 最も重要な部分が常に見えるように表紙画像を配置します。

ホームページにビデオを追加する

デスクトップ

1. 管理画面から [オンラインストア] > [テーマ] の順に移動します。

iPhone

1. Shopifyアプリで [ストア] をタップします。
2. [販売チャネル] セクションで、[オンラインストア] をタップします。
3. [テーマを管理する] をタップします。

Android

1. Shopifyアプリで [ストア] をタップします。
2. [販売チャネル] セクションで、[オンラインストア] をタップします。
3. [テーマを管理する] をタップします。

1. Debutのセクションの隣にある [カスタマイズする] をクリックします。

2. [セクションを追加] > [ビデオ] をクリックします。

3. 設定でビデオセクションをカスタマイズします。

4. [保存] をクリックします。

スライドショー

ホームページに画像スライドショーを追加できます。スライドショーセクションでは、スライドの高さを設定し、テキストとボタンを追加し、スライドショーを自動再生するかどうかを選択できます。

スライドショー画像のトリミングや推奨される画像サイズの詳細情報については、下のガイドラインを参照してください。

スライドショーを作成する

デスクトップ

1. 管理画面から [オンラインストア] > [テーマ] の順に移動します。

iPhone

1. Shopifyアプリで [ストア] をタップします。
2. [販売チャネル] セクションで、[オンラインストア] をタップします。
3. [テーマを管理する] をタップします。

Android

1. Shopifyアプリで [ストア] をタップします。
2. [販売チャネル] セクションで、[オンラインストア] をタップします。
3. [テーマを管理する] をタップします。

1. Debutのセクションの隣にある [カスタマイズする] をクリックします。

2. [セクション] をクリックします。

3. [スライドショー] をクリックします。

4. [スライド高さ] ドロップダウンメニューでスライドの高さを設定します。

   詳しくはスライドの高さがスライドショーに与える影響をご覧ください。

5. [テキストサイズ] ドロップダウンメニューで見出しと小見出しのサイズを設定します。

6. [テキストアラインメント] ドロップダウンメニューでスライド上のテキストの位置を設定します。

7. オプション: [オーバーレイを表示する] をチェックします。画像オーバーレイは、画像とその画像上に配置された任意のテキストとの間の色の層のことです。オーバーレイは、色のコントラストを際立たせ、読みやすさを向上させます。オーバーレイの色と不透明度は、色の設定で設定できます。

8. オプション: [スライドの自動切り替え] をチェックすると、自動的にスライドショーが再生されます。[スライドを変更する間隔] スライダーを使用して、各スライドがどのくらいの時間表示されるかを選択します。

9. 画像スライドを追加するには、次の手順を実行します。

   1. コンテンツエリアで [画像スライドを追加する] をクリックします。
   2. 画像で [画像を選択する] をクリックします。コンピューターから画像をアップロードするには、[アップロード] をクリックします。Burstから無料のストック画像を使用するには、[無料の画像] をクリックします。
   3. スライドショーでどのように画像の位置を調整するかを選択するには [画像の位置] ドロップダウンメニューで位置を選択します。画像の位置については詳しく知るには、以下のガイドラインをご覧ください。
   4. 画像スライドにテキストを追加するには [見出し] フィールド [小見出し] フィールド、またはその両方にテキストを入力します。
   5. [テキストのボタンのラベル] フィールドにテキストを入力して、画像スライドにボタンを追加します。[ボタンのリンク] フィールドで、ボタンをリンクするオンラインストアの部分を選択します。

10. [保存] をクリックします。

スライドショーのガイドライン

以下の設定と推奨画像を使用して、オンラインストアでのスライドショーの表示方法をコントロールできます。スライドの表示方法は以下の要素によって決まります。

• 画像の寸法
• 画像の位置設定
• スライドの高さ設定
• 画像の幅と高さの比

画面のサイズと形状が異なるため、スライド表示がモバイル端末とデスクトップ端末で異なる場合があります。

推奨画像サイズ

スライドショー画像で推奨される寸法は、スライドの高さ設定によって異なります。次のガイドラインを使用してください。

設定時の画像サイズの推奨事項

スライドの高さ設定	推奨される幅	推奨される高さ
最初の画像に対応	1200ピクセル	600ピクセル
小	1200ピクセル	475ピクセル
中	1200ピクセル	489ピクセル
大	1200ピクセル	775ピクセル

スライドの高さ設定を表示または変更するには、スライドショーの作成手順のステップ5を参照します。

画像のトリミング

画像のトリミングをコントロールする、あるいはすべてトリミングされてしまうことを回避するためのステップを実行できます。

画像のトリミング方法をコントロールする

次の状況では、一部の画面サイズで画像のトリミングが発生することがあります。

• 画像の幅と高さの比が同じではありません。
• スライドの高さが [小] [中] または [大] に設定されています。
• スライドの高さは最初の画像に適応するに設定され、画像は端末の画面やブラウザーのウィンドウよりも高くなります。

[画像の位置] の設定を使用して、画像のトリミングをコントロールできます。

各画像について、トリミングが発生したときに表示する部分を選択することができます。次の例では、一部の画面サイズで同じ画像がどのようにトリミングされるかを確認できます。左側のスライドでは画像の位置が [中心] に設定されています。右側のスライドでは画像の位置が [左上] に設定されています。

画像の位置設定を表示または変更するには、スライドショーの作成手順のステップ10を参照します。

画像のトリミングを避ける

スライドショーで画像のトリミングを避けるには、次のステップを実行してください。

• スライドの高さを最初の画像に対応に設定します。
• 幅が長さに対して2倍の画像を使用してください。このような画像の幅と高さの比は2:1です。推奨される寸法は1200ピクセルx600ピクセルです。
• すべてのスライドの幅と高さの比が同じであることを確認してください。スライドの比はピクセル単位の寸法よりも重要です。

次の例では、デスクトップとモバイルデバイスに2:1の比のスライドショー画像が表示されます。

スライドの高さ

スライドショーセクションの幅は、常にブラウザーウィンドウの100%です。スライドの高さはその幅に比例します。画面サイズが異なるため、スライドの幅と高さは端末によって異なります。スライドの高さは、スライドの高さ設定の影響を受けます。

最初の画像に対応のスライドの高さ設定を使用して、スライドショーの高さを最初の画像の高さに合わせることができます。この設定は、すべての画像が同じサイズであるか、幅と高さの比が同じ場合に最適です。画像のサイズや比が異なる場合は、スライドの順序を変更して異なる高さでどのように表示されるかを確認できます。

次の例では、最短のスライドが最初に配置されます。

次の例では、より大きなスライドが最初に配置されます。

代わりに [小]、[中]、[大] のいずれかの高さの設定を使用する場合は、スライドの推奨画像サイズを参照してください。

画像比

スライドショーで画像のトリミングを避けたい場合は、画像の幅と高さの比を2:1にすることをおすすめします。

デスクトップディスプレイではなく、モバイルデバイスのトリミングによる影響を考慮する場合、正方形の画像、または幅よりも高さのある画像を使用してください。次のスライドの例は、幅と高さの比率が1:1の正方形の画像を表示しています。

次のスライドの例は、幅と高さの比率が2:3のポートレート画像を表示しています。