サイトのコンテンツの背後に画像を表示して、視覚的なインパクトを与えます。

一部のバージョン7.0サイトでは、サイト コンテンツの背後に表示する背景画像を追加して、サイトの雰囲気を作り出すのに役立つ視覚要素を作成できます。

次のテンプレート ファミリーでは、サイト全体の背景画像を追加できます。

• Adirondack
• Avenue
• Aviator - 情報ページはページ特有の背景画像もサポートしています。
• Five
• Forte
• Momentum
• Montauk
• Native

背景画像はすべてフルブリードに設定できます。その場合、ブラウザーの端から端までページが背景画像で埋め尽くされます。テンプレートがサイト全体の背景をサポートしていない場合は、ページ固有の背景を作成する方法をご覧ください。

バージョン7.1はサイト全体の背景画像をサポートしていませんが、ほとんどのページ セクションでサイトのコンテンツの背後に表示される背景画像を追加できます。

ベスト プラクティス

選択する画像の種類は個人的な好みやサイトの目標によっても異なりますが、一般的なガイドラインをいくつか示します。

• 幅1500ピクセルから2500ピクセルの画像をアップロードすることをおすすめします。背景画像がモバイルで読み込まれないなど、読み込みの問題が発生した場合は、すべての画像の最長端を1500ピクセルに減らしてみてください。これにより、画質を維持したまま読み込み速度を向上させることができます。
• フルブリードの背景画像は、多くの場合、モバイルとコンピューターとでトリミングの方法が異なります。複数の方法でトリミングできる背景画像を選択することをおすすめします。
• 一般的に、抽象的なパターン、テキストや境界線のない画像、繰り返しパターンが最も効果的です。一定程度のトリミングが常に発生しますが、これらのパターンはこのようなトリミングに対する柔軟性が高くなります。
• テンプレートを切り替えても背景画像は移行されません。

画像を追加する

サイト全体の背景を追加するには、以下の手順に従います。

1. [デザイン] パネルを開き、[サイト スタイル] をクリックします。
2. [背景画像]、[サイトの背景画像]、または [ページの背景画像] という名前の微調整オプションを探します。その微調整オプションをクリックして開きます。
3. コンピューターからファイルを追加するには、アップローダーをクリックするか、画像をアップローダーにドラッグします。[画像を検索] をクリックすると、画像の再利用や、ストック画像の追加ができます。
4. 画像のスタイルを設定してから、[保存] をクリックして変更を公開します。

Adirondackでは、この微調整オプションは次のようになります。

画像のスタイル設定とトリミング

背景画像を追加したら、画像アップローダーの下にあるオプションを使用して画像のスタイルを設定し、目に見えるトリミングやゆがみがあれば修正します。

サイズ	自動 - 画像は元の幅と高さを保持します。これは、小さな画像を繰り返したい場合に適しています。 カバー - 背景領域を完全に覆うように、画像を必要なだけ拡大します (フルブリード)。その結果、画像の一部が表示されない場合があります。画像は、ページのコンテンツの高さによって、各ページで異なって見える場合があります。 含む - 画像の最も長い端 (幅または高さ) がブラウザー内に収まるように画像を拡大または縮小します。 [自動] または [含む] の場合、サイトの背景色が画像の後ろに表示されることがあります。これを調整するには、[繰り返し] 微調整オプションを使用します。
位置	背景画像の位置を設定します。 左上、中央上、右上 中央左、中央中、中央右 左下、中央下、右下
繰り返し	[サイズ] が [自動] または [含む] に設定されていることを確認します。 繰り返しなし - 画像を1回だけ表示します。 繰り返し - 画像を繰り返して背景全体を覆います。 繰り返しX - 画像を横軸方向にのみ繰り返します。 繰り返しY - 画像を縦軸方向にのみ繰り返します。 [繰り返しなし]、[繰り返しX]、[繰り返しY] の場合は、[位置] オプションを使用して、画像が表示される場所をさらに調整します。
位置を固定する	オンにすると、スクロールするコンテンツの後ろで画像の位置が静止します。オフにすると、ページと一緒に上下にスクロールします。 iOSなどの多くのモバイル ブラウザーでは、この機能は効果がなく、画像はページとともにスクロールします。

サイトの他のエリアのスタイルを設定する

背景画像がどの程度表示されるかは、他のサイト エレメントの設定方法によって異なります。スタイル オプションと微調整オプション名はテンプレートごとに異なりますが、サイト スタイルを使用してサイトの次の領域の一部またはすべてを試してみてください。

• メイン コンテンツ エリア (「キャンバス」) の背景
• ヘッダーの背景
• フッターの背景
• サイトの幅とコンテンツの幅

以下の点に留意してください。

• 背景色を部分的に不透明にして、背景画像が透けて見えるようにすることもできます。
• 背景画像の読み込み中に、背景またはオーバーレイの色が表示される場合があります。

モバイルでサイトの外観を確認する

パソコンやモバイル端末でも同じ背景画像が表示されます。効果を確認するには、携帯電話を近くに置いておき、パソコンで変更を保存した後に携帯電話でサイトを更新します。パソコンで編集しているときにすばやくプレビューしたい場合は、端末別プレビューを使用してください。

モバイル端末では、画像は細長いブラウザー画面に適応するため、トリミングやゆがみが発生する可能性があります。トリミングを最小限に抑える方法はいくつかあります。

• 背景画像を選択する場合、画像の形状によってモバイルでの表示形式が大きく異なります。
• モバイルで適切に機能するスタイル設定については、トラブルシューティングのヒントを参照してください。

トラブルシューティング

特定のページやモバイルで背景画像がゆがむ

これは、背景画像がブラウザー ウィンドウの長さ全体にわたって引き伸ばされた場合に発生します。この傾向が特に顕著なのが、リスト ビューに設定されたブログ ページやイベント ページです。これらのページは通常、他のページより長くなっているためです。また、モバイルもコンテンツが縦方向に積み重なるため、この現象が発生しやすくなります。ページの内容が高ければ高いほど、背景はそれを完全に覆うように引き伸ばされ、拡大されて表示される。

これを修正するには、背景画像の微調整オプションを開き (上記の手順3を参照)、次のオプションのいずれか、または両方を試してください。

• [位置を固定する] をオンにする (iOSなどの一部のモバイル端末には影響しません)
• [サイズ: 含む] または [サイズ: 自動] を選択する

また、長いページやモバイル表示で最適なサイズ変更を行うバージョンを確認するために、[位置] オプションで試してみることもできます。

画像がぼやけている、またはピクセル化している

これが発生するのは、画像が背景領域を埋めるように元の寸法を超えて引き伸ばされる場合です。

フルブリード画像の場合は、ほとんどのサイトで幅1500〜2500ピクセルの画像をアップロードすることが推奨されます。

注: 長辺が2500ピクセルを超える背景画像のアップロードは推奨されません。サイト全体の背景画像は、常に元の画像サイズで読み込まれます。背景画像の幅が2500ピクセルよりも広い場合、訪問者にとって問題が発生する可能性があります。

背景画像とカスタム コード

サイトに追加したカスタム コードは、背景画像の表示に影響を与える可能性があります。背景画像に関する問題のトラブルシューティングを行う場合は、カスタム コードを一時的に無効にして、問題がコードに関連しているかどうかを確認してください。詳細については、「カスタム コードをサイトへ追加する」をご参照ください。

モバイルでの表示

スタイル微調整オプションを使用して一般的なモバイル ディスプレイの問題を修正する方法は次のとおりです。微調整オプションはモバイルとパソコンで別々にはなっていないので、これらのオプションを試して、どれが一番見栄えがよいのかを確認することをおすすめします。

• 画像が拡大されている、またはゆがんでいる - 画像を [サイズ: 含む] または [サイズ: 自動] に設定します。また、大きな画像のアップロードが必要になる場合もあります。最大サイズは長辺が2500ピクセルです。
• 背景画像のサイズがページによって異なる - 画像を [サイズ: 含む] または [サイズ: 自動] に設定します。
• 画像が中央に正しく配置されない - [位置] オプションを使用して、ページ上の画像の表示位置を調整します。
• 背景画像が表示されない - メインのコンテンツの背景色が画像を覆っている可能性があります。 透明度を調整して、背景画像が表示されるようにします (これはコンピュータの表示にも影響します)。元の画像は長辺が2500ピクセル未満であることを確認してください。大きな画像は表示されない場合があります。Aviatorファミリーの場合、[モバイル背景画像] の微調整オプションがオンになっていることを確認します。
• 画像がコンテナー全体を覆っていない - [サイズ: 自動] または [サイズ: 封入] を選択し、空白部分を覆うように画像を繰り返します。

例

背景画像の微調整オプションを試して、背景画像に最適な配置を見つけます。イメージしやすいように、以下にいくつかの例を示します。

Montaukテンプレートの例を次に示します。

• サイズ: カバー
• 固定位置
• [キャンバスの背景] の色を部分的に不透明に設定する

Forteテンプレートの例を次に示します。

• サイズ: 自動
• 繰り返し: 繰り返し

Nativeテンプレートの例を次に示します。

• 位置: 左上
• サイズ: 自動、繰り返しY
• サイトの背景色: 青

以下はAviatorテンプレートです。サイト全体の背景と情報ページ特有の背景が表示されています。

ページ固有の背景画像を追加する

1つのページだけに背景画像を作成するには、いくつかの方法があります。

• バナー - 一部のテンプレートはバナー画像をサポートしています。バナー画像はページの上部に表示され、またコンテンツ オーバーレイをサポートする場合があります。たとえば、Brineファミリーでは、イントロダクション エリアのブロックを使用してバナーにさまざまな種類のコンテンツを追加できます。
• カバー ページ - カバー ページはバージョン7.0のすべてのテンプレートで使用でき、テキスト、ボタン、見出し、ロゴ、フォームをサポートしています。カバー ページでは独自のスタイル オプションを使用してスタンドアロン ページが作成され、サイト ヘッダー、ナビゲーション、またはフッターは表示されません。そのため、ページを目立たせたい場合に最適なオプションです。
• インデックス ページ セクション - BrineおよびPacificテンプレート ファミリーでは、インデックスを使用して、レイアウト ページ セクションの背後に背景画像を追加できます。