サイトのページ セクションの背景画像を追加してカスタマイズします。

サイトの背景のスタイルを設定する方法はいくつかあります。選択肢のひとつとして、背景画像をページ セクションに追加し、それらの画像をさまざまな画像効果でカスタマイズすることがあげられます。これは、ブランドに合ったページ バナーや印象的な視覚エレメントを作成するのに最適な方法です。

このガイドでは、Squarespaceにアップロードする写真やその他の背景画像を追加およびカスタマイズする方法を説明します。すべての背景スタイル設定オプションについては、「サイトの背景のスタイル設定」をご参照ください。

このガイドはバージョン7.1用です。バージョン7.0のサイトの場合、テンプレートによっては、バナー画像と背景動画を追加して同様の効果を得ることができます。

動画を見る

始める前に

• 自動レイアウト、ポートフォリオ セクション、およびすべてのブロック セクションは、背景画像の追加をサポートしています。これらのセクションに背景動画や背景用アートを追加することもできます。
• ギャラリー セクションに背景画像を追加することはできませんが、背景色を追加したり、[スライドショー: フル] レイアウトを使用して同様の効果を得ることができます。
• ブログ、イベント、ストアの各セクションは背景コンテンツをサポートしていませんが、背景色は追加できます。
• セクションにテキストやその他のコンテンツが含まれる場合は、背景用アート上でもコンテンツが視認可能で文字が明瞭に表示されているかご確認ください。テキストの色を変更するには、そのセクションのカラー テーマのフォント微調整オプションを使用します。
• 背景画像は、セクション内のコンテンツの量と訪問者のブラウザー画面のサイズに基づいて自動的にトリミングされます。画像のトリミング方法を選択するには、画像ブロックを使用します。背景画像がモバイルでどのように表示されるかについては、「サイトはモバイル端末でどのように表示されますか？」を参照してください。

画像の書式設定のヒント

サイトにアップロードする前に、画像の書式設定を確認します。背景画像の場合は、以下のガイドラインに従ってください。

• 幅1500～2500ピクセルの画像を使用してください。
• 実際の画像ファイルではテキストを含む画像を使用しないでください。代わりに、画像の上にテキストを追加してください。
• 画像の上にテキストを追加する場合は、抽象的なパターンの画像を使用してください。
• 画像ファイルのタイプと詳細な画像の要件については、「Web用の画像の書式設定」を参照してください。

背景画像を追加する

背景画像を使用して、セクションに重なるテキストやその他のコンテンツとのコントラストを付けたり、セクションがページの上部にあるときにバナーを作成したりできます。

セクションの背景画像を追加するには、以下の手順に従います。

1. [ページ] パネルを開き、編集するセクションが含まれるページをクリックします。
2. 左上にある [編集] をクリックします。
3. セクションの鉛筆アイコンをクリックし、[背景] をクリックします。
4. [画像] をクリックしてから [+] をクリックします。ドロップダウン メニューから画像ソースを選択して画像をアップロードするか、以前にアップロードした画像を再利用するか、ストック画像を使用します。
5. [背景の幅] と [オーバーレイの不透明度] を設定します。
6. [形式」をクリックして、セクションの高さ、コンテンツの幅、およびコンテンツの配置を変更します。
7. [色] をクリックして、オーバーレイと追加したコンテンツのカラー テーマを選択します。詳細については、「色を変更する」を参照してください。画像を削除すると、オーバーレイはセクションの背景色になります。
8. [保存] をクリックして変更を保存し、そのまま編集を続けるか、[終了] をクリックしてから [保存] をクリックしてエディターを閉じます。

画像を追加した後、次のことが可能になります。

• 画像にオーバーレイするテキストやその他のコンテンツを追加する
• 画像のスタイルを設定する
• 画像効果を追加する
• 画像を編集する
• 画像の焦点を設定する
• [置換] をクリックして画像を変更する
• 画像を削除する

テキストやその他のコンテンツを追加する

背景画像の上にテキストやその他のコンテンツを追加できます。追加するテキストは画面サイズやモバイル端末に合わせて調整されるため、背景画像をバナーとして使用する場合にテキストを追加するには最適な方法です。

ヒント: サイトの上部にテキストのみのメッセージを表示したい場合は、バナーの代わりにお知らせバーを追加します。

実際の画像ファイルにテキストが含まれている背景画像の使用はおすすめしません。これには以下のような理由があります。

• コンピューターはこのテキストを読み取ることができないため、検索エンジンは検索結果用のインデックスに登録しません。
• 一部のブラウザーでは、幅に合わせて画像の形状が変わると、テキストの一部がトリミングされる場合があります。

テキストやその他のコンテンツを追加するには、以下の手順に従います。

1. 背景画像のあるページで [編集] をクリックします。
2. [ブロックの追加] または挿入箇所をクリックして、テキスト ブロックを追加します。ブロックをクリックしてテキストを追加し、[形式] ドロップダウンを使用して段落スタイルを選択します。
3. セクションにテキスト ブロックやその他のコンテンツを追加します (ボタン ブロックなど)。
4. [保存] をクリックして変更を保存し、そのまま編集を続けるか、[終了] をクリックしてから [保存] をクリックしてエディターを閉じます。

テキストのスタイル

サイトの [デザイン] パネルのスタイル設定で、背景画像でのテキストの表示方法を設定します。

• サイトのフォントを変更するには、[フォント] パネルでフォント パックと基本サイズを選択します。[スタイルの割り当て] までスクロールして、特定のテキストにスタイルを設定します。詳細については、「フォントを変更する」を参照してください。
• フォントの色を変更するには、[色] パネルでパレットとテーマを選択します。 セクション テーマを開き、鉛筆アイコンをクリックして、そのテーマ内の特定のエレメントのスタイルを設定します。詳細については、「色を変更する」を参照してください。

動画を見る

背景画像のスタイルを設定する

背景画像のスタイルを設定するには、ページ上で [編集] をクリックし、バナーのセクションにある鉛筆アイコンをクリックして、[背景] をクリックします。[背景の幅] と [オーバーレイの不透明度] を設定できます。

[背景の幅] では以下の設定ができます。

• [フルブリード] は、サイトの幅いっぱいに、ブラウザー ウィンドウの一方の端からもう一方の端まで画像を広げます。
• [はめ込み] を選択すると、画像が少しインデントされ、画像の周囲に境界線が生成されます。

画像が [はめ込み] に設定されている場合、境界線の色を設定できます。

注: 背景が透明な.pngファイルをアップロードする場合、ブラウザーでは常に画像の後ろに白い背景が表示されます。この背景色を変更するには、サイトにアップロードする前に、サードパーティーの画像編集ソフトウェアで画像を編集する必要があります。

背景画像のサイズを変更する

背景画像の高さを変更するには、以下の手順に従います。

1. ページの [編集] をクリックし、背景画像のセクションにある鉛筆アイコンをクリックします。
2. [形式] タブの [セクションの高さ] で、プリセットの高さを選択するか、[...] をクリックしてカスタムの高さを設定します。創造エディター セクションを編集している場合、セクションのグリッドの高さを変更するには、右下の青い矢印アイコンをクリックしてドラッグします。
3. [保存] をクリックして変更を保存し、そのまま編集を続けるか、[終了] をクリックしてから [保存] をクリックしてエディターを閉じます。

パソコンでもモバイル端末でも、セクションの高さは背景画像のトリミングに影響します。目的の外観になるように、さまざまな高さをテストすることをおすすめします。

クラシック エディター セクションでは、背景画像の高さはセクションのコンテンツの量によっても異なります。表示されるコンテンツを追加せずに高さを増やすには、スペース調整ブロックを追加します。

通常、背景画像はサイトの幅全体に広がりますが、背景画像の周囲に境界線が表示されるように背景画像のスタイルを設定できます。これにより、画像の幅が縮小されたように見えます。

背景画像効果を追加する

背景画像を追加した後、効果を追加して、画像の見た目をさらにスタイリッシュにすることができます。画像が常に動くようにアニメーションを追加する効果もあれば、訪問者がサイトのそのセクションをスクロールしたときにのみ表示される効果もあります。

画像効果を追加する方法は以下のとおりです。

1. セクションエディターで背景画像を追加したら、[背景] タブの [画像効果] までスクロールします。
2. メニューから効果を選択します。効果をカスタマイズするには、設定アイコンをクリックして詳細パネルを開きます。効果に加えた変更は、サイトのプレビューに表示されます。 オプションの詳細については、以下のセクションをご覧ください。
3. [保存] をクリックして変更を保存し、そのまま編集を続けるか、[終了] をクリックしてから [保存] をクリックしてエディターを閉じます。

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

• 画像効果は、WebGL (デバイスのグラフィック プロセッサーと連動するツール) をサポートするブラウザーとデバイスにのみ表示されます。ブラウザーがこのツールをサポートしているかどうか確認するには、get.webgl.orgにアクセスしてください。ブラウザーがWebGLをサポートしていない場合、セクションの背景は静的な状態で表示されます。
• 画像効果は、背景用アートや背景動画には適用されません。これは動画でモバイル用代替画像が使用されている場合でも同様です。

画像効果のスタイル

次の画像効果から選択できます。

• なし - オーバーレイの不透明度を設定する以外の効果はありません。
• 液状 - 画像に波紋のような効果を与えます。
• フィルム グレイン - アニメーションする静的オーバーレイを画像に追加します。
• パララックス - 訪問者がスクロールすると画像が動きます。
• 屈折線 - 直線のパターンをかぶせて画像を屈折させます。
• 屈折円 - 円のパターンをかぶせて像を屈折させます。

画像効果は詳細パネルでカスタマイズできます。詳細パネルを開くには、画像効果をクリックし、[設定] アイコンをクリックします。

好きなパターンが見つかるまで、オプションと設定をスクロールします。いずれかのカテゴリーをクリックしてドロップダウン メニューを開くと、さらに多くのオプションが表示されます。画像効果の種類に応じて異なるカテゴリーが表示されます。

たとえば、次の操作が可能です。

• 効果のサイズと形状を編集する。
• 液状などのモーションによる効果の速度と方向を編集する。

その他の設定は各画像効果に固有のもので、効果の中心的要素を調整するスライダーやトグルが含まれます。ランダムな設定を試してみるには、効果を選択するときにシャッフル アイコンをクリックするか、効果の詳細パネルで [ランダム化] をクリックします。

各効果をテストして、どのような効果があるか、サイトでどのように機能するかをよく理解することをおすすめします。

セクションの背景画像に [液状] 効果を適用すると、以下の例のようになります。

背景画像を削除する

背景画像を削除するには、以下の手順に従います。

1. ページ上で [編集] をクリックし、バナーのセクションにある鉛筆アイコンをクリックします。
2. [背景] をクリックします。
3. [削除] をクリックします。
4. [保存] をクリックして変更を保存し、そのまま編集を続けるか、[終了] をクリックしてから [保存] をクリックしてエディターを閉じます。