縦に積み上げられたコンテンツ セクションを追加およびカスタマイズして、各ページの構造を作成します。

カスタマイズ可能なセクションを縦に積み重ねてサイトのページとフッターを作成します。セクションを追加、削除、移動して、コンテンツを配置できます。このガイドでは、ページ セクションでできることと、ページ セクションを使用して独自のページ レイアウトを作成する方法について説明します。

セクションを追加するための新しいページを作成する方法については、「ナビゲーションにページを追加する」を参照してください。

ヒント: このガイドはバージョン7.1用です。バージョン7.0で同様の効果を得るには、スタック インデックスを使用します。

動画を見る

セクションを追加および編集する

新しいページを追加すると、白紙ページでない限り、事前構築されたセクションが少なくとも1つ表示されます。既存のページにセクションを追加することもできます。セクションを追加および編集する方法は、コンピューターで編集するか、Squarespaceアプリで編集するかによって異なります。

追加できるセクションの数に制限はありませんが、ページのコンテンツが多くなると読み込みに時間がかかるため、1ページに追加するセクションの数は20個以下にすることをおすすめします。詳細については、「サイトの読み込みが遅い」を参照してください。

セクションにコンテンツを追加する

コンテンツの追加方法とスタイルの設定方法はセクションによって異なります。これには次の3つのタイプがあります。

• ブロック セクション - ブロックを使用してレイアウトをカスタマイズします。
• 自動レイアウト セクション - コンテンツのセットを追加し、リストまたはギャラリーに自動的に配置します。
• コレクション ページのセクション - コレクション アイテムを表示します。たとえば、ブログ ページにはブログ投稿を表示するコレクション セクションがあります。

どのページにもブロック セクションと自動レイアウト セクションを追加できます。コレクション ページのセクションは、そのページに固有のものです。

ブロック セクション

ブロックを使用して、テキスト、画像、ボタン、フォームなどのコンテンツをサイトに追加することができます。ブロック セクションにコンテンツを追加してスタイルを設定するには、次の手順に従ってください。

• ブロックを追加または移動して、レイアウトをカスタマイズします。
• ブロックにコンテンツを追加するには、ブロックをダブルクリックします。
• ブロックを削除するには、ブロックをクリックしてからゴミ箱アイコンをクリックします。保存後は、ブロックを復元することはできません。
• セクションのスタイルを変更するには、[セクションを編集] をクリックします。

通常、サイト上のほとんどのセクションはブロック セクションになります。ブロック セクションでは、創造エディターとクラシック エディターの2つの編集エクスペリエンスのいずれかを使用します。

創造エディター

創造エディターは、Squarespaceの最新のコンテンツ編集エクスペリエンスです。これは、新しい白紙セクションまたは事前構築されたレイアウトを含むブロック セクションを追加する場合に便利です。セクションが創造エディターを使用しているか不明な場合は、編集中に右上隅にある [ブロックを追加] ボタンを確認してください。

創造エディターでは、柔軟なグリッドをクリックしてドラッグすることで、ブロックの配置やサイズ変更を行うことができます。ブロックは互いに重ねられるので、独自のレイアウトを作成できます。

クラシック エディター

創造エディターのリリース前にブロック セクションを追加した場合は、クラシック エディターが使用されています。クラシック エディターは、ブログ投稿など、サイトの他の領域でも使用されます。セクションがクラシック エディターを使用しているか不明な場合は、ページ上のブロックにカーソルを合わせて、各ブロックの上または下に+アイコンが表示されるかどうか確認してください。これらは挿入箇所です。

クラシック エディターで新しいブロック セクションを追加する方法は、以下の通りです。

1. ページ上で [編集] をクリックし、[セクションを追加] をクリックします。
2. セクション タイプのリストの一番下までスクロールします。
3. [空のセクションを追加 (クラシック エディター)] をクリックします。

クラシック エディターのブロック セクションを創造エディターにアップグレードするには、[更新] をクリックします。詳細については、「創造エディター、Squarespaceの最新のコンテンツ編集エクスペリエンス」を参照してください。

自動レイアウト セクション

自動レイアウトを使えば、画像やテキストなどのコンテンツのセットを、コンテンツを追加すると自動的に更新される視覚的に印象的なレイアウトで追加できます。これらのセクションには、セクション ピッカーにiバッジが表示されます。

詳細については、「自動レイアウト」を参照してください。

ギャラリー セクション

ギャラリー セクションは、テキストが少ない画像を表示するのに適した自動レイアウトの一種です。詳細については、「ギャラリー セクション」を参照してください。

コレクション ページのセクション

ブログ投稿やイベントなどのアイテムのコレクションを表示するには、コレクション ページを使用します。ブログ、イベント、ポートフォリオ、ストア ページは、すべてコレクション ページです。詳細については、「コレクション ページのセクション」を参照してください。

フッター セクション

ブロック セクションを使用してフッターを作成します。フッターにカーソルを合わせ、[フッターの編集] をクリックしてセクションを追加・編集します。空白のブロック セクションを追加したり、事前に構築されたブロック レイアウトでフッター スタイルのセクションを追加したりできます。フッターに他のセクション タイプを追加することはできません。

詳細については、「フッターを編集する」をご参照ください。

新しいレイアウトを試す

セクションで創造エディターを使用している場合は、レイアウト スイッチャーを使用して新しいレイアウトを自動的に試すことができます。ページの編集中に、セクションにカーソルを合わせ、[レイアウトを表示] ボタンをクリックします。

試したいレイアウトのプレビューをクリックすると、セクションの内容が自動的に再配置され、[保存] をクリックすると、新しいレイアウトが保持されます。元のレイアウトに戻す場合は、[元に戻す] をクリックします。

セクションのスタイルを変更する

[サイト スタイル] パネルでセクションをサイト全体のスタイルに合わせたり、個々のセクションのレイアウト、背景、色を編集してページに多様性やコントラストを加えたりすることができます。

個々のセクションのスタイルを設定するには、ページ上の [編集] をクリックし、セクションにカーソルを合わせて、[セクションの編集] もしくは鉛筆アイコンをクリックします。ブロック セクションには、[デザイン]、[背景]、[色] の3つのタブがあります。セクションがクラシック エディターと創造エディターのどちらを使用しているかによって、デザイン タブのオプションが異なります。

デザイン (クラシック エディター)

クラシック エディターの [デザイン] タブでは、以下の詳細を変更できます。

• コンテンツの配置位置 - 上端に沿うか、下端に沿うか、もしくは上下から等距離に配置されるなど、コンテンツがセクションの境界線とどのように配置されるか
• コンテンツの幅 - セクションの幅に対し、コンテンツの幅がどの程度占めるかを設定します。
• セクションの高さ - ページに表示されるセクションの高さ。コンテンツが多いセクションは、設定よりも高い高さで表示される場合があります。これは、セクションのコンテンツの上下のパディングの量にも影響します。
• スタイリング - セクションの下部の境界線をどのように表示するか。仕切りトグルをオンに切り替えると、独自のセクションの仕切りが追加されます。

デザイン (創造エディター)

創造エディター セクションのスタイル設定オプションの一覧については、「創造エディターによるサイトの編集」を参照してください。

背景

[背景] タブでは、背景画像、動画、アートを追加できます。背景コンテンツは、セクションの端から端までフルブリードで表示することも、はめ込みで表示することもできます。オプションの詳細については、次のガイドを参照してください。

• セクションの背景画像とエフェクト
• 背景動画の追加
• セクションの背景用アート

色

[色] タブで、セクションのカラー テーマを選択し、カスタマイズすることができます。カラー テーマを変更すると、そのテーマを使用しているサイトのすべてのセクションに影響することに注意してください。詳細については、「色を変更する」を参照してください。

その他のセクション

自動レイアウト セクションとコレクション ページ セクションのスタイル オプションの詳細については、以下のガイドを参照してください。

• 自動レイアウト
• ギャラリー セクション
• Squarespaceでブログを運営する
• イベント ページ
• 創造エディター、Squarespaceの最新のコンテンツ編集エクスペリエンス
• ポートフォリオ ページ
• セクションを保存する

セクションの仕切り

セクション スタイルの [フォーマット] タブで仕切りトグルをオンにすると、セクションの下部に境界線が追加されます。ブロック セクション、自動レイアウト、ギャラリー セクションに仕切りを追加できます。

セクションの仕切りをカスタマイズするには、以下の手順に従ってください。

• 図形 - シャッフル アイコンをクリックして設定をランダムにするか、設定アイコンをクリックして図形を選択し、設定を手動で変更します。
• ストローク - 仕切りに実線の境界線、点線の境界線、もしくは境界線なしを選択します。
• 色 - 境界線の色をサイト全体のパレットから選択します。
• 太さ - 小、中、大のオプションで境界線の太さを設定します。...をクリックし、手動で仕切りの太さを変更します。

サイトの最初のセクション仕切りを作成すると、その仕切りの設定が後で作成する仕切りに適用されます。セクションの仕切りを異なるものにしたい場合は、上記の設定を使ってそれぞれをカスタマイズします。

仕切りのないセクション

ブログ、イベント、ポートフォリオ、動画セクションなど、セクション区切りをサポートしていないセクションがページに含まれている場合は、空白のブロックセクションでセクション区切りの外観を再現できます。

1. セクションの区切り線をサポートしていないセクションがあるページの [編集] をクリックします。
2. そのセクションの下の [セクションを追加] にカーソルを合わせます。
3. [空のセクションを追加] をクリックします。
4. 空白のセクションにカーソルを合わせ、[セクションを編集] をクリックします。
5. [高さ] を小に設定し、[仕切り] トグルをオンにします。
6. 必要に応じて仕切りをスタイリングします。このセクションにブロックを追加しないでください。

このセクション仕切りは、組み込みのセクション仕切りとまったく同様に上記のセクションと相互作用しないことに注意してください。たとえば、サポートされていないセクションに背景画像がある場合、仕切りは画像に直接接するのではなく、画像の下に表示されます。

セクションを保存する

再利用したいページ セクション レイアウトを作成したら、セクションにカーソルを合わせてハート アイコンをクリックし、保存セクションに追加します。

セクションを保存すると、レイアウトの「スナップショット」が作成され、いつでも追加できるようになります。これは、複数のページで特定のレイアウトを再利用する必要があるWebサイトに最適です。

保存済みセクションを使用するには、以下の手順に従ってください。

1. ページ上で [編集] をクリックし、[セクションを追加] をクリックします。
2. [自分の保存済みセクション] をクリックします。
3. 追加したい保存済みセクションを選択します。
4. レイアウトに変更を加えます。

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

• サイトには、最大50個のセクションを保存できます。
• 保存したセクションは、元のセクションにリンクされません。元のセクションを更新しても、保存されたバージョンや、追加した他の場所は更新されません。
• 保存されたセクションでは、コンテンツとデザイン エレメントが保持されます。フォームやニュースレター ブロックのストレージ接続など、一部の設定は元のセクションから引き継がれません。保存されたセクションのすべてのフォームとニュースレターのストレージを手動で設定してください。
• コレクション ページのセクションやフッター セクションを保存することはできません。また、保存したセクションをフッターに追加することもできません。

保存したセクションを削除する

保存したセクションからセクションを削除するには、以下の手順に従ってください。

1. ページ上で [編集] をクリックし、[セクションを追加] をクリックします。
2. [自分の保存済みセクション] をクリックします。
3. 1つまたは複数のセクションの左上にあるボックスにチェックを入れます。
4. [削除] をクリックします。これは取り消すことはできません。

セクション間でコンテンツを移動する

コンテンツを移動するには、次の手順に従ってください。

• クラシック エディターのブロック セクション - ブロックをドラッグして、同じページのあるブロック セクションから別のブロック セクションに移動します。創造エディターのブロック セクション間でブロックを移動することはできません。
• セクションの自動レイアウト - リストやギャラリー画像を再利用して、別のリストやギャラリー セクションに追加します。
• コレクション セクション - ブログ投稿、イベント、商品をあるコレクションから同じタイプの別のコレクションに移動します。現在、ポートフォリオ プロジェクトの移動はできません。