ページの上部に視覚的な焦点を追加して、訪問者の注意を惹き付けましょう。

バナー画像はページの上部付近に表示され、サイトのトーンを決定づける視覚的要素が追加されます。このガイドでは、バージョン7.0でバナー画像を追加およびスタイル設定する手順を説明します。バナー画像を追加してスタイルを設定する方法は、テンプレートによって異なります。

バージョン7.1でバナー画像を作成するには、セクションの背景画像をページの上部のセクションに追加します。

動画を見る

画像の書式設定のヒント

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

• 幅1500～2500ピクセルの画像を使用してください。
• 画像の幅が高さより長いものを使用してください。
• 抽象的なパターンで境界線のない画像を使用してください。
• 実際の画像ファイルではテキストを含む画像を使用しないでください。代わりに画像の上にテキストを追加してください。
• 画像ファイルのタイプと詳細な画像の要件については、「Web用の画像の書式設定」を参照してください。
• サイトの上部にテキストのみのメッセージを表示したい場合は、バナーの代わりにお知らせバーを追加してください。

バナー画像を追加する

さまざまなテンプレートでさまざまなタイプのバナー画像がサポートされています。

• ページ バナー - 個々のページの上部に表示されます。ページのアイキャッチ画像として追加されます。
• コレクション アイテムのバナー - 個々のブログ投稿、商品、イベントの上に表示されます。アイテムのアイキャッチ画像として追加されます。
• サイト全体のバナー - すべてのページに表示できます。サイト スタイルに追加されます。

詳細については、テンプレートごとのバナー オプションの比較表を確認するか、各バナー オプションの追加例の動画をご覧ください。

ページのバナーを追加する

ページのバナーを追加するには、次の手順に従ってください。

1. [ページパネル] を開きます。
2. ページのタイトルの上にカーソルを合わせ、をクリックしてから、[メディア] をクリックします。
3. [画像を追加] をクリックしてコンピューターから画像をアップロードするか、[画像を検索] をクリックして画像を再利用するかストック画像を追加します。一部のテンプレートは動画バナーもサポートしています。
4. 焦点をクリックしてドラッグし、画像の中心点を設定します。これはほとんどのテンプレートでのトリミングに役立ちます。
5. [保存] をクリックして変更した内容を公開します。
6. サイト スタイルを使用してバナーのスタイルを設定します。

既存のバナーを編集するには、ページにカーソルを合わせて [バナー] をクリックするか、でページ設定を再度開きます。

ページのバナーをサポートするテンプレートの詳細については、「テンプレート別のバナー オプション」を参照してください。

ヒント: 組み込みオプションの代わりに、任意のSquarespaceサイトのレイアウト ページの上部に画像ブロックを追加できます。

コレクション アイテムのバナーを追加する

コレクション アイテムのバナーは、個々のブログ投稿、商品、イベントの上に表示されます。

コレクション アイテムのバナーを追加するには、そのアイテムのエディターを開き、[オプション] タブでアイキャッチ画像を追加します。詳細な手順については、「アイキャッチ画像を追加する」を参照してください。

一部のコレクション アイテムでは、代わりにページのバナーが表示されます。たとえば、ブログ投稿にはブログ ページのバナーが表示される場合があります。コレクション アイテムのバナーをサポートするテンプレートの詳細については、「テンプレート別のバナー オプション」を参照してください。

サイト全体のバナーを追加する

サイト全体のバナーは、Fiveテンプレートと一部の廃止されたテンプレートで使用できます。これは、ページのバナーが追加されていないページに表示されます。

サイト全体のバナーを追加するには、サイト スタイルでスタイル微調整オプションをクリックします。

• Fiveでは、微調整オプションは [ヘッダーの背景画像] です。
• 廃止されたテンプレートでは、微調整オプションの名前が異なる場合があります。

画像を追加したら、表示されるオプションを使用してスタイルを設定します。

注: モバイルで問題が発生する可能性があるため、サイト全体のバナーは2500ピクセルを超えないようにしてください。

テンプレート別のバナー オプション

以下のテンプレート ファミリーは、1つ以上のバナーのタイプをサポートします。

テンプレート ファミリー	ページ	動画バナー	コレクション アイテム	他のオプション
Adirondack	レイアウト ブログ イベント 商品	あり	ブログ投稿 イベント 商品	スクロール時のフェード効果
Bedford	レイアウト アルバム ブログ イベント インデックス 商品	あり	ブログ投稿 イベント	バナーをヘッダーの後ろに表示可能 スライドショーのバナー スタックされたインデックスのバナー ブログ ページのスライドショーのバナー
Brine	レイアウト アルバム ブログ イベント ギャラリー インデックス 商品	あり	該当なし	バナーをヘッダーの後ろに表示可能 スライドショーのバナー スタックされたインデックスのバナー パララックス スクロール
Farro	該当なし	なし	ブログ投稿	該当なし
Five	レイアウト アルバム ブログ イベント ギャラリー 商品	あり	ページのバナーはブログ投稿、イベント、商品に表示	サイト全体のバナー サイト タイトル、ロゴ、タグラインをバナーにオーバーレイ可能
Montauk	レイアウト ブログ イベント インデックス	あり	ページのバナーはブログ投稿、イベントに表示	バナーは縦方向にトリミングされません
Pacific	レイアウト アルバム ブログ イベント ギャラリー インデックス 商品	あり	該当なし	バナーをヘッダーの後ろに表示可能 スライドショーのバナー スタックされたインデックスのバナー トリミングなしのバナー
Skye	該当なし	なし	ブログ投稿	該当なし
Supply	レイアウト ブログ アルバム イベント	なし	ブログ投稿 イベント	バナーは右側に表示されます (モバイルを除く)。
Tremont	レイアウト アルバム ブログ イベント ギャラリー 商品	あり	該当なし	バナーをヘッダーの後ろに表示可能 ページ オーバーレイ
York	レイアウト アルバム ブログ イベント ギャラリー インデックス 商品 プロジェクト	なし	該当なし	インデックスのバナー フェードイン効果

バナーにテキストを追加する

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

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

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

さまざまなテンプレートでさまざまなタイプのテキスト オーバーレイがサポートされています。

• ページのタイトルと説明 - ページ設定で追加されたタイトルと説明がページのバナーの上に表示されます。
• コレクション アイテムのバナーのテキスト - コレクション アイテムの設定のテキストをブログ投稿、イベント、または商品アイテムに表示します。
• インデックス ページのバナー テキスト - テンプレートによって、説明文がバナーの上にオーバーレイ表示されたり、ページ コンテンツがバナーの上にオーバーレイ表示されたりします。
• イントロダクション エリア オーバーレイ テキスト - テキスト ブロックやその他のブロック コンテンツが、バナーが表示されるページのヘッダー エリアにオーバーレイ表示されます。

どのテンプレートがどのタイプのオーバーレイ テキストをサポートしているかの詳細については、「テンプレート別のバナー テキスト オプション」を参照してください。

イントロダクション エリアのオーバーレイ テキストを追加する

Brineファミリーのテンプレートは、バナーの上に表示されるイントロダクション エリアをサポートしています。このエリアは、テキスト ブロックやボタン ブロックなどのブロックでカスタマイズできます。

ページのタイトルと説明を追加する

ほとんどのテンプレートは、ページのバナーの上にページのタイトルと説明を表示します。テンプレートのバナーにテキストを追加するには、次の手順に従ってください。

1. [ページパネル] を開きます。
2. 左のパネルでページ タイトルにカーソルを合わせ、をクリックします。
3. [全般] タブの [ページ タイトル] および [ページの説明] フィールドにテキストを追加します。
4. [保存] をクリックしてページを更新します。バナーの変更は、ページを更新するまでサイトのプレビューに表示されない場合があります。

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

• これらのテンプレートでは、ページの説明を、SEOベースのコンテンツを追加する目的以外にも使用することをおすすめします。バナーにページの説明を使用しても、SEOにマイナスの影響はありません。
• 検索結果やソーシャル共有に別のタイトルを表示するには、SEOタイトルを追加します。
• ほとんどのテンプレートで、説明文に空白を追加することで高さを増やすことができます。画像をさらに表示するには、説明文の周囲でReturnまたはEnterを押します。これにより、トリミングの問題を修正したり、バナーの高さを増したりして劇的な効果を得ることができます。

コレクション アイテムのバナー テキストを追加する

コレクション アイテムのバナーは通常、そのブログ投稿、イベント、または商品の設定からオーバーレイ テキストを作成します。各アイテムのタイプにテキストを追加する方法の詳細については、以下のリンクを参照してください。

• ブログ投稿
• イベント
• 商品アイテム

トラブルシューティング

テキストが表示されない場合は、次のトラブルシューティングの手順に従ってください。

• ページを更新します。
• テンプレートの表をチェックして、テンプレートがそのページ タイプのバナー テキストをサポートしていることを確認します。
• サイト スタイルを開き、テンプレートにバナーまたはバナー テキストを非表示にするスタイル オプションがあるかどうかを確認してください。
• 一部のテンプレートではテキストを表示するためにバナー画像が必要なため、必ずバナー画像を追加してください。
• テンプレートのガイドを確認してください。

テンプレート別のバナー テキスト オプション

以下のテンプレート ファミリーのバナー テキスト オプションを紹介します。

テンプレート ファミリー	ページのバナー	コレクション アイテムのバナー
Adirondack	テキスト オーバーレイなし	ブログ投稿、イベント、商品: テキスト オーバーレイなし
Bedford	特別な書式設定オプション (ボタン、ヘッダー) のあるページの説明。 スライドショーのバナーとブログ ページのバナーには他のオプションがあります。	ブログ投稿: タイトル、1つのメタデータ要素。 イベント: テキスト オーバーレイなし
Brine	オープン ブロック エリア (イントロダクション エリア) ヘッダー コンテンツ (サイト タイトルやナビゲーション リンクなど) をバナーの上に表示できます。
Farro		ブログ投稿: 投稿タイトルと最大4つのメタデータ要素
Five	ページのタイトルと説明、サイトのタイトル/ロゴとタグライン、またはバナー画像のみ。詳しくはこちらをご覧ください。	ページのバナーと同じ
Montauk	ページのタイトルと説明
Pacific	ページのタイトルと説明サイトのタイトルやナビゲーションを含めることもできます。
Skye		ブログ投稿: コールアウトに日付を表示可能
Supply		ブログ投稿、イベント: テキスト オーバーレイなし
Tremont	ページ タイトルと説明をページ オーバーレイとして表示します。
York	ページのタイトルと説明

バナーのスタイルを設定する

サイト スタイルの微調整オプションを使用して、バナーのフォント、色、およびその他の要素を変更します。バナー スタイルの微調整オプションは通常、サイト上のすべてのバナーに影響します。

バナーのスタイル設定オプションについては、テンプレートのガイドを参照してください。

透過画像

背景透過の.pngファイルを使用する場合、以下の微調整オプションにより、バナーの背後に表示される色が変更されます。

• Adirondack - [コンテンツの背景色]
• Bedford - [バナーのオーバーレイの色]
• Brine - [メイン: オーバーレイ] セクションの [オーバーレイの色]
• Farro - [投稿の背景色]。[オーバーレイの色] も色に影響します。
• Five - [ヘッダーの背景]
• Montauk - [キャンバスの背景]
• Pacific - [オーバーレイの色]
• Skye - [サイトの背景]
• Supply - [ページの色]
• Tremont - [サイトの背景色]
• York - [バナー] セクションの [背景の色]

通常、色は100%の不透過度で表示されます。希望の色が得られない場合は、透過度を変更してください。

バナーのサイズを変更する

以下の表を使用して、これらのテンプレート ファミリーのバナーのサイズを変更する方法を確認してください。バナーの幅については、ほとんどのテンプレートでは変更できないことに注意してください。

テンプレート ファミリー	サイズの変更方法
Adirondack	[高さ] 微調整オプション
Bedford	ページおよび動画バナー - ページの説明に改行を追加します。詳しくはこちらをご覧ください。 スライドショーのバナー、ブログ スライドショーのバナー、コレクション アイテムのバナー - 高さは固定
Brine	イントロダクション エリアに改行を追加します。インデックスのバナーには個別の高さオプションがあります。
Farro	[ブログ: アイテム] セクションの [ヘッダー] 微調整オプションを使用して、バナーのサイズを調整します。
Five	[バナー エリアの高さ] または [バナー エリアのスペース] 微調整オプションを使用します ([バナー エリアの高さ] はモバイルには影響しません)。
Montauk	元の画像で設定された固定の高さ。ページのバナーは常にサイト コンテンツの幅で表示されます。縦方向にはトリミングされません。
Pacific	ページの説明に改行を追加するか、[パディング] 微調整オプションを使用します。詳しくはこちらをご覧ください。インデックスのバナーには個別の高さオプションがあります。
Skye	バナーの幅を調整するには、[バナー画像の幅] 微調整オプションを使用します。高さは、元の画像の幅に比例して設定されます。
Supply	ページの幅は固定されているため、バナーはブラウザーの残りの幅を埋めます。
Tremont	[ページのバナー画像の高さ] 微調整オプション
York	[高さ] 微調整オプション

バナーが正しく表示されない場合は、「トリミングに関する問題のトラブルシューティング」を参照してください。

バナーにボタンを追加する

バナーにボタン ブロックを追加すると、次のことが可能になります。

• 訪問者に特定のページへのリンクをクリックするよう促す
• お客様の組織に寄付する
• ニュースレターにサインアップする

以下のテンプレート ファミリーには、個々のページのバナー画像や動画にボタンを追加するための特別なオーバーレイ オプションが含まれています。

• Bedford - ページの説明文を書式設定して、最後の行にボタンを作成します。
• Brine - バナーのあるページのイントロダクション エリアにボタン ブロックを追加します。
• Pacific - インデックス ページで、バナーのあるページにボタン ブロックを追加します。

モバイルのバナー

モバイル端末では、バナー画像は常にトリミングされます。

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

バナー画像を削除する

バナー画像を削除する方法は、バナー画像がサイト上のどこにあるかによって異なります。

• ページ バナー - ページ設定の [メディア] タブで、[画像を削除] をクリックします。
• コレクション アイテムのバナー - 個々のアイテム (ブログ投稿、商品、またはイベント) を開き、[オプション] タブをクリックして、ゴミ箱アイコンをクリックします。
• サイト全体のバナー - サイト スタイルの該当する微調整オプションを開き、[削除] をクリックします。