Bedfordテンプレート ファミリーのスタイルと機能を紹介します。
用途の範囲が広いBedfordテンプレート ファミリー (Anya、Bedford、Bryant、Hayden) は、非営利団体から不動産物件まで、あらゆる種類のサイトで機能します。カスタマイズ可能なバナーとボタン、サイドバー ナビゲーション、スクロール可能なインデックス ページを使い、商品、ミッション、イベント詳細に焦点を当てることができます。
このガイドでは、Bedfordファミリーの機能とデザイン オプションについて説明します。[サイト スタイル] 微調整オプション、および [サイト スタイル] パネルでこれらのオプションが表示されるセクションを太字で示しています。
サポートされているページ タイプ
Bedfordでは、次のページ タイプがサポートされています。
ヘッダー
訪問者は、上部のヘッダーを使用してサイトを移動します。Bedfordでは、サイトのタイトルまたはロゴとメイン ナビゲーションがヘッダーに含まれます。タグラインは表示されません。ヘッダーはインデックス ページに固定されています。
以下の [サイト ヘッダー] 微調整オプションで、サイトのタイトルやロゴのスタイルを設定します。
- [バナー画像上で透明化] を使用して、ブランディングとナビゲーションをページ バナーのオーバーレイとして表示するかヘッダーの背景色のオーバーレイとして表示するかを選択します。
- ロゴ配置エリアの幅に合わせてロゴのサイズを変更します。高さの最大値は約100ピクセルに固定されており、それ以上ロゴを拡大することはできません。
[サイト ナビゲーション] 微調整オプションを使用して、メイン ナビゲーションの表示設定を変更します。
- [ナビゲーション ボタンを有効化] のチェックボックスをオンにすると、メイン ナビゲーションの最後のページがボタンとして表示されます。[ナビゲーション ボタン] 微調整オプションで外観を調整します。ドロップダウンはボタンにはなりません。
- ヘッダー全体にナビゲーション リンクを表示するための十分なスペースがブラウザー ウィンドウにない場合は、代わりに ☰ (メニューまたはハンバーガー アイコンと呼ばれます) が表示されます。
バナー
ページ上部にフルブリードのバナー画像や動画を追加し、カスタマイズ可能な見出し、テキスト、ボタンでオーバーレイします。バナー画像と動画は次の箇所に追加できます。
- レイアウト ページ
- アルバム ページ
- ブログ ページと投稿
- イベント ページと個々のイベント
- ストア ページ
以下の点に留意してください。
- サイト スタイルの [サイト ヘッダー] セクションでバナー画像の [透明] をオンにすると、ヘッダー コンテンツがバナーの上に表示されます。
- レイアウト ページとブログ ページにスライドショー バナーを追加できます。
- インデックス ページには複数のバナーをスタックすることができます。
- どのバナーでも、ボタンとテキスト オーバーレイのフォント、色、スタイルを調整するには [バナー セクション] 微調整オプションを使用します。
ページのバナー
ページ設定でアイキャッチ画像または動画URLを追加して、レイアウト、アルバム、ブログ、イベント、またはストア ページの上部にバナー画像または動画を作成します。
[全般] タブの [ページの説明] フィールドにテキスト オーバーレイを追加します。ページの説明を追加できるのは、サイトの所有者または管理者権限を持つユーザーのみであることにご注意ください。テキストには、ヘッダーやボタンの書式を設定できます。ページ タイトルのテキストは表示されません。
スライドショーのバナー
ページの最初のブロックとしてスライドショー ギャラリー ブロックを追加して、レイアウト ページの上部にスライドショー バナーを作成します。
- ギャラリー ブロックは、このページには表示されません。
- スライドショーのバナーはページのバナーを上書きします。
- ギャラリー ブロックに追加された動画はバナーに表示されますが、自動的には再生されません。動画には音声が含まれ、バナー テキストが表示されます。
- 最良の結果を得るには、ブロック エディターの [デザイン] タブで [画像を自動トリミング] をオンにします。
- バナーにテキスト オーバーレイがある場合は、[デザイン] タブで [タイトルと説明を表示] をオンにします。タイトルは表示されません。
- スライドショーのバナーの高さは固定されています。
- デスクトップ - 600ピクセル。サイト スタイルの [サイト ヘッダー] セクションのバナー画像で [透明] をオンにすると、固定画像の高さは700ピクセルになります。
- モバイル - 300ピクセル。高さが640ピクセルを超えるデバイスでは、デスクトップ向けの高さでバナーが表示されます。
- ブログ ページでは、注目の投稿からスライドショーのバナーも作成されます。
オーバーレイ テキストを追加するには、画像の上にカーソルを置いて
をクリックし、[説明] フィールドにテキストを追加します。既存のギャラリーにリンクする場合は、ギャラリー ページの説明を更新してください。
- テキストには、ヘッダーやボタンの書式を設定できます。
- スライドショーのバナー上のテキストが長すぎて固定の高さに収まらない場合、太字以外の説明テキストは非表示になり、太字の説明文は切り取られます。
バナーのテキストとボタン
ページとスライドショーのバナーの場合は次のようになります。
- 太字のテキストはヘッダーの書式設定になります。
- 通常のテキストは本文の書式設定になります。
- 最終行のリンクはボタンの書式設定になります。リンクに太字のテキストを含めたり、リンクの下に追加の行を含めたりすることはできません。
- 空白スペースを追加してページ バナーの高さを拡張します。
ヒント: ボタン リンクを作成した後で、ページ エディターから直接、ボタン テキストを編集することができます。テキストをすべて削除するとリンクも消えてしまうため、ページ設定で再度追加する必要があることにご注意ください。
ブログ投稿とイベントのバナー
コレクション アイテムのアイキャッチ画像は、ブログ投稿や個々のイベントの上部に表示されます。これらのバナーの高さは固定されています。
- イベント - バナーにテキストは表示されません。
- ブログ投稿 - 投稿タイトルと1種類のメタデータ ([メタの優先度] 微調整オプションで選択) がバナー画像の上に表示されます。
カラー フィルターを追加する
サイト スタイルの [バナー] セクションにあるバナーのオーバーレイの色を使用して、すべてのバナー画像または動画にカラー フィルターを追加します。
バナーに関するその他のヘルプ
- SEOベースのコンテンツにはページの説明を使用しないでください。このコンテンツはページ上に表示されます。サイトの最適化について詳しくは、「検索エンジンでのサイトの可視性を高める」をご覧ください。
- 画像のトリミングに関するヘルプについては、「トリミングに関する問題のトラブルシューティング」をご覧ください。
- 一般的なヘルプについては、「バナー画像を追加する」をご覧ください。
フッター
Bedfordにはフッターとプレフッターのコンテンツ エリアがあり、ブロックを使ってカスタマイズできます。
- フッターとプレフッターには、ソーシャル リンク ブロックやテキスト ブロックなどのコンテンツが自動的に含まれる場合があります。独自のコンテンツに置き換えるには、これらのブロックを削除または編集します。
- フッターとプレフッター内のテキスト リンクには下線が付いています。
- フッターに加えた変更は、サイト全体に反映されます。
[フッター] 微調整オプションでフッター コンテンツをスタイル設定します。
- [フッター ナビゲーション] の微調整オプションでフッター ナビゲーションのスタイルを設定します。
- [中央ナビゲーション/情報] 微調整オプションを使用して、フッター ナビゲーションと連絡先情報を調整します。
- サイト情報の微調整オプションを使用して、ビジネス情報設定に含まれる電話番号、メールアドレス、および所在地のスタイルを設定します。
- すべての連絡先情報を非表示にするには、[サイト情報を非表示] のチェックボックスをオンにします。
ヒント: [サイト情報] および [サイト情報を非表示] 微調整オプションが表示されない場合は、ご自分のサイトで別のテンプレートをプレビューして、そのプレビューをキャンセルしてください。
サイドバーのナビゲーション
Bedfordでは、ストア ページ、およびドロップダウン、メンバー サイト、インデックスのページにナビゲーション サイドバーが作成されます。
- [サイドバー] 微調整オプションを使用して、フォントや色を調整したり、サイドバーのタイトルを非表示にしたり、サイドバーのナビゲーションを完全に非表示にしたりできます。
- サイドバーのナビゲーションはブロックをサポートしていません。
- ドロップダウンまたはメンバー サイトに追加されたすべてのページは、サイドバー ナビゲーションにリンクとして表示されます。サイドバーは、ドロップダウンまたはメンバー サイトのレイアウト ページに表示されます。
- インデックス内のページには、個々のページの直接URLにアクセスしたときにのみサイドバー ナビゲーションが表示されます。
- ストア ページでは、サイドバー ナビゲーションに様々な商品カテゴリーへのリンクが表示されます。リンクをクリックすると、そのカテゴリー内の商品を除くすべての商品が除外されます。
背景
サイトの背景色を設定するには、以下の微調整オプションを使用します。
- メイン コンテンツ エリア - [メイン コンテンツ] の [ページ背景]
- ヘッダー - [サイト ヘッダー] の [ヘッダーの背景色]
- プレフッター - [プレフッター] の [プレフッターの背景]
- フッター - [フッター] の [フッターの背景]
フォント
[メイン コンテンツ] の [ページ テキスト] と [見出し] 微調整オプションで、テキストのスタイル、サイズ、色を調整します。
サイト ヘッダー、サイドバーのナビゲーション、およびページのバナーには、独自のフォントと色のオプションがあります。
インデックス ページ
Bedfordのインデックス ページでは、複数のページのコンテンツをスタック セクションに変換するため、1か所で様々な画像や情報を強調することができます。レイアウト ページから作成されるコンテンツ セクションは、テキスト、ボタン、その他のブロックを追加するのに適したオプションです。
- ページのアイキャッチ画像を追加すると、バナー画像や動画、またはバナー スライドショーを作成できます。
- バナー画像を使ってページ コンテンツを含まないセクションを作成し、複数のバナーをスタックすることができます。新しいページの場合は、既定のテキスト ブロックを削除します。サイトにログインしている間は、プレースホルダーの空白が引き続き表示されます。
- インデックス ページの色とフォントは、他のページと同じように微調整オプションでスタイル設定します。インデックス ページに特化した微調整オプションはありません。
- 最初のページをスクロールしても、サイトのタイトルとメイン ナビゲーションは固定された位置にとどまります。[ヘッダーの背景色] 微調整オプションを使用して、固定ヘッダーの背景色を調整します。
- インデックス ページはインデックス アンカー リンクをサポートします。訪問者がこれらのリンクをクリックすると、インデックス ページの特定のセクションにジャンプします。実際の動作を確認するには、 Haydenのデモ コンテンツで [作品を見る] ボタンをクリックしてください。
- インデックスの一部であるページの直接URLにアクセスすると、そのインデックスに含まれるすべてのページがサイドバー ナビゲーションに表示されます。
ブログ ページ
Bedfordのブログ ページは、垂直に積み上げられた投稿のリストとして表示されます。
ランディング ページでは、次のようになります。
- 抜粋付きの投稿の下に「続きを読む」リンクが表示されます。このリンクのテキストと矢印は、[ページ テキスト] フォントと [ページのリンクの色] スタイル微調整オプションに従います。
- 個々の投稿の完全な内容は、抜粋なしで投稿のタイトルの下に表示されます。
個々の投稿では、次のようになります。
- 個々のブログ投稿を直接URLから表示すると、アイキャッチ画像がバナーとして表示されます。
- タグ、ソースURL、コメント、共有、いいね！は常に投稿の下に表示されます。
- カテゴリーは常に投稿の上に表示されます。
- 前の投稿と次の投稿へのナビゲーションはコメントの下に表示されます。
サイト スタイルの [ブログ] セクションでブログ ページのスタイルを設定します。
- メタの優先度を使用して、ランディング ページの投稿コンテンツの上に表示するメタデータ (日付、カテゴリー、または投稿者名) を選択します。
- ランディング ページの投稿の下にタグ、ソースURL、コメント、共有、いいね！を表示するには、[リスト エントリー フッターを非表示] のチェックボックスをオフにします。
- 投稿タイトルとメタデータをランディング ページページの中央に配置するには、[中央エントリー タイトルおよびメタ] のチェックボックスをオンにします。
- [エントリー投稿者を非表示] を使い、ランディング ページと個々の投稿の両方からブログ投稿者を表示または非表示にできます。[メタの優先度: 投稿者] が選択されている場合、この微調整オプションは表示されません。
サイドバー
各ブログ ページにはカスタマイズ可能なサイドバーがあります。そのブログ内のすべてのブログ投稿にもサイドバーが表示されます。
サイト スタイルの [サイドバー] セクションで [ブログ サイドバーを非表示にする] のチェックを外してサイドバーを有効にし、ブロックを使ってコンテンツを追加します。
スライドショーのバナー
注目の投稿のうち、最新の5件はランディング ページにスライドショーのバナーを作成します。
- 各スライドには、ブログ投稿のタイトル、1種類のメタデータ ([メタの優先度] 微調整オプションで選択)、および [投稿を見る] リンクが表示されます。
- アイキャッチ画像はテキストの背景に表示されます。投稿にアイキャッチ画像がない場合は、テキストはバナーのオーバーレイの色の上に表示されます。
- [バナー スライドショー コントロール] 微調整オプションを使って、ブログのスライドショー バナーのナビゲーション エレメントをコントロールします。
- 注目の投稿としてマークされた投稿がない場合は、代わりにページ バナーがブログ ページに表示されます。
モバイル
Squarespaceに組み込まれたレスポンシブ デザインを使用すると、どの端末でも見栄えがよくなるようにサイトが調整されます。
- ブログ サイドバーのコンテンツは、ブログ ページおよびブログ投稿のメイン コンテンツの下に表示されます。
- ナビゲーション サイドバーは既定で非表示になっています。右上の+をタップすると、ストア ページのナビゲーション サイドバー、ドロップダウン内のページ、直接リンクで訪問者がアクセスしたインデックス ページの各セクションが表示されます。
- スライドショーのバナーの高さは300ピクセルに固定されています。スライドショーのバナーのテキストが長すぎて収まらない場合、説明テキストは非表示になります。
- モバイル用スタイルを無効にすることもできますが、推奨はしません。
ページ下部に「上に戻る」リンクが表示されます。
- リンクは、サイト スタイルの [フッター] セクションの [フッター ナビゲーションのフォント] と [フッター ナビゲーションのリンクの色] 微調整オプションに従います 。これらの微調整オプションが表示されない場合は、フッター ナビゲーションにページを一時的に追加してください。
- リンクは端末別プレビューには表示されません。
スマートフォンでは、次のようになります。
- ナビゲーションが折りたたまれて右上の ☰ に表示されます。モバイルでは、メイン ナビゲーションが空の場合でも、☰ が常に表示されます。
- メニュー オーバーレイの背景色はヘッダーと同じです。
- ビジネス情報を表示するフッターには、完全なメールアドレスではなく、メールアドレスのリンクが表示されます。
言語オプション
Bedfordは、次の2通りの言語オプションをサポートしています。
- 送信フォームや注文確認メッセージなど、サイトの組み込みテキストの言語を選択するオプション。
- フランス語、ドイツ語、イタリア語、ポルトガル語、またはスペイン語のテンプレートを使用して新しいサイトを開始するオプション。
Bedfordのトラブルシューティング
このテンプレートでよく生じる問題について説明します。これらの一部は、バグまたは既知の問題です。Squarespaceバージョン7.0は引き続きサポートされていますが、Squarespaceでは最新のプラットフォームであるバージョン7.1に重点を置いているため、バグや問題の修正の優先順位は低くなっています。弊社の更新ツールを使用することで、バージョン7.0サイトをバージョン7.1に移行できます。
インデックス内のレイアウト ページが他のコンテンツと重なっている
インデックス内のレイアウト ページが/headerのURLスラッグ持つ場合、サイトはそのページ全体をインデックス ヘッダーとして扱います。このため、複数のページが重複し、ページ コンテンツの編集に支障をきたす場合があります。
これを修正するには、書式設定のヒントと予約済みURLスラッグを参考にして、ページのURLスラッグの名前を「/header」以外のものに変更してください。
バナー内のリンクがボタンとして表示されない
説明の最後の行にあるリンクのみに、ボタンの書式が設定されます。リンクがボタンとして表示されない場合は、ページの説明または画像の説明のオーバーレイ テキストをご確認ください。リンクが太字になっていないこと、およびリンクの後に改行がないことをご確認ください。
リンクが太字でなく、その下に行がない場合は、次のトラブルシューティング方法をお試しください。
- そのバナーのページの説明または画像の説明を開きます。
- 説明フィールドのテキストをすべてコピーし、Ctrl + X (Macの場合はCommand + X) を押します。
- Ctrl + Shift + V (Macの場合はCommand + Shift + V) を押して、書式設定を含めずに貼り付けます。
- 最後の行にリンクを再度追加します。その下にテキストや改行がないことを確認します。
- [保存] をクリックしてページを更新します。
バナーの説明文がスマートフォンに表示されない
モバイル ビューでは、スライドショーのバナーの高さは300ピクセルに固定されています。スライドショーのバナーのテキストが長すぎて収まらない場合、説明テキストは非表示になります。
バナー画像が表示されない
ページのバナーの場合は以下を実行します。
- [ページパネル] を開きます。
- ページにカーソルを合わせて
をクリックします。 - [メディア] タブにアイキャッチ画像または動画URLが読み込まれていることを確認します。
- 動画URLを追加した場合は、[メディア] タブを下にスクロールして、モバイル用代替画像があることを確認します。これは、バナー動画を読み込めない場合に表示されます。
- [保存] をクリックしてページを更新します。
スライドショーのバナーの場合は以下を実行します。
- ページ プレビューにカーソルを合わせ、[編集] をクリックしてページ エディターを開きます。
- スライドショー ギャラリー ブロックがページの最初のブロックであることを確認します。
- スライドショー ギャラリー ブロックの上にカーソルを合わせ、[編集] をクリックしてエディターを開きます。
- 画像または動画が読み込まれていることをご確認ください。
- [保存] をクリックしてページを更新します。
ブログ スライドショー バナーの場合は、それぞれの注目の投稿の設定にアイキャッチ画像が含まれていることをご確認ください。
ギャラリー ページはバナー画像をサポートしていません。
別のコンピューターでバナーが短く表示される
Squarespaceのレスポンシブ デザインでは、ブラウザーのウィンドウ サイズと画面解像度の両方が考慮されます。低解像度のデバイス (1366 x 768以下) では、画面の解像度に合わせてバナーが短く表示されます。
インデックス内のページに移動できない
[ページ] パネルでインデックス内のページをクリックすると、インデックス ページ上でそのページがある場所に移動し、そのページが背景と合わせてどのように表示されるかを確認できます。これにより、インデックスを効率的に整理することができます。
インデックス外でページがどのように表示されるかを確認するには、ログアウトした状態かシークレット モードでページの直接URLにアクセスしてください。
ニュースレター ブロックが表示されない
レイアウト ページにニュースレター ブロックを追加すると、ブロックの背景は既定で透明に設定され、白いテキストが適用されます。ページの色も白の場合、テキストは見えなくなります。
サイト スタイルの [ニュースレター ブロック] セクションで、[ニュースレターのスタイル] を [ライト] に設定して問題を修正するか、[背景色] 微調整オプションで透明度を変更します。
モバイル端末で一番下までスクロールすると色が表示される
iPhoneまたはiPadでWebサイトの一番下までスクロールすると、Appleの「ラバー バンド」効果により、サイトの終了位置の下に空白の領域が表示されます。
Bedfordファミリーの場合、その領域の色はフッターの色によって設定されます。これを変更する方法は以下の通りです。
- [サイト スタイル] パネルを開きます。
- [フッター] セクションまでスクロールして、[フッターの背景] 微調整オプションを変更します。
この領域は常に完全に不透明になるため、色の一貫性を確保するには、不透明色を選択することをおすすめします。たとえば、フッターがほぼ透明な赤に設定されている場合、フッターは薄いピンクに見えますが、その下の「ラバーバンド」領域は明るい赤になります。
[作品を見る] ボタンを再作成する方法
Haydenデモ コンテンツの [作品を表示] ボタンは、インデックス ページのアンカー リンクです。
ナビゲーション リンクがボタンとして表示されない
トラブルシューティングの前に、以下の点にご留意ください。
- メイン ナビゲーションの最後のページのみがボタンとして表示されます。
- ドロップダウンはボタンとして書式設定されません。
ナビゲーション ボタンが表示されない場合は、以下の手順に従ってください。
- [サイト スタイル] パネルを開きます。
- [サイト ナビゲーション] セクションまで下にスクロールします。
- [ナビゲーション ボタンを有効化] 微調整オプションがオンになっていることを確認します。
- [保存] をクリックしてページを更新します。
ナビゲーション メニュー アイコンがコンピューターに表示されている
ブラウザー ウィンドウにすべてのナビゲーション リンクを表示するための十分なスペースがない場合は、☰が表示されます。メニュー アイコンをクリックすると、ナビゲーションがオーバーレイで表示されます。
メニュー アイコンとナビゲーションのオーバーレイによって、サイトがモバイル端末に対応し、応答性が高く、ナビゲートしやすくなります。この機能は削できません。ただし、幅を狭くしてすべてのリンクを表示する方法がいくつかあります。
- ナビゲーション項目の数を減らします。1つに、ドロップダウンを使用してドロップダウン メニューを作成する方法があります。
- サイト スタイルの [サイト ナビゲーション] セクションにある [ナビゲーション リンク フォント] 微調整オプションを使用して、ナビゲーションのフォントのサイズと間隔を小さくします。
- サイト スタイルの [サイト ヘッダー] セクションで、サイトのタイトルまたはロゴ配置エリアの幅を小さくします。
モバイル メニューが開きません
無効なURLまたは埋め込みコードを使用してトップページに動画バナーを追加した場合、モバイル メニューは開きません。動画URLを編集するには、次の手順に従ってください。
- [ページパネル] を開きます。
- 左のパネルでトップページのタイトルにカーソルを合わせ、をクリックします。
- [メディア] タブをクリックし、[動画] タブをクリックします。
- 動画URLフィールドに有効なURLが含まれていることを確認します。
ページ バナーが短すぎる、あるいは画像が切れている
ReturnまたはEnterを押して、ページ説明の上または下に空白スペースを追加し、ページバナーの高さを増やしてください。これにより、トリミングの問題を修正したり、ページ上のバナー全体のサイズを増したりして、劇的な効果を得ることができます。
ボタンの下に空白を追加するには、追加するすべての行に対してShift + EnterまたはShift + Returnを押します。
インデックスにバナーをスタックする
バナー画像の間に空白を入れずにバナー画像をスタックするには、アイキャッチ画像だけがあり、ページ コンテンツのないレイアウト ページを作成します。各ページには、バナー画像とオーバーレイ テキストのみが表示されます。各レイアウト ページでは必ず既定のテキスト ブロックを削除してください。削除しないと、各バナーの間に空白スペースが表示されます。