レイアウト ページ

白紙ペ⁠ージをカスタマイズするか事前構築されたレイアウトを使用して⁠、サイトにコンテンツを追加します⁠。

最終更新日 2025年1月23日

レイアウト ペ⁠ージは柔軟性のある基本のペ⁠ージです⁠。このペ⁠ージを使用して⁠、テキスト⁠、画像⁠、フ⁠ォ⁠ーム⁠、その他の一般的なペ⁠ージ機能で構成されるカスタム レイアウトをドラ⁠ッグ&ドロ⁠ップ ブロ⁠ックで作成できます⁠。レイアウト ペ⁠ージは⁠、お問い合わせペ⁠ージやAboutペ⁠ージに最適で⁠、一般的にサイトの大部分のコンテンツに適しています⁠。

新しいレイアウト ペ⁠ージを追加するときは⁠、白紙ペ⁠ージ⁠、または特定の用途向けに事前構築されたレイアウトを含むペ⁠ージのどちらかを選択できます⁠。

ヒント

ブログ ペ⁠ージやストア ペ⁠ージなど⁠、サイトに追加できるペ⁠ージの種類についての詳細は⁠、「⁠ナビゲ⁠ーシ⁠ョンにペ⁠ージを追加する⁠」をご覧ください⁠。

動画を見る

この動画はバ⁠ージ⁠ョン7⁠.0用です⁠。

白紙ペ⁠ージを追加する

白紙のレイアウト ペ⁠ージを追加して⁠、ペ⁠ージ レイアウトをゼロからデザインします⁠。ペ⁠ージを追加する方法は⁠、サイトのバ⁠ージ⁠ョンによ⁠って異なります⁠。

  1. [⁠⁠ペ⁠⁠ージ⁠⁠] パネルを開き⁠⁠、[⁠⁠+⁠⁠] をクリ⁠⁠ックします⁠⁠。
  2. [⁠⁠ペ⁠⁠ージ⁠⁠] で⁠⁠、[⁠⁠白紙ペ⁠⁠ージ⁠⁠] をクリ⁠⁠ックします⁠⁠。
  3. ペ⁠⁠ージ タイトルを入力し⁠⁠、Enterキ⁠⁠ーを押して保存します⁠⁠。これは後で変更できます⁠⁠。
  4. ペ⁠⁠ージの左上隅にある [⁠⁠編集⁠⁠] をクリ⁠⁠ックし⁠⁠、[⁠⁠セクシ⁠⁠ョンを追加⁠⁠] をクリ⁠⁠ックしてペ⁠⁠ージ セクシ⁠⁠ョンを追加します⁠⁠。
  5. 白紙セクシ⁠⁠ョンまたは事前構築されたレイアウトを含むセクシ⁠⁠ョンを追加できます⁠⁠。ブロ⁠⁠ックを追加または移動してペ⁠⁠ージをカスタマイズする方法の詳細をご覧ください⁠⁠。
  6. [⁠⁠保存⁠⁠] をクリ⁠⁠ックして変更を保存し⁠⁠、そのまま編集を続けるか⁠⁠、[⁠⁠終了⁠⁠] > [⁠⁠保存⁠⁠] の順にクリ⁠⁠ックしてエデ⁠⁠ィタ⁠⁠ーを閉じます⁠⁠。
  1. [⁠⁠ペ⁠⁠ージ⁠⁠] パネルを開き⁠⁠、[⁠⁠+⁠⁠] をクリ⁠⁠ックします⁠⁠。
  2. [⁠⁠レイアウト⁠⁠] で⁠⁠、[⁠⁠白紙⁠⁠] をクリ⁠⁠ックします⁠⁠。
  3. ペ⁠⁠ージ タイトルを入力し⁠⁠、Enterキ⁠⁠ーを押して保存します⁠⁠。これは後で変更できます⁠⁠。
  4. ペ⁠⁠ージ上にカ⁠⁠ーソルを合わせて [⁠⁠編集⁠⁠] をクリ⁠⁠ックし⁠⁠、挿入箇所をクリ⁠⁠ックしてブロ⁠⁠ックを追加します⁠⁠。ブロ⁠⁠ックを追加または移動してペ⁠⁠ージをカスタマイズする方法の詳細をご覧ください⁠⁠。
  5. [⁠⁠保存⁠⁠] をクリ⁠⁠ックして変更を保存し⁠⁠、そのまま編集を続けるか⁠⁠、[⁠⁠終了⁠⁠] > [⁠⁠保存⁠⁠] の順にクリ⁠⁠ックしてエデ⁠⁠ィタ⁠⁠ーを閉じます⁠⁠。

ヒント

ペ⁠ージにブロ⁠ックを追加するときは⁠、ペ⁠ージ レイアウトがモバイルでどのように表示されるかを考慮してください⁠。

事前構築されたレイアウトを使用してペ⁠ージを追加する (⁠コンピ⁠ュ⁠ータ⁠ーのみ⁠)

事前構築されたプロフ⁠ェ⁠ッシ⁠ョナルなペ⁠ージ デザインと事前に配置されたプレ⁠ースホルダ⁠ー ブロ⁠ックを含むレイアウト ペ⁠ージを追加できます⁠。ブロ⁠ックに独自のコンテンツを追加したり⁠、ブロ⁠ックを削除してペ⁠ージにさらにブロ⁠ックを追加したりして⁠、見た目や雰囲気をカスタマイズできます⁠。ペ⁠ージを追加する方法は⁠、サイトが使用しているSquarespaceのバ⁠ージ⁠ョンによ⁠って異なります⁠。

事前構築されたレイアウトでペ⁠⁠ージを追加する

ペ⁠⁠ージ レイアウトは⁠⁠、タイプに応じてブロ⁠⁠ックをさまざまに組み合わせた⁠⁠、1つ以上のペ⁠⁠ージ セクシ⁠⁠ョンで構成できます⁠⁠。どのレイアウトにも⁠⁠、セクシ⁠⁠ョンやブロ⁠⁠ックをいつでも追加できます⁠⁠。

事前構築されたレイアウトでペ⁠⁠ージを追加する方法は以下の通りです⁠⁠。

  1. [⁠⁠ペ⁠⁠ージ⁠⁠] パネルを開き⁠⁠、[⁠⁠+⁠⁠] をクリ⁠⁠ックします⁠⁠。
  2. [⁠⁠ペ⁠⁠ージ⁠⁠] で [⁠⁠ペ⁠⁠ージ レイアウト⁠⁠] をクリ⁠⁠ックし⁠⁠、[⁠⁠About⁠⁠] や [⁠⁠お問い合わせ⁠⁠] など⁠⁠、目的のレイアウト タイプを選択します⁠⁠。
  3. そのレイアウト タイプのオプシ⁠⁠ョンを参照し⁠⁠、開始点にするレイアウトをクリ⁠⁠ックします⁠⁠。
  4. ペ⁠⁠ージ タイトルを入力し⁠⁠、Enterキ⁠⁠ーを押して保存します⁠⁠。これは後で変更できます⁠⁠。

ペ⁠⁠ージ レイアウトの種類

複数のレイアウト タイプがあり⁠⁠、様⁠⁠々な目的に応じて利用できます⁠⁠。

  • 予約 - Acuity Schedulingブロ⁠⁠ックを使用してオンライン予約オプシ⁠⁠ョンを表示するためのオプシ⁠⁠ョン⁠⁠。
  • お問い合わせ⁠⁠、出欠連絡 - フ⁠⁠ォ⁠⁠ーム⁠⁠、地図⁠⁠、住所⁠⁠、電話番号の様⁠⁠々な組み合わせ⁠⁠。
  • デジタル商品 - テキスト⁠⁠、画像⁠⁠、デジタル商品ブロ⁠⁠ックを様⁠⁠々に組み合わせ⁠⁠、サイト上のゲ⁠⁠ート付きコンテンツへのサインア⁠⁠ップを促す⁠⁠。
  • よくある質問⁠⁠、 プライバシ⁠⁠ー ポリシ⁠⁠ー⁠⁠、 サ⁠⁠ービス利用規約 - 重要な情報を記載するためのテキスト中心のレイアウト⁠⁠。
  • ギ⁠⁠ャラリ⁠⁠ー - ブロ⁠⁠ック セクシ⁠⁠ョンとギ⁠⁠ャラリ⁠⁠ー セクシ⁠⁠ョンを組み合わせたレイアウト ペ⁠⁠ージ⁠⁠。
  • 一般⁠⁠、About⁠⁠、サ⁠⁠ービス⁠⁠、チ⁠⁠ーム - 本文⁠⁠、ヘ⁠⁠ッダ⁠⁠ー⁠⁠、画像を組み合わせた多目的レイアウト⁠⁠。自動レイアウトが含まれる場合あり⁠⁠。
  • メニ⁠⁠ュ⁠⁠ー - レストランのメニ⁠⁠ュ⁠⁠ーを表示するためのテキスト⁠⁠、画像⁠⁠、メニ⁠⁠ュ⁠⁠ー ブロ⁠⁠ックの様⁠⁠々な組み合わせ⁠⁠。
  • レビ⁠⁠ュ⁠⁠ー - 画像と引用ブロ⁠⁠ックの様⁠⁠々な組み合わせを特徴とする⁠⁠、一般的なレビ⁠⁠ュ⁠⁠ー用レイアウト⁠⁠。

事前構築されたレイアウトでペ⁠⁠ージを追加する

事前構築されたレイアウトでペ⁠⁠ージを追加する方法は以下の通りです⁠⁠。

  1. [⁠⁠ペ⁠⁠ージ⁠⁠] パネルを開き⁠⁠、[⁠⁠+⁠⁠] をクリ⁠⁠ックします⁠⁠。
  2. [⁠⁠レイアウト⁠⁠] で⁠⁠、[⁠⁠About⁠⁠] や [⁠⁠お問い合わせ⁠⁠] など⁠⁠、目的のレイアウト タイプを選択します⁠⁠。
  3. 次のペ⁠⁠ージでレイアウト オプシ⁠⁠ョンを参照し⁠⁠、開始点にするレイアウトをクリ⁠⁠ックします⁠⁠。
  4. ペ⁠⁠ージ タイトルを入力し⁠⁠、Enterキ⁠⁠ーを押して保存します⁠⁠。これは後で変更できます⁠⁠。

ペ⁠⁠ージ レイアウトの種類

異なる目的に合わせた様⁠⁠々なレイアウトがあります⁠⁠。

  • About - 本文⁠⁠、ヘ⁠⁠ッダ⁠⁠ー⁠⁠、画像を組み合わせた多目的レイアウト⁠⁠。
  • 予約 - Acuity Schedulingブロ⁠⁠ックなどのオンライン予約オプシ⁠⁠ョンを表示するためのオプシ⁠⁠ョン⁠⁠。
  • お問い合わせ - フ⁠⁠ォ⁠⁠ーム⁠⁠、地図⁠⁠、住所⁠⁠、電話番号の様⁠⁠々な組み合わせのレイアウト⁠⁠。
  • 詳細 - テキストと画像を組み合わせて様⁠⁠々な列や行に配置した多目的レイアウト⁠⁠。
  • フ⁠⁠ィ⁠⁠ーチ⁠⁠ャ⁠⁠ー - 注目の商品⁠⁠、サ⁠⁠ービス⁠⁠、または商品の詳細なレイアウト⁠⁠。
  • 画像 - 多岐にわたるギ⁠⁠ャラリ⁠⁠ー用スタイルを作成できる⁠⁠、画像ブロ⁠⁠ックの様⁠⁠々なレイアウト⁠⁠。画像ナビゲ⁠⁠ーシ⁠⁠ョンの作成に最適⁠⁠。
  • チ⁠⁠ーム - 顔写真⁠⁠、名前⁠⁠、経歴の様⁠⁠々な組み合わせを表示するチ⁠⁠ーム ペ⁠⁠ージ用の一般的なレイアウト⁠⁠。

ペ⁠ージ レイアウトのプレ⁠ースホルダ⁠ー ブロ⁠ックを更新する

レイアウトは開始点⁠、ブロ⁠ックはペ⁠ージをさらにカスタマイズするためのツ⁠ールとお考えください⁠。レイアウトを変更すべきか迷⁠っている場合は⁠、ペ⁠ージを複製して非公開にし⁠、テスト ペ⁠ージとして使用できます⁠。

プレ⁠ースホルダ⁠ー ブロ⁠ックを独自のコンテンツに置き換える方法は以下の通りです⁠。

  • コンピ⁠ュ⁠ータ⁠ーで⁠、プレ⁠ースホルダ⁠ー画像⁠、テキスト⁠、またはその他のコンテンツをダブルクリ⁠ックして編集します⁠。
  • Squarespaceアプリで⁠、[⁠編集⁠] または鉛筆アイコンをタ⁠ップし⁠、任意のブロ⁠ックをタ⁠ップして編集します⁠。アプリでは一部のブロ⁠ック タイプは編集できないことに注意してください⁠。
  • または⁠、プレ⁠ースホルダ⁠ー ブロ⁠ックを削除して新しいブロ⁠ックを追加することもできます⁠。

ブロ⁠ックのタイプを確認するには⁠、ペ⁠ージの [⁠編集⁠] をクリ⁠ックし⁠、ブロ⁠ックにカ⁠ーソルを合わせるかタ⁠ップします⁠。Squarespaceでブロ⁠ックを使用する方法の詳細については⁠、以下のガイドをご参照ください⁠。

レイアウト ペ⁠ージを編集する

既存のレイアウト ペ⁠ージを編集する方法は以下の通りです⁠。

  1. [⁠⁠ペ⁠⁠ージ⁠⁠] パネルを開きます⁠⁠。
  2. ペ⁠⁠ージ パネルでペ⁠⁠ージを選択します⁠⁠。
  3. ペ⁠⁠ージで [⁠⁠編集⁠⁠] をクリ⁠⁠ックします⁠⁠。
  1. [⁠⁠その他⁠⁠] をタ⁠⁠ップし⁠⁠、[⁠⁠ペ⁠⁠ージ⁠⁠] をタ⁠⁠ップします⁠⁠。
  2. サイトがバ⁠⁠ージ⁠⁠ョン7⁠⁠.1の場合⁠⁠、編集したいペ⁠⁠ージのタイトルをタ⁠⁠ップし⁠⁠、[⁠⁠プレビ⁠⁠ュ⁠⁠ー⁠⁠] をタ⁠⁠ップします⁠⁠。サイトのバ⁠⁠ージ⁠⁠ョンが7⁠⁠.0の場合は⁠⁠、ペ⁠⁠ージのタイトルをタ⁠⁠ップしてエデ⁠⁠ィタ⁠⁠ーを開きます⁠⁠。
  3. [⁠⁠編集⁠⁠] をタ⁠⁠ップするか⁠⁠、鉛筆アイコンをタ⁠⁠ップします⁠⁠。

ペ⁠ージ設定の編集

ペ⁠ージ設定を使用して⁠、ペ⁠ージのタイトル⁠、説明⁠、URL⁠、アイキ⁠ャ⁠ッチ画像⁠、その他のオプシ⁠ョンを編集できます⁠。

  1. [⁠⁠ペ⁠⁠ージ⁠⁠] パネルを開きます⁠⁠。
  2. [⁠⁠ペ⁠⁠ージ⁠⁠] パネルでペ⁠⁠ージ名にカ⁠⁠ーソルを合わせます⁠⁠。
  3. 歯車アイコン をクリ⁠⁠ックします⁠⁠。
  4. ペ⁠⁠ージ設定の編集が終わ⁠⁠ったら⁠⁠、[⁠⁠保存⁠⁠] をクリ⁠⁠ックします⁠⁠。
  1. [⁠⁠その他⁠⁠] をタ⁠⁠ップし⁠⁠、[⁠⁠ペ⁠⁠ージ⁠⁠] をタ⁠⁠ップします⁠⁠。
  2. サイトのバ⁠⁠ージ⁠⁠ョンが7⁠⁠.1の場合は⁠⁠、編集したいペ⁠⁠ージの横にある歯車アイコンをクリ⁠⁠ックします⁠⁠。バ⁠⁠ージ⁠⁠ョン7⁠⁠.0のサイトでは⁠⁠、ペ⁠⁠ージをタ⁠⁠ップし⁠⁠、⁠⁠.⁠⁠.⁠⁠.をタ⁠⁠ップします⁠⁠。
  3. ペ⁠⁠ージ設定の編集が終わ⁠⁠ったら⁠⁠、[⁠⁠保存⁠⁠] をタ⁠⁠ップします⁠⁠。

レイアウト ペ⁠ージのスタイル設定を行う

[⁠サイト スタイル⁠] パネルを使用して⁠、サイト全体のスタイル微調整を行います⁠。これはレイアウト ペ⁠ージの外観に影響します⁠。詳細については⁠、「⁠スタイルを変更する⁠」をご参照ください⁠。

サイトのバ⁠ージ⁠ョンによ⁠っては⁠、レイアウト ペ⁠ージに影響を与えるオプシ⁠ョンが他にも存在する場合があります⁠。

ペ⁠⁠ージ セクシ⁠⁠ョンには⁠⁠、セクシ⁠⁠ョン固有のスタイル オプシ⁠⁠ョンがあります⁠⁠。セクシ⁠⁠ョン スタイルを設定するには⁠⁠、ペ⁠⁠ージ上で [⁠⁠編集⁠⁠] をクリ⁠⁠ックし⁠⁠、ペ⁠⁠ージ セクシ⁠⁠ョン上の鉛筆アイコンをクリ⁠⁠ックします⁠⁠。

レイアウト ペ⁠⁠ージには独自のスタイル微調整オプシ⁠⁠ョンはありませんが⁠⁠、一部のテンプレ⁠⁠ートには特別な機能があり⁠⁠、これらはレイアウト ペ⁠⁠ージに表示されます⁠⁠。

次のステ⁠ップ

レイアウト ペ⁠ージを追加したら⁠、以下を行うことをおすすめします⁠。

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

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

  • Squarespace Expertを雇う

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