バージョン7.0でサイト全体の背景画像を追加する

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

最終更新日 2024年12月31日

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

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

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

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

この機能へのアクセス

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

ベスト プラクテ⁠ィス

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

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

画像を追加する

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

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

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

background-image-tweak.png

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

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

サイズ
  • 自動 - 画像は元の幅と高さを保持します⁠。これは⁠、小さな画像を繰り返したい場合に適しています⁠。
  • カバ⁠ー - 背景領域を完全に覆うように⁠、画像を必要なだけ拡大します (⁠フルブリ⁠ード⁠)⁠。その結果⁠、画像の一部が表示されない場合があります⁠。画像は⁠、ペ⁠ージのコンテンツの高さによ⁠って⁠、各ペ⁠ージで異な⁠って見える場合があります⁠。
  • 含む - 画像の最も長い端 (⁠幅または高さ⁠) がブラウザ⁠ー内に収まるように画像を拡大または縮小します⁠。

[⁠自動⁠] または [⁠含む⁠] の場合⁠、サイトの背景色が画像の後ろに表示されることがあります⁠。これを調整するには⁠、[⁠繰り返し⁠] 微調整オプシ⁠ョンを使用します⁠。

位置

背景画像の位置を設定します⁠。

  • 左上⁠、中央上⁠、右上
  • 中央左⁠、中央中⁠、中央右
  • 左下⁠、中央下⁠、右下
繰り返し

[⁠サイズ⁠] が [⁠自動⁠] または [⁠含む⁠] に設定されていることを確認します⁠。

    • 繰り返しなし - 画像を1回だけ表示します⁠。
    • 繰り返し - 画像を繰り返して背景全体を覆います⁠。
    • 繰り返しX - 画像を横軸方向にのみ繰り返します⁠。
    • 繰り返しY - 画像を縦軸方向にのみ繰り返します⁠。

[⁠繰り返しなし⁠]⁠、[⁠繰り返しX⁠]⁠、[⁠繰り返しY⁠] の場合は⁠、[⁠位置⁠] オプシ⁠ョンを使用して⁠、画像が表示される場所をさらに調整します⁠。

位置を固定する

オンにすると⁠、スクロ⁠ールするコンテンツの後ろで画像の位置が静止します⁠。オフにすると⁠、ペ⁠ージと一緒に上下にスクロ⁠ールします⁠。

iOSなどの多くのモバイル ブラウザ⁠ーでは⁠、この機能は効果がなく⁠、画像はペ⁠ージとともにスクロ⁠ールします⁠。

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

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

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

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

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

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

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

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

トラブルシ⁠ュ⁠ーテ⁠ィング

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

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

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

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

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

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

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

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

備考

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

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

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

モバイルでの表示

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

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

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

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

  • サイズ⁠: カバ⁠ー
  • 固定位置
  • [⁠キ⁠ャンバスの背景⁠] の色を部分的に不透明に設定する
Montaukテンプレートの背景画像の例。

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

  • サイズ⁠: 自動
  • 繰り返し⁠: 繰り返し
Forteテンプレートの背景画像の例。

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

  • 位置⁠: 左上
  • サイズ⁠: 自動⁠、繰り返しY
  • サイトの背景色⁠: 青
Nativeテンプレートの背景画像の例。

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

Aviatorテンプレートのサイト全体およびイントロ ページ固有の背景。

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

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

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

  • 高度なカスタマイズについて⁠、コミ⁠ュニテ⁠ィからサポ⁠ートを受けられます⁠。

  • Squarespace Expertを雇う

  • 経験豊富なデザイナ⁠ーや開発者から力を借りて⁠、オンラインで目を引くサイトを構築しまし⁠ょう⁠。

バージョン7.0でサイト全体の背景画像を追加する