バージョン7.1では、ページ セクションに背景画像を追加してバナー画像を作成します。これらの画像は、特にモバイルで、常にある程度トリミングされます。バナーをカスタマイズするには、以下の方法があります。

• バナーにオーバーレイされるコンテンツの量を変更します。コンテンツの量が多いとバナーの高さが高くなり、画像が余計にトリミングされます。
• バナーのサイズを変更します。
• 焦点を使用して、画像の中心を変更する。

バナーがモバイルでどのように表示されるかについては、「サイトはモバイル端末でどのように表示されますか？」をご参照ください。

ページのバナー

いくつかの例外を除き、ページ バナーは、特にモバイルで、常にある程度トリミングされます。トリミングの量は、バナーの高さとブラウザーの幅によって異なります。

ヒント:

• サイトのバナーのスタイルを設定し、その高さを設定する方法をご覧ください。
• 焦点を使用して、画像の中心を調整します。

サイト全体のバナー

サイト全体のバナー画像（サイト スタイル内に追加）に追加された画像は、繰り返し表示したり、バナーの高さまたは幅で表示したり、コンテナーを塗りつぶして表示したりできます。

ヒント:

• サイト スタイルを使用して、バナー画像の表示方法を設定します。
• モバイルとコンピューターの両方で見栄えのする微調整オプションを選択します。

セクションの背景画像または動画がトリミングされて表示される場合は、セクションの高さまたは幅を変更すると、画像または動画の表示されるエリアが広くなります。

背景画像は繰り返し表示したり、ブラウザーの高さまたは幅に合わせて表示したり、ブラウザー画面全体に表示したりできます。

ヒント:

• サイト スタイルを使用して、バナー画像の表示方法を選択します。
• モバイルでの表示に関するトラブルシューティングのヒントをご参照ください。
• 画像の最長辺が2500ピクセルを超えると、モバイル端末で問題が発生する可能性があります。

ギャラリー セクションでは、画像を直接アップロードして管理し、[ギャラリー] タブを使用して画像の表示方法を制御します。

詳細については、「ギャラリー セクション」をご参照ください。

ギャラリー ページに画像がどのように表示されるかは、テンプレートによって異なります。ギャラリー ページのデザインに合わせて画像をトリミングする方法については、テンプレートのガイドをご参照ください。

ポートフォリオ セクションにカーソルを合わせて画像を追加し、[ギャラリー] タブを使用して表示方法を制御します。

詳細については、「ポートフォリオ ページ」をご参照ください。

インデックス ページに画像がどのように表示されるかは、テンプレートによって異なります。詳細については、テンプレートのガイドをご参照ください。

ストアに画像をアップロードしたら、ストア セクションの微調整オプションを使用してスタイルを設定します。ページの編集中に、ストア セクションにカーソルを合わせて鉛筆アイコンをクリックすると、間隔、列、縦横比、テキストの配置を変更できます。さまざまなスタイル微調整オプションを試して、商品画像の表示方法を設定してください。ストア ページのカスタマイズの詳細については、「コレクション ページのセクション」をご参照ください。

商品画像の縦横比

ストア ページの商品画像を自動トリミングすることはできません。商品画像の縦横比は同じにすることをおすすめします。たとえば、サイトに画像をアップロードする前に、すべての商品画像を横長または縦長に統一するようにします。

商品画像の縦横比が異なる場合は、組み込みの画像エディターまたはサードパーティーのツールを使用して、画像をトリミングしてください。商品ブロックを使用して商品のカスタム レイアウトを作成することもできます。

ランディング ページで商品画像がどのようにトリミングされるかは、テンプレートのストア ページのタイプによって異なります。

クラシック

クラシック ストア ページの場合:

• サイト スタイルで、[商品画像の自動トリミング] の微調整オプションを使用して、画像を同じ形状にトリミングするか、元の形状で表示するかを選択します。
• トリミングする場合は、[商品アイテムのサイズ] の微調整オプションを使用して形状を設定します。
• 焦点を使用して、画像の中心を調整します。
• トリミングしない場合は、[商品オーバーレイの色] の微調整オプションを使用して、画像の背後に表示する色を選択します。
• さらに詳しいヘルプが必要な場合は、「ストア ページのスタイル設定」をご参照ください。

アドバンスド

高度なストア ページの場合:

• 画像は常に同じ形状にトリミングされます。これにより、ページに統一感のある見た目と雰囲気をもたらすことができます。
• ストア ページのすべての画像の形状を設定するには、サイト スタイルの [商品: レイアウト] セクションにある [画像の縦横比] の微調整オプションを使用します。
• 焦点を使用して、画像の中心を調整します。
• さらに詳しいヘルプが必要な場合は、「ストア ページのスタイル設定」をご参照ください。

ユニーク

いずれかの固有のストア ページのサムネイル スタイルについては、次のリンクにアクセスしてください。

• Galapagos
• Supply