カバー ページでは、単一のよく目立つスプラッシュ ページで情報が表示されます。 カバー ページは、「作成中」ページを表示したり、商品リリースを発表したり、訪問者からメール アドレスを収集したりするのに最適です。

カバー ページは、バージョン7.0のすべてのWebサイトおよびCommerce支払いプランで利用できます。現在、スタンドアロンのカバー ページ プランを利用している場合は、請求が有効である間、ページは引き続き有効です。完全なサイトに切り替えた後にカバー ページ プランに戻すことはできません。

カバー ページはバージョン7.1では利用できません。同様の外観を作成する場合、特定のページでは、ヘッダーとフッターを非表示にすることができます。Squarespaceアプリでは、カバー ページを追加または編集することはできません。

動画を見る

カバー ページを追加する

カバー ページを追加し、その内容をカスタマイズするには、次の手順に従います。

1. [ページ] パネルを開き、[+] をクリックして、[カバー ページ] をクリックします。詳しくは、「ナビゲーションにページを追加する」をご覧ください。
2. [レイアウト] を選択します。
3. ブランディング、テキスト、メディアを追加します。
4. ボタン、リンク、フォームなどのアクションを追加します。
5. ページのスタイルを設定します。

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

• 訪問者がサイトを訪れたときに最初に表示されるページとしてカバー ページを設定するには、カバー ページをホームページに設定します。
• カバー ページをナビゲーションから削除するには、カバー ページを [ページ] パネルの [リンクなし] セクションに移動します。これは、訪問者がサイトに入る前に一度だけカバー ページを表示させたい場合や、カバー ページを別のランディング ページとして使用する場合に便利です。
• カバー ページのみのプランをご利用の場合は、[ページ] パネルがないため、ページを追加することはできません。ホーム メニューには、スタンドアロンのカバー ページを編集するためのパネルが表示されます。

カバー ページ レイアウト

各カバー ページ レイアウトは、独自の機能とスタイル設定を備えた1ページのテンプレートのように機能します。カバー ページはブロックを使用せず、テキストやボタンなどのデザイン エレメントは固定された位置に表示されます。これにより、カバー ページを美しく、レスポンシブな状態に保つことができます。

注: カバー ページではHTML形式とマークダウン形式はサポートされていません。

レイアウトを変更する方法は以下の通りです。

1. カバー ページ メニューで [レイアウトを変更] をクリックします。
2. ドロップダウン メニューを使用してレイアウトをカテゴリー別に並べ替えるか、[すべてのレイアウト] を選択してすべて表示します。
3. レイアウトにカーソルを合わせ、[選択] をクリックして新しいレイアウトとして設定します。
4. ページ上部の [保存] をクリックし、変更を適用します。

カバー ページのレイアウトはどのような目的にも合わせることができますが、デザインは一般的なテーマを念頭に置いています。各レイアウト カテゴリーの詳細は以下でご覧ください。

ブランディングとテキストを追加する

[ブランディングとテキスト] パネルを使用して、以下を追加します。

• ロゴまたはブランディング テキスト
• ページの見出し
• 本文

これらの設定は、レイアウトのスタイルと連動し、最小限の情報を最大のインパクトで表示するのに役立ちます。

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

• ブランディングとテキストの表示はレイアウトによって異なります。
• ロゴとブランディング テキストを同時に表示することはできません。
• ロゴがベスト プラクティスに従っていることを確認するか、Squarespace Logoを使用して新しいロゴを作成してください。
• 他のページとは異なり、カバー ページのサイトのタイトルとロゴは、サイトのホームページにリンクしていません。
• ブランディング テキストは、ブラウザーのタブや検索エンジンの結果でページ名として機能するSEOタイトルとは異なる場合があります。

メディアを追加する

[メディア] パネルでは、次の操作ができます。

• 背景画像をアップロードする
• ストック画像を追加する
• 以前アップロードした画像を再利用する
• ループする背景動画を追加する
• 背景色を設定する

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

• アップロードする前に画像を適切にフォーマットしてください。
• 組み込みの画像エディターを使用して、元の画像を編集できます。
• 複数の画像をアップロードして、スライドショーまたはグリッド背景を作成できます。
• 高解像度の画像を大量にアップロードすると、カバー ページの読み込み時間に影響する可能性があります。
• ほとんどのレイアウトでは背景動画がサポートされています。背景動画はYouTubeまたはVimeoのURLにリンクして、サイレントにループします。
• カバー ページのスライドショーでは、ナビゲーション コントロールを追加したり、移行速度を制御したりすることはできません。
• レスポンシブ デザインにより、画像や動画は、特にモバイルで、常にある程度トリミングされます。トリミングの量は、画像の高さ、ブラウザーの幅、および選択したレイアウトによって異なります。

背景色を設定する

画像や動画の代わりに単色の背景を表示するには、[なし] を選択します。これにより、プレビューから画像が消えます。背景色は [スタイル] パネルで変更できます。

アクションを追加する

[アクション] パネルを使用して、ボタン、ナビゲーション リンク、フォームまたはニュースレターのサインアップ オプションを追加します。カバー ページにアクションを追加しない場合は、フィールドを空白のままにしておきます。

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

• ボタンとナビゲーション リンクのいずれかを追加できますが、両方を追加することはできません。
• 最大2つのボタンまたは5つのナビゲーション リンクを追加できます。
• 1つのフォームまたはニュースレター サインアップを追加できます。

アクションを追加する方法は次のとおりです。

1. カバー ページ メニューの [アクション] をクリックします。
2. [アクション タイプを選択] で、アクションを選択します。

ボタンまたはナビゲーション リンクを追加する

ボタンとナビゲーション リンクは、訪問者をSquarespaceサイトの別のページ、別のWebサイト、またはダウンロード可能なファイルに誘導します。ボタンまたはナビゲーション リンクを追加する方法は次のとおりです。

1. [アクション タイプを選択] メニューから [ボタン] または [ナビゲーション] を選択します。
2. 最初のフィールドにラベルを追加します。書式設定と読みやすさを向上させるために、リンク ラベルのテキストを短くすることをおすすめします。
3. [URL] フィールドをクリックしてWebアドレスを入力するか、をクリックしてリンク エディターを開きます。外部サイト、ダウンロード可能なファイル、メール アドレス、電話番号、またはサイト独自のコンテンツにリンクできます。詳細については、「サイトにリンクを追加する」をご参照ください。
4. パネル上部の [保存] をクリックして、すべての変更を公開します。

フォームまたはニュースレターのサインアップを追加する

訪問者は、ボタンをクリックして、オーバーレイで開くフォームまたはニュースレターのサインアップを完了できます。フォームまたはニュースレターのサインアップを追加する方法は以下のとおりです。

1. [アクション タイプを選択] メニューから [フォーム] または [ニュースレター] を選択します。
2. [ボタンのラベル] フィールドにボタンのラベルを追加します。
3. [フォームを編集] または [ニュースレターのサインアップを編集] をクリックしてコンテンツを作成します。
4. フォームの場合、[フォーム名] フィールドにフォームの名前を追加できます。フォームがライトボックスで開かれると、訪問者に名前が表示されます。ニュースレターのサインアップに名前を付けたり、ライトボックスに表示される既定の「Newsletter Form」タイトルを削除したりすることはできません。
5. フォームの場合、ゴミ箱アイコンをクリックするとプレースホルダー フィールドを削除できます。また、下部の [+] をクリックすると新しいフィールドを追加できます。訪問者がフォームを送信する際にフィールドへの入力を要求する場合は、[必須] をオンにします。ニュースレターのサインアップの場合は、[メール アドレス] フィールドしかありません。
6. [ストレージ] タブをクリックして、送信先を指定します。メール キャンペーンのメーリング リストをストレージ オプションとして使用すると、登録者はサインアップ時に確認メールを受け取ります。これを無効にすることはできません。
7. [詳細設定] タブでは、送信ボタンのラベルをカスタマイズしたり、送信後のリダイレクトを設定したり、フォームの送信後に訪問者に表示されるメッセージを編集したりできます。通常のテキストまたはHTMLを使用します。
8. エディターで [保存] をクリックし、パネルの上部にある [保存] をクリックして、すべての変更を公開します。

ヒント: フォームまたはニュースレターのサインアップをストレージに接続したら、ページの公開バージョンにアクセスしてテスト フォームを送信し、動作を確認することをおすすめします。

フォームの背景色を追加する

ほとんどのレイアウトでは、[スタイル] パネルの [カスタム オーバーレイの色] 微調整オプションを使用して、フォームやニュースレターのサインアップ背景に色を追加できます。このオーバーレイをページの他の部分から非表示にするには、不透明度スライダーを使用して透明にします。フォームまたはニュースレターのサインアップ ボタンをクリックすると、訪問者にはオーバーレイが表示されます。

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

• Harborレイアウトには、[カスタム オーバーレイの色] と [テキストの背景の色] 設定はありません。Harborフォームまたはニュースレターのサインアップの背景は常にライトグレーになります。
• 一部のレイアウトでは、[カスタム オーバーレイの色] オプションは [メディア] パネルに画像を追加した後にのみ表示されます。

これらのレイアウトでは、フォームまたはニュースレターのサインアップの背景背景が [テキストの背景色] 設定と一致します。

• Backstory
• Card
• Flagship
• Flash
• Focus
• Monocle
• セッション
• Spotlight
• Vignette

フォームを非表示にする

フォームやニュースレターのサインアップを非表示にするには、ボタン ラベルのテキストをすべて削除し、フィールドを空白のままにします。フォーム フィールドは、後で再度有効にしてもそのままとなります。

ソーシャル アイコンを追加する

ソーシャル アイコンを表示するには、カバー ページ メニューの [ソーシャル リンク] をクリックし、[ソーシャル アイコンを表示] をオンにします。ソーシャル アイコンには、[ソーシャル リンク] パネルに追加したアカウントが反映されます。アイコンの配置はレイアウトによって異なりますが、通常は下部近くに表示されます。

カバー ページのスタイル

カバー ページ メニューの [スタイル] パネルを使用して、デザインをカスタマイズします。各カバー ページには、サイト テンプレートや他のカバー ページとは独立した独自のスタイルオプションがあります。

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

• レイアウトを変更すると、すべてのフォント、色、サイズの設定がレイアウトの既定値にリセットされます。以前に使用したレイアウトに戻すと、スタイル微調整オプションもリセットされます。
• カバー ページはレスポンシブ デザインで作成されているため、モバイル端末では少し違って見えます。端末別プレビューを使用して、モバイルでページがどのように表示されるかをプレビューできます。

スタイル微調整オプションを変更する

カバー ページ メニューで [スタイル] をクリックします。スタイル微調整オプションを使用してカバー ページをカスタマイズします。変更を加えると、ページのプレビューが更新されます。気に入ったデザインが見つかるまで、試行錯誤することをおすすめします。

以下は、カバー ページの一般的な微調整オプションのリストです。

• 配置 - ページ上のコンテンツの位置。レイアウトに応じて、オプションは [左]、[中央]、[右]、または 上部]、[中央]、[下部] です。
• ブランディング - フォントと色を設定します。
• 見出し - フォントと色を設定します。
• 本文 - フォントと色を設定します。
• 背景 - 背景色 (画像や動画を使用しない場合に表示されます) とページ境界線のオプションを設定します。
• 画像 (場所レイアウトでは使用不可) - スタイルを [フル] または [グリッド] に設定し、[グリッド ギャラリーの密度] や [グリッド ギャラリーの比率] などのスタイル微調整オプションでグリッドの外観をカスタマイズします。[オーバーレイの色の自動設定] と [読み込みの色の自動設定] をオンにするか、これらをオフにして個別に色を設定します。色の読み込みの詳細については、こちらをご覧ください。
• ボタン - 任意のボタンのフォント、スタイル、色を設定します。
• ソーシャル アイコン - ソーシャル アイコンのスタイルと色を設定します。
• オーディオ コントロール (オーディオ レイアウトのみ) - プレイヤーのスタイル、トラックのフォントと色を設定します。
• 動画コントロール (動画レイアウトのみ) - プレイヤーのスタイルと色を設定します。
• マップ - (場所レイアウトのみ) - マップのスタイルを設定します。

背景画像

ほとんどのレイアウトには、画像オプションとして [フル] と [グリッド] があります。

• [フル] を選択すると、カバー ページの背景全体が1つの画像で埋められます。複数の画像をアップロードすると、画像が1つずつスライドショーとして表示されます。
• [グリッド] を選択すると、背景グリッドが作成され、画像が繰り返し表示されます。画像が1つあれば、グリッドはその画像を繰り返してスペースを埋めます。
  
  • [グリッド] オプションは、Focus、Flagship、Harbor、Monocleレイアウトでは使用できません。
  • Montageレイアウトでは、コンテンツ バーが画像の一部を覆う場合があります。
• 以下に示す微調整オプションを使用して、縦横比や画像の向きなどを設定します。

読み込みの色

ほとんどのカバー ページ レイアウトには読み込みの色のオプションがあり、通常の背景色や画像を読み込んでいるときに別の背景色を表示できます。スライドショーで画像を切り替えるときにこの色が表示されることもあります。

注: Flagship、Focus、Harbor、Monocleの各レイアウトには読み込みの色はありません。

既定では、レイアウトは読み込みの色の自動設定を使用します。これは、色が画像または動画の背景色に基づいていることを意味します。複数の背景画像がある場合、読み込みの色は [メディア] パネルの最初の画像に基づいてきまります。

独自の色を選択するには、[読み込みの色の自動設定] をオフにし、[カスタム読み込みの色] をクリックして新しい色を設定します。

読み込みの色を無効にするには、[カスタム読み込みの色] をクリックし、[透明] オプションをチェックします。

オーバーレイの色

Harborを除くすべてのレイアウトには、背景画像または背景色に色合いを加えるオーバーレイの色のオプションがあります。既定では、レイアウトはオーバーレイの色の自動設定を使用します。この自動色は通常、デモ画像を補完するグレーの色合いです。

カスタムのオーバーレイの色を使用するには、[オーバーレイの色の自動設定] をオフにし、[カスタム オーバーレイの色] をクリックして新しい色を選択します。

カスタム オーバーレイの色をフォームの背景色として使用し、ページの残りの部分からは非表示にするには、不透明度スライダーを使用してこの色を透明にします。

よくある質問

テキスト サイズを一定限度以上に大きくできないのはなぜですか。

カバー ページのテキスト、ロゴ、ボタンは、各レイアウトがサポートする最大幅までしか拡大できません。これらの制限により、コンテンツが重なることがなくなるため、レスポンシブ デザインが保証されます。

具体的には、ブラウザーの幅が1800ピクセルを超える場合、本文テキストには設定されたフォント サイズが表示されます。ブラウザーの幅が1800ピクセル以下の場合、本文のフォントは幅に応じて以下の最大サイズで表示されます。

• 幅1800ピクセル: 27px
• 幅1600ピクセル: 22px
• 幅1020ピクセル: 18px
• 幅760ピクセル: 17px
• 幅600ピクセル: 16px

たとえば、本文のフォント サイズを30ピクセルに設定した場合、このフォントが30ピクセルで表示されるのは訪問者のブラウザー ウィンドウの幅が1801ピクセル以上の場合のみです。それ以外の場合は、上記のリストに基づいて再調整されます。同様に、本文のフォントサイズを13ピクセルに設定した場合、このサイズはどの制限値よりも小さいため、常に13ピクセルで表示されます。

ブランディングと見出しのテキストは別々に機能します。フォント サイズはターゲットとして機能し、テキストはブラウザーの高さと幅に基づいて拡大縮小されます。このスケーリングはレイアウトによって異なります。

カバー ページにカスタム コードを追加できますか？

カバー ページは極めて明確な意図によりデザインされていて、カスタムCSSを追加することは想定されていません。カバー ページのスタイル (フォントや色など) を調整するには、[スタイル] パネルを使用します。

それでもHTMLやスクリプトを追加する必要がある場合は、カバー ページの設定を使用してページごとのコード挿入を追加してください。詳細については、「カスタム コードをサイトへ追加する」をご参照ください。

Projectorレイアウトでは再生ボタンの位置が変わります。

Projectorレイアウトでの再生ボタンの配置は、本文フィールド内のテキストの量によって異なります。

• テキストの量が少ない場合、再生ボタンの位置は中央のままです。
• テキストが一定の幅を超えると、再生ボタンが左上隅に移動します。
• 位置はブラウザーのサイズによって異なります。