Bedfordテンプレート ファミリー

Bedfordテンプレ⁠ート フ⁠ァミリ⁠ーのスタイルと機能を紹介します⁠。

最終更新日 2025年3月5日

用途の範囲が広いBedfordテンプレ⁠ート フ⁠ァミリ⁠ー (⁠Anya⁠、Bedford⁠、Bryant⁠、Hayden⁠) は⁠、非営利団体から不動産物件まで⁠、あらゆる種類のサイトで機能します⁠。カスタマイズ可能なバナ⁠ーとボタン⁠、サイドバ⁠ー ナビゲ⁠ーシ⁠ョン⁠、スクロ⁠ール可能なインデ⁠ックス ペ⁠ージを使い⁠、商品⁠、ミ⁠ッシ⁠ョン⁠、イベント詳細に焦点を当てることができます⁠。

このガイドでは⁠、Bedfordフ⁠ァミリ⁠ーの機能とデザイン オプシ⁠ョンについて説明します⁠。[⁠サイト スタイル⁠] 微調整オプシ⁠ョン⁠、および [⁠サイト スタイル⁠] パネルでこれらのオプシ⁠ョンが表示されるセクシ⁠ョンを太字で示しています⁠。

サポ⁠ートされているペ⁠ージ タイプ

Bedfordでは⁠、次のペ⁠ージ タイプがサポ⁠ートされています⁠。

ヘ⁠ッダ⁠ー

訪問者は⁠、上部のヘ⁠ッダ⁠ーを使用してサイトを移動します⁠。Bedfordでは⁠、サイトのタイトルまたはロゴメイン ナビゲ⁠ーシ⁠ョンがヘ⁠ッダ⁠ーに含まれます⁠。タグラインは表示されません⁠。ヘ⁠ッダ⁠ーはインデ⁠ックス ペ⁠ージに固定されています⁠。

以下の [⁠サイト ヘ⁠ッダ⁠ー⁠] 微調整オプシ⁠ョンで⁠、サイトのタイトルやロゴのスタイルを設定します⁠。

  • [⁠バナ⁠ー画像上で透明化⁠] を使用して⁠、ブランデ⁠ィングとナビゲ⁠ーシ⁠ョンをペ⁠ージ バナ⁠ーのオ⁠ーバ⁠ーレイとして表示するかヘ⁠ッダ⁠ーの背景色のオ⁠ーバ⁠ーレイとして表示するかを選択します⁠。
  • ロゴ配置エリアの幅に合わせてロゴのサイズを変更します⁠。高さの最大値は約100ピクセルに固定されており⁠、それ以上ロゴを拡大することはできません⁠。

[⁠サイト ナビゲ⁠ーシ⁠ョン⁠] 微調整オプシ⁠ョンを使用して⁠、メイン ナビゲ⁠ーシ⁠ョンの表示設定を変更します⁠。

  • [⁠ナビゲ⁠ーシ⁠ョン ボタンを有効化⁠] のチ⁠ェ⁠ックボ⁠ックスをオンにすると⁠、メイン ナビゲ⁠ーシ⁠ョンの最後のペ⁠ージがボタンとして表示されます⁠。[⁠ナビゲ⁠ーシ⁠ョン ボタン⁠] 微調整オプシ⁠ョンで外観を調整します⁠。ドロ⁠ップダウンはボタンにはなりません⁠。
  • ヘ⁠ッダ⁠ー全体にナビゲ⁠ーシ⁠ョン リンクを表示するための十分なスペ⁠ースがブラウザ⁠ー ウ⁠ィンドウにない場合は⁠、代わりに ☰ (⁠メニ⁠ュ⁠ーまたはハンバ⁠ーガ⁠ー アイコンと呼ばれます⁠) が表示されます⁠。

Bedfordヘッダー

Bedfordヘッダー

バナ⁠ー

ペ⁠ージ上部にフルブリ⁠ードのバナ⁠ー画像や動画を追加し⁠、カスタマイズ可能な見出し⁠、テキスト⁠、ボタンでオ⁠ーバ⁠ーレイします⁠。バナ⁠ー画像と動画は次の箇所に追加できます⁠。

  • レイアウト ペ⁠ージ
  • アルバム ペ⁠ージ
  • ブログ ペ⁠ージと投稿
  • イベント ペ⁠ージと個⁠々のイベント
  • ストア ペ⁠ージ

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

  • サイト スタイルの [⁠サイト ヘ⁠ッダ⁠ー⁠] セクシ⁠ョンでバナ⁠ー画像の [⁠透明⁠] をオンにすると⁠、ヘ⁠ッダ⁠ー コンテンツがバナ⁠ーの上に表示されます⁠。
  • レイアウト ペ⁠ージとブログ ペ⁠ージにスライドシ⁠ョ⁠ー バナ⁠ーを追加できます⁠。
  • インデ⁠ックス ペ⁠ージには複数のバナ⁠ーをスタ⁠ックすることができます⁠。
  • どのバナ⁠ーでも⁠、ボタンとテキスト オ⁠ーバ⁠ーレイのフ⁠ォント⁠、色⁠、スタイルを調整するには [⁠バナ⁠ー セクシ⁠ョン⁠] 微調整オプシ⁠ョンを使用します⁠。

ペ⁠ージのバナ⁠ー

ペ⁠ージ設定でアイキ⁠ャ⁠ッチ画像または動画URLを追加して⁠、レイアウト⁠、アルバム⁠、ブログ⁠、イベント⁠、またはストア ペ⁠ージの上部にバナ⁠ー画像または動画を作成します⁠。

[⁠全般⁠] タブの [⁠ペ⁠ージ説明⁠] フ⁠ィ⁠ールドにテキスト オ⁠ーバ⁠ーレイを追加します⁠。ペ⁠ージの説明を追加できるのは⁠、サイトの所有者または管理者権限を持つユ⁠ーザ⁠ーのみであることにご注意ください⁠。テキストには⁠、ヘ⁠ッダ⁠ーやボタンの書式を設定できます⁠。ペ⁠ージ タイトルのテキストは表示されません⁠。

スライドシ⁠ョ⁠ーのバナ⁠ー

ペ⁠ージの最初のブロ⁠ックとしてスライドシ⁠ョ⁠ー ギ⁠ャラリ⁠ー ブロ⁠ックを追加して⁠、レイアウト ペ⁠ージの上部にスライドシ⁠ョ⁠ー バナ⁠ーを作成します⁠。

  • ギ⁠ャラリ⁠ー ブロ⁠ックは⁠、このペ⁠ージには表示されません⁠。
  • スライドシ⁠ョ⁠ーのバナ⁠ーはペ⁠ージのバナ⁠ーを上書きします⁠。
  • ギ⁠ャラリ⁠ー ブロ⁠ックに追加された動画はバナ⁠ーに表示されますが⁠、自動的には再生されません⁠。動画には音声が含まれ⁠、バナ⁠ー テキストが表示されます⁠。
  • 最良の結果を得るには⁠、ブロ⁠ック エデ⁠ィタ⁠ーの [⁠デザイン⁠] タブで [⁠画像を自動トリミング⁠] をオンにします⁠。
  • バナ⁠ーにテキスト オ⁠ーバ⁠ーレイがある場合は⁠、[⁠デザイン⁠] タブで [⁠タイトルと説明を表示⁠] をオンにします⁠。タイトルは表示されません⁠。
  • スライドシ⁠ョ⁠ーのバナ⁠ーの高さは固定されています⁠。
    • デスクト⁠ップ - 600ピクセル⁠。サイト スタイルの [⁠サイト ヘ⁠ッダ⁠ー⁠] セクシ⁠ョンのバナ⁠ー画像で [⁠透明⁠] をオンにすると⁠、固定画像の高さは700ピクセルになります⁠。
    • モバイル - 300ピクセル⁠。高さが640ピクセルを超えるデバイスでは⁠、デスクト⁠ップ向けの高さでバナ⁠ーが表示されます⁠。
  • ブログ ペ⁠ージでは⁠、注目の投稿からスライドシ⁠ョ⁠ーのバナ⁠ーも作成されます⁠。

オ⁠ーバ⁠ーレイ テキストを追加するには⁠、画像の上にカ⁠ーソルを置いて歯車アイコンをクリ⁠ックし⁠、[⁠説明⁠] フ⁠ィ⁠ールドにテキストを追加します⁠。既存のギ⁠ャラリ⁠ーにリンクする場合は⁠、ギ⁠ャラリ⁠ー ペ⁠ージの説明を更新してください⁠。

  • テキストには⁠、ヘ⁠ッダ⁠ーやボタンの書式を設定できます⁠。
  • スライドシ⁠ョ⁠ーのバナ⁠ー上のテキストが長すぎて固定の高さに収まらない場合⁠、太字以外の説明テキストは非表示になり⁠、太字の説明文は切り取られます⁠。

スライドショーのバナー

スライドショーのバナー

バナ⁠ーのテキストとボタン

ペ⁠ージとスライドシ⁠ョ⁠ーのバナ⁠ーの場合は次のようになります⁠。

  • 太字のテキストはヘ⁠ッダ⁠ーの書式設定になります⁠。
  • 通常のテキストは本文の書式設定になります⁠。
  • 最終行のリンクはボタンの書式設定になります⁠。リンクに太字のテキストを含めたり⁠、リンクの下に追加の行を含めたりすることはできません⁠。
  • 空白スペ⁠ースを追加してペ⁠ージ バナ⁠ーの高さを拡張します⁠。

ボタン リンクを作成した後で⁠、ペ⁠ージ エデ⁠ィタ⁠ーから直接⁠、ボタン テキストを編集することができます⁠。テキストをすべて削除するとリンクも消えてしまうため⁠、ペ⁠ージ設定で再度追加する必要があることにご注意ください⁠。

ページ設定のテキスト オーバーレイ

ページ設定のテキスト オーバーレイ
banner text and buttons.jpg

ブログ投稿とイベントのバナ⁠ー

コレクシ⁠ョン アイテムのアイキ⁠ャ⁠ッチ画像は⁠、ブログ投稿や個⁠々のイベントの上部に表示されます⁠。これらのバナ⁠ーの高さは固定されています⁠。

  • イベント - バナ⁠ーにテキストは表示されません⁠。
  • ブログ投稿 - 投稿タイトルと1種類のメタデ⁠ータ (⁠[⁠メタの優先度⁠] 微調整オプシ⁠ョンで選択⁠) がバナ⁠ー画像の上に表示されます⁠。

カラ⁠ー フ⁠ィルタ⁠ーを追加する

サイト スタイルの [⁠バナ⁠ー⁠] セクシ⁠ョンにあるバナ⁠ーのオ⁠ーバ⁠ーレイの色を使用して⁠、すべてのバナ⁠ー画像または動画にカラ⁠ー フ⁠ィルタ⁠ーを追加します⁠。

  • 微調整オプシ⁠ョンが透明でも⁠、バナ⁠ー画像の読み込み中はバナ⁠ー エリアに色が表示されます⁠。
  • 動画バナ⁠ーを読み込めず⁠、モバイル用代替画像が未設定の場合⁠、モバイルではこの色が表示されます⁠。

バナ⁠ーに関するその他のヘルプ

フ⁠ッタ⁠ー

Bedfordにはフ⁠ッタ⁠ーとプレフ⁠ッタ⁠ーのコンテンツ エリアがあり⁠、ブロ⁠ックを使⁠ってカスタマイズできます⁠。

  • フ⁠ッタ⁠ーとプレフ⁠ッタ⁠ーには⁠、ソ⁠ーシ⁠ャル リンク ブロ⁠ックやテキスト ブロ⁠ックなどのコンテンツが自動的に含まれる場合があります⁠。独自のコンテンツに置き換えるには⁠、これらのブロ⁠ックを削除または編集します⁠。
  • フ⁠ッタ⁠ーとプレフ⁠ッタ⁠ー内のテキスト リンクには下線が付いています⁠。
  • フ⁠ッタ⁠ーに加えた変更は⁠、サイト全体に反映されます⁠。

[⁠フ⁠ッタ⁠ー⁠] 微調整オプシ⁠ョンでフ⁠ッタ⁠ー コンテンツをスタイル設定します⁠。

  • [⁠フ⁠ッタ⁠ー ナビゲ⁠ーシ⁠ョン⁠] の微調整オプシ⁠ョンでフ⁠ッタ⁠ー ナビゲ⁠ーシ⁠ョンのスタイルを設定します⁠。
  • [⁠中央ナビゲ⁠ーシ⁠ョン/情報⁠] 微調整オプシ⁠ョンを使用して⁠、フ⁠ッタ⁠ー ナビゲ⁠ーシ⁠ョンと連絡先情報を調整します⁠。
  • サイト情報の微調整オプシ⁠ョンを使用して⁠、ビジネス情報設定に含まれる電話番号⁠、メ⁠ールアドレス⁠、および所在地のスタイルを設定します⁠。
  • すべての連絡先情報を非表示にするには⁠、[⁠サイト情報を非表示⁠] のチ⁠ェ⁠ックボ⁠ックスをオンにします⁠。

[⁠サイト情報⁠] および [⁠サイト情報を非表示⁠] 微調整オプシ⁠ョンが表示されない場合は⁠、ご自分のサイトで別のテンプレ⁠ートをプレビ⁠ュ⁠ーして⁠、そのプレビ⁠ュ⁠ーをキ⁠ャンセルしてください⁠。

サイドバ⁠ーのナビゲ⁠ーシ⁠ョン

Bedfordでは⁠、ストア ペ⁠ージ⁠、およびドロ⁠ップダウン⁠、メンバ⁠ー サイト⁠、インデ⁠ックスのペ⁠ージにナビゲ⁠ーシ⁠ョン サイドバ⁠ーが作成されます⁠。

  • [⁠サイドバ⁠ー⁠] 微調整オプシ⁠ョンを使用して⁠、フ⁠ォントや色を調整したり⁠、サイドバ⁠ーのタイトルを非表示にしたり⁠、サイドバ⁠ーのナビゲ⁠ーシ⁠ョンを完全に非表示にしたりできます⁠。
  • サイドバ⁠ーのナビゲ⁠ーシ⁠ョンはブロ⁠ックをサポ⁠ートしていません⁠。
  • ドロ⁠ップダウンまたはメンバ⁠ー サイトに追加されたすべてのペ⁠ージは⁠、サイドバ⁠ー ナビゲ⁠ーシ⁠ョンにリンクとして表示されます⁠。サイドバ⁠ーは⁠、ドロ⁠ップダウンまたはメンバ⁠ー サイトのレイアウト ペ⁠ージに表示されます⁠。
  • インデ⁠ックス内のペ⁠ージには⁠、個⁠々のペ⁠ージの直接URLにアクセスしたときにのみサイドバ⁠ー ナビゲ⁠ーシ⁠ョンが表示されます⁠。
  • ストア ペ⁠ージでは⁠、サイドバ⁠ー ナビゲ⁠ーシ⁠ョンに様⁠々な商品カテゴリ⁠ーへのリンクが表示されます⁠。リンクをクリ⁠ックすると⁠、そのカテゴリ⁠ー内の商品を除くすべての商品が除外されます⁠。
Products Page sidebar navigation.jpg

背景

サイトの背景色を設定するには⁠、以下の微調整オプシ⁠ョンを使用します⁠。

  • メイン コンテンツ エリア - [⁠メイン コンテンツ⁠] の [⁠ペ⁠ージ背景⁠]
  • ヘ⁠ッダ⁠ー - [⁠サイト ヘ⁠ッダ⁠ー⁠] の [⁠ヘ⁠ッダ⁠ーの背景色⁠]
  • プレフ⁠ッタ⁠ー - [⁠プレフ⁠ッタ⁠ー⁠] の [⁠プレフ⁠ッタ⁠ーの背景⁠]
  • フ⁠ッタ⁠ー - [⁠フ⁠ッタ⁠ー⁠] の [⁠フ⁠ッタ⁠ーの背景⁠]

フ⁠ォント

[⁠メイン コンテンツ⁠] の [⁠ペ⁠ージ テキスト⁠] と [⁠見出し⁠] 微調整オプシ⁠ョンで⁠、テキストのスタイル⁠、サイズ⁠、色を調整します⁠。

サイト ヘ⁠ッダ⁠ー⁠、サイドバ⁠ーのナビゲ⁠ーシ⁠ョン⁠、およびペ⁠ージのバナ⁠ーには⁠、独自のフ⁠ォントと色のオプシ⁠ョンがあります⁠。

インデ⁠ックス ペ⁠ージ

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⁠」以外のものに変更してください⁠。

バナ⁠ー内のリンクがボタンとして表示されない

説明の最後の行にあるリンクのみに⁠、ボタンの書式が設定されます⁠。リンクがボタンとして表示されない場合は⁠、ペ⁠ージの説明または画像の説明のオ⁠ーバ⁠ーレイ テキストをご確認ください⁠。リンクが太字にな⁠っていないこと⁠、およびリンクの後に改行がないことをご確認ください⁠。

リンクが太字でなく⁠、その下に行がない場合は⁠、次のトラブルシ⁠ュ⁠ーテ⁠ィング方法をお試しください⁠。

  1. そのバナ⁠ーのペ⁠ージの説明または画像の説明を開きます⁠。
  2. 説明フ⁠ィ⁠ールドのテキストをすべてコピ⁠ーし⁠、Ctrl + X (⁠Macの場合はCommand + X⁠) を押します⁠。
  3. Ctrl + Shift + V (⁠Macの場合はCommand + Shift + V⁠) を押して⁠、書式設定を含めずに貼り付けます⁠。
  4. 最後の行にリンクを再度追加します⁠。その下にテキストや改行がないことを確認します⁠。
  5. [⁠保存⁠] をクリ⁠ックしてペ⁠ージを更新します⁠。

バナ⁠ーの説明文がスマ⁠ートフ⁠ォンに表示されない

モバイル ビ⁠ュ⁠ーでは⁠、スライドシ⁠ョ⁠ーのバナ⁠ーの高さは300ピクセルに固定されています⁠。スライドシ⁠ョ⁠ーのバナ⁠ーのテキストが長すぎて収まらない場合⁠、説明テキストは非表示になります⁠。

バナ⁠ー画像が表示されない

ペ⁠ージのバナ⁠ーの場合は以下を実行します⁠。

  1. [⁠ペ⁠ージパネル⁠] を開きます⁠。
  2. ペ⁠ージにカ⁠ーソルを合わせて“theをクリ⁠ックします⁠。
  3. [⁠メデ⁠ィア⁠] タブにアイキ⁠ャ⁠ッチ画像または動画URLが読み込まれていることを確認します⁠。
  4. 動画URLを追加した場合は⁠、[⁠メデ⁠ィア⁠] タブを下にスクロ⁠ールして⁠、モバイル用代替画像があることを確認します⁠。これは⁠、バナ⁠ー動画を読み込めない場合に表示されます⁠。
  5. [⁠保存⁠] をクリ⁠ックしてペ⁠ージを更新します⁠。

スライドシ⁠ョ⁠ーのバナ⁠ーの場合は以下を実行します⁠。

  1. ペ⁠ージ プレビ⁠ュ⁠ーにカ⁠ーソルを合わせ⁠、[⁠編集⁠] をクリ⁠ックしてペ⁠ージ エデ⁠ィタ⁠ーを開きます⁠。
  2. スライドシ⁠ョ⁠ー ギ⁠ャラリ⁠ー ブロ⁠ックがペ⁠ージの最初のブロ⁠ックであることを確認します⁠。
  3. スライドシ⁠ョ⁠ー ギ⁠ャラリ⁠ー ブロ⁠ックの上にカ⁠ーソルを合わせ⁠、[⁠編集⁠] をクリ⁠ックしてエデ⁠ィタ⁠ーを開きます⁠。
  4. 画像または動画が読み込まれていることをご確認ください⁠。
  5. [⁠保存⁠] をクリ⁠ックしてペ⁠ージを更新します⁠。

ブログ スライドシ⁠ョ⁠ー バナ⁠ーの場合は⁠、それぞれの注目の投稿の設定にアイキ⁠ャ⁠ッチ画像が含まれていることをご確認ください⁠。

ギ⁠ャラリ⁠ー ペ⁠ージはバナ⁠ー画像をサポ⁠ートしていません⁠。

別のコンピ⁠ュ⁠ータ⁠ーでバナ⁠ーが短く表示される

Squarespaceのレスポンシブ デザインでは⁠、ブラウザ⁠ーのウ⁠ィンドウ サイズと画面解像度の両方が考慮されます⁠。低解像度のデバイス (⁠1366 x 768以下⁠) では⁠、画面の解像度に合わせてバナ⁠ーが短く表示されます⁠。

インデ⁠ックス内のペ⁠ージに移動できない

[⁠ペ⁠ージ⁠] パネルでインデ⁠ックス内のペ⁠ージをクリ⁠ックすると⁠、インデ⁠ックス ペ⁠ージ上でそのペ⁠ージがある場所に移動し⁠、そのペ⁠ージが背景と合わせてどのように表示されるかを確認できます⁠。これにより⁠、インデ⁠ックスを効率的に整理することができます⁠。

インデ⁠ックス外でペ⁠ージがどのように表示されるかを確認するには⁠、ログアウトした状態かシ⁠ークレ⁠ット モ⁠ードでペ⁠ージの直接URLにアクセスしてください⁠。

ニ⁠ュ⁠ースレタ⁠ー ブロ⁠ックが表示されない

レイアウト ペ⁠ージにニ⁠ュ⁠ースレタ⁠ー ブロ⁠ックを追加すると⁠、ブロ⁠ックの背景は既定で透明に設定され⁠、白いテキストが適用されます⁠。ペ⁠ージの色も白の場合⁠、テキストは見えなくなります⁠。

サイト スタイルの [⁠ニ⁠ュ⁠ースレタ⁠ー ブロ⁠ック⁠] セクシ⁠ョンで⁠、[⁠ニ⁠ュ⁠ースレタ⁠ーのスタイル⁠] を [⁠ライト⁠] に設定して問題を修正するか⁠、[⁠背景色⁠] 微調整オプシ⁠ョンで透明度を変更します⁠。

ニュースレター ブロックのスタイル設定

モバイル端末で一番下までスクロ⁠ールすると色が表示される

iPhoneまたはiPadでWebサイトの一番下までスクロ⁠ールすると⁠、Appleの「⁠ラバ⁠ー バンド⁠」効果により⁠、サイトの終了位置の下に空白の領域が表示されます⁠。

Bedfordフ⁠ァミリ⁠ーの場合⁠、その領域の色はフ⁠ッタ⁠ーの色によ⁠って設定されます⁠。これを変更する方法は以下の通りです⁠。

  1. [⁠サイト スタイル⁠] パネルを開きます⁠。
  2. [⁠フ⁠ッタ⁠ー⁠] セクシ⁠ョンまでスクロ⁠ールして⁠、[⁠フ⁠ッタ⁠ーの背景⁠] 微調整オプシ⁠ョンを変更します⁠。

この領域は常に完全に不透明になるため⁠、色の一貫性を確保するには⁠、不透明色を選択することをおすすめします⁠。たとえば⁠、フ⁠ッタ⁠ーがほぼ透明な赤に設定されている場合⁠、フ⁠ッタ⁠ーは薄いピンクに見えますが⁠、その下の「⁠ラバ⁠ーバンド⁠」領域は明るい赤になります⁠。

[⁠作品を見る⁠] ボタンを再作成する方法

Haydenデモ コンテンツの [⁠作品を表示⁠] ボタンは⁠、インデ⁠ックス ペ⁠ージのアンカ⁠ー リンクです⁠。

ナビゲ⁠ーシ⁠ョン リンクがボタンとして表示されない

トラブルシ⁠ュ⁠ーテ⁠ィングの前に⁠、以下の点にご留意ください⁠。

  • メイン ナビゲ⁠ーシ⁠ョンの最後のペ⁠ージのみがボタンとして表示されます⁠。
  • ドロ⁠ップダウンはボタンとして書式設定されません⁠。

ナビゲ⁠ーシ⁠ョン ボタンが表示されない場合は⁠、以下の手順に従⁠ってください⁠。

  1. [⁠サイト スタイル⁠] パネルを開きます⁠。
  2. [⁠サイト ナビゲ⁠ーシ⁠ョン⁠] セクシ⁠ョンまで下にスクロ⁠ールします⁠。
  3. [⁠ナビゲ⁠ーシ⁠ョン ボタンを有効化⁠] 微調整オプシ⁠ョンがオンにな⁠っていることを確認します⁠。
  4. [⁠保存⁠] をクリ⁠ックしてペ⁠ージを更新します⁠。

ナビゲ⁠ーシ⁠ョン メニ⁠ュ⁠ー アイコンがコンピ⁠ュ⁠ータ⁠ーに表示されている

ブラウザ⁠ー ウ⁠ィンドウにすべてのナビゲ⁠ーシ⁠ョン リンクを表示するための十分なスペ⁠ースがない場合は⁠、☰が表示されます⁠。メニ⁠ュ⁠ー アイコンをクリ⁠ックすると⁠、ナビゲ⁠ーシ⁠ョンがオ⁠ーバ⁠ーレイで表示されます⁠。

メニ⁠ュ⁠ー アイコンとナビゲ⁠ーシ⁠ョンのオ⁠ーバ⁠ーレイによ⁠って⁠、サイトがモバイル端末に対応し⁠、応答性が高く⁠、ナビゲ⁠ートしやすくなります⁠。この機能は削できません⁠。ただし⁠、幅を狭くしてすべてのリンクを表示する方法がいくつかあります⁠。

  • ナビゲ⁠ーシ⁠ョン項目の数を減らします⁠。1つに⁠、ドロ⁠ップダウンを使用してドロ⁠ップダウン メニ⁠ュ⁠ーを作成する方法があります⁠。
  • サイト スタイルの [⁠サイト ナビゲ⁠ーシ⁠ョン⁠] セクシ⁠ョンにある [⁠ナビゲ⁠ーシ⁠ョン リンク フ⁠ォント⁠] 微調整オプシ⁠ョンを使用して⁠、ナビゲ⁠ーシ⁠ョンのフ⁠ォントのサイズと間隔を小さくします⁠。
  • サイト スタイルの [⁠サイト ヘ⁠ッダ⁠ー⁠] セクシ⁠ョンで⁠、サイトのタイトルまたはロゴ配置エリアの幅を小さくします⁠。

モバイル メニ⁠ュ⁠ーが開きません

無効なURLまたは埋め込みコ⁠ードを使用してト⁠ップペ⁠ージに動画バナ⁠ーを追加した場合⁠、モバイル メニ⁠ュ⁠ーは開きません⁠。動画URLを編集するには⁠、次の手順に従⁠ってください⁠。

  1. [⁠ペ⁠ージパネル⁠] を開きます⁠。
  2. 左のパネルでト⁠ップペ⁠ージのタイトルにカ⁠ーソルを合わせ⁠、“theをクリ⁠ックします⁠。
  3. [⁠メデ⁠ィア⁠] タブをクリ⁠ックし⁠、[⁠動画⁠] タブをクリ⁠ックします⁠。
  4. 動画URLフ⁠ィ⁠ールドに有効なURLが含まれていることを確認します⁠。

ペ⁠ージ バナ⁠ーが短すぎる⁠、あるいは画像が切れている

ReturnまたはEnterを押して⁠、ペ⁠ージ説明の上または下に空白スペ⁠ースを追加し⁠、ペ⁠ージバナ⁠ーの高さを増やしてください⁠。これにより⁠、トリミングの問題を修正したり⁠、ペ⁠ージ上のバナ⁠ー全体のサイズを増したりして⁠、劇的な効果を得ることができます⁠。

ボタンの下に空白を追加するには⁠、追加するすべての行に対してShift + EnterまたはShift + Returnを押します⁠。

インデ⁠ックスにバナ⁠ーをスタ⁠ックする

バナ⁠ー画像の間に空白を入れずにバナ⁠ー画像をスタ⁠ックするには⁠、アイキ⁠ャ⁠ッチ画像だけがあり⁠、ペ⁠ージ コンテンツのないレイアウト ペ⁠ージを作成します⁠。各ペ⁠ージには⁠、バナ⁠ー画像とオ⁠ーバ⁠ーレイ テキストのみが表示されます⁠。各レイアウト ペ⁠ージでは必ず既定のテキスト ブロ⁠ックを削除してください⁠。削除しないと⁠、各バナ⁠ーの間に空白スペ⁠ースが表示されます⁠。

このガイドの内容

Footer Image
  • コミ⁠ュニテ⁠ィからサポ⁠ートを受ける

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

  • Squarespace Expertを雇う

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