ブロックをクリックして新しい位置にドラッグすると、Webサイト上のコンテンツを並べ替えることができます。

ページ上でブロックを移動してレイアウトをカスタマイズしたり、列や行を作成したりします。このガイドは、Squarespaceを初めて使用する場合に最初に読むことをおすすめしているガイド、「ブロックを使用してコンテンツを追加する」の次のステップです。

注: ブロックは、追加されたページ コンテンツ エリア内で移動できます。ブロックをページ間や、フッターやブログ投稿といったコンテンツ エリア間で移動することはできません。

動画を見る

この動画では、クラシック エディターで説明しています。

ブロックを移動する

Squarespaceのどこにブロックを追加しても、ブロックを移動してレイアウトをカスタマイズできます。ブロックを移動する方法は以下のとおりです。

ヒント: できるだけ多くのユーザーがサイトのコンテンツにアクセスできるようにするには、Squarespaceのアクセシビリティ リソースを参照してください。

創造エディターのレイアウト

Squarespaceで現在使用されているブロック編集機能は、創造エディターと呼ばれています。バージョン7.1のサイトで、レイアウト ページ、ポートフォリオ サブページ、フッターなど、ブロック セクションを追加できるすべてのエリアでサポートされています。創造エディターのリリース前に追加されたコレクション アイテムとブロック セクションでは、クラシック エディターを使用します。

創造エディターのグリッド システムにより、ブロックを移動すると、その周囲のブロックもわずかに移動する場合があります。これは、セクション レイアウトの全体的なバランスを維持するために行われます。

創造エディターでは、コンピューター ビューとモバイル ビューを別々に設定することに注意してください。

ブロックを中央に配置する

ブロックを水平方向の中央に配置するには、ブロックをクリックしてセクションの中央に向かってドラッグし、グリッドの中心を通る黄色い線が垂直に表示されたらブロックを離します。ブロックは、セクションの中央に配置されるよう、わずかにサイズが変更される場合があります。

ブロックをフルブリードにする

創造エディターのグリッドの外側にブロックを移動させると、セクションのコンテンツ幅の端に合うようにリサイズされます。これにより、フルブリード効果が生まれます。塗りつぶしに設定された画像ブロックなど、特定のブロックでは、別の方法でトリミングしないとこの効果が生まれない場合があります。

コンテンツの配置とオーバーラップを設定する

創造エディターでブロックを新しい場所に移動すると、ブロックのツールバーが表示されます。

• ブロックの内容をブロックの境界線内で水平、垂直、またはその両方に揃えるには、ブロックのツールバーの整列アイコンをクリックします。画像ブロックや塗りつぶしに設定されたボタン ブロックなど、一部のブロックには配置オプションがありません。
• ブロックがオーバーラップしている場合、ツールバーに [前に移動] と [後ろに移動] アイコンが表示され、どちらのブロックを一番上に置くかを設定できます。オーバーラップしているブロックが多数ある場合、ブロックを一番前方または後方に移動するには、複数回クリックする必要がある場合があります。
• オーバーラップするブロック上のブロック コンテンツをより見やすくするには、対象ブロックに背景色を追加します。

複数のブロックを同時に配置する

セクションの背景をクリックしてドラッグすると、複数のブロックがハイライト表示されます。このハイライト表示されたすべてのブロックを、同時に移動または配置します。

• ハイライト表示された複数のブロックを同時に移動するには、いずれかのブロックをクリックしてドラッグします。これにより、ハイライト表示されたすべてのブロックが現在のレイアウトを維持しながら同時に移動します。
• ハイライト表示されているすべてのブロックを同時に整列させるには、ツールバーに表示される [グループを整列] ボタンをクリックします。次に、配置オプションのいずれかを選択します。
• ハイライト表示されたすべてのブロックを前後に移動するには、ツールバーに表示される [後ろに移動] または [前に移動] ボタンをクリックします。
• ハイライト表示されたすべてのブロックのサイズを変更するには、ブロックのアウトライン内の四角形の1つにカーソルを移動します。カーソルが矢印に変わったら、ブロックをクリックしてドラッグし、拡大または縮小します。

創造エディター セクション内のすべてのブロックを同時にハイライト表示して移動するには、Command + AまたはControl + Aを押してから、それらをクリックしてドラッグします。

クラシック エディターのレイアウト

バージョン7.0サイトのすべてのブロック エリアでは、クラシック エディターが使用されます。また、バージョン7.1のサイトの一部のエリアでも使用されます。

• ブログ投稿、イベント、および商品の追加情報
• 創造エディターのリリース前に追加されたブロック セクション

ブロックの移動

クラシック エディターをサポートするほとんどのエリアでは、グリッドは最大12列、行数に制限はありません。フッターなどの一部のエリアでは、異なる制限が適用される場合があります。

• グリッド内の位置を変更する際、ブロックをクリックしてドラッグすると、ブロックが半透明に表示されます。
• ブロックを移動させるときにガイドラインと呼ばれる線が表示され、ブロックを配置する場所を示します。これらは、列と行を作成する場合に特に便利です。
• プル クオートを作成する際と同様、テキスト エリアにブロックをフローティングさせると、ブロックが配置されている場所に灰色のボックスが表示され、テキストがどのように折り返されるかが示されます。

ブロックを配置する

ブロックをドラッグすると、ブロックを放したときにどのようになるかを示すガイドラインが表示されます。

• コンテンツ エリアの高さの垂直線 - ブロックはページの高さいっぱいに広がり、新しい列が作成されます
• コンテンツ エリアの幅の水平線 - ブロックはページの幅全体に広がり、新しい行が作成されます
• 別のブロックの高さまたは幅に合わせた線 - ブロックは既存の列または行に、そのブロックと同じ高さまたは幅で追加されます

ブロックを列と行に分ける

線ブロックとスペース調整ブロックは、コンテンツを列や行に分ける際に便利なツールです。

• テキスト ブロックは重ねると結合されることが多いため、線ブロックやスペース調整ブロックを使用してテキストを分割し、結合しないようにします。詳しくは、以降のテキスト ブロックに関するセクションをご参照ください。
• ページまたはコンテンツ エリアのレイアウト中に、線ブロックとスペース調整ブロックを使用してコンテンツを一時的に分離することもできます。線ブロックまたはスペース調整ブロックを使用して行を分割し、ブロックを追加して新しい平行列を作成します。コンテンツを配置したら、線ブロックまたはスペース調整ブロックを削除します。テキスト ブロックは、線ブロックまたはスペース調整ブロックを削除すると結合されます。

モバイル レイアウト

モバイル ブラウザー上でブロックがどのように配置されるかは、ブロックで使用されるエディターによって異なります。

• 創造エディター - モバイルとコンピューターのレイアウトは別々です。ページのモバイル レイアウトを表示および編集するには、右上隅にあるモバイル ビュー アイコンをクリックします。コンピューター レイアウトでブロックを移動しても、モバイル レイアウトには影響しません。
• クラシック エディター - コンピューター レイアウトとモバイル レイアウトを別々に編集することはできません。モバイル レイアウトはコンピューター レイアウトと同じになり、ブロックは小型の端末に合わせて自動的に再配置されます。

列と行を作成する

サイトには、一般的な種類のコンテンツを含む列と行を自動的に作成するためのオプションが多数用意されています。時間をかけてコンテンツを追加していけば、手作業で何度も並べ替える必要はありません。きれいで一貫性のある列と行を作るため、以下のオプションを使用することをおすすめします。

• 自動レイアウト (バージョン7.1) - 画像、テキスト、ボタン
• ギャラリー セクション (バージョン7.1) - 画像とテキスト
• ギャラリー ブロック - 画像とテキスト
• 概要ブロック - ブログなどのコレクション ページから取得した画像やテキスト

ただし、他の種類のコンテンツを含む列と行を作成する必要がある場合や、上記のオプションでサポートされていないレイアウトで作成する必要がある場合は、ブロックのセットを使用して列と行を作成できます。

• 創造エディター - ブロックを所定の位置に配置し、グリッド ガイドラインに従ってサイズを変更して列と行の一貫性を保ち、必要に応じてモバイル レイアウトを別の列と行に配置します。
• クラシック エディター - 列と行の作成方法はもう少し複雑になります。以降で、クラシック エディターで列と行を手動で作成する方法について説明します。

この動画ではバージョン7.0について説明していますが、バージョン7.1のクラシック エディターにも適用されます。

クラシック エディターで列を作成する

列はコンテンツ エリアの高さ全体に表示することも、既存の行のブロックに合わせて高さに合わせた列を作成することもできます。列を作成する方法は以下のとおりです。

1. 移動するブロックにカーソルを合わせます。カーソルが手のアイコンに変わります。手が表示されない場合は、まずブロックをクリックしてください。
2. ブロックをクリックしてドラッグし、ページ内で動かします。
3. ブロックを移動すると、そのブロックが占める新しい列を示すガイドラインが表示されます。
4. 以下の手順に従って、列をページ全体または一致する高さの列に追加します。

ページ全体に列を作成する

ページの高さいっぱいに広がる新しい列を作成するには、ブロックをクリックして、ガイドラインがページ全体に垂直に伸びるまでドラッグします。これにより、ページ全体を分割する新しい列が作成されます。

一致する高さの列を作成する

新しい列を別のブロックの高さに一致させるには、ガイドラインが他のブロックの高さと一致するまでブロックをクリックしてドラッグします。これは、より幅の広いブロックの上または下にブロックを横並びに配置する場合に便利です。

列幅を変更する

すべて同じ幅の列を作成するには、次のいずれかの列数が必要です。

• 1
• 2
• 3
• 4
• 6
• 12

列の数が異なると、幅も異なります。このルールは、サイドバーと一部のフッターを除く、サイトのすべてのコンテンツ エリアに適用されます。

列の幅を変更する方法は以下のとおりです。

1. 2つのブロックの間にカーソルを移動すると、左右を指す2つの矢印が表示されます。
2. クリックしてドラッグし、列を拡大および縮小します。
3. これにより、列の幅と両方のブロックの全体的なサイズが変更されます。
4. 必要に応じて、行内の他のブロックの間隔でも繰り返します。

クラシック エディターで行を作成する

行はコンテンツ エリアの幅全体に広げるか、既存の列のブロックと整列してスタックを作ることができます。行を作成する方法は以下のとおりです。

1. 移動するブロックにカーソルを合わせます。カーソルが手のアイコンに変わります。手が表示されない場合は、まずブロックをクリックしてください。
2. ブロックをクリックしてドラッグし、ページ内で動かします。
3. ブロックを移動すると、ブロックが占める列または行を示すガイドラインが表示されます。
4. 以下の手順に従って、ブロックをページ全体の行または整列させる行に配置します。

ヒント: 画像ブロック、スペース調整ブロック、地図ブロック、カルーセル ギャラリー ブロックには、ブロックの高さを調整するためのトリミング ハンドルがあります。これらのブロックを使用して、ページ上の行の高さをカスタマイズします。

ページ全体に行を作成する

ページまたは投稿全体にまたがる新しい行を作成するには、ブロックをクリックしてドラッグし、ガイドラインをページ全体に水平に広げます。

幅が同じ行を作成する

別のブロックの幅に合わせるには、ガイドラインが既存のブロックの幅に合わせて縮小されるまで、ブロックを別のブロックの上または下に移動します。このアクションは、ページ全体に行全体を作成するのではなく、個々のブロックを積み重ねます。

クラシック エディターでテキストのみの列と行を作成する

テキストを列や行に移動するのは難しい場合があります。テキスト ブロックは多くの場合、積み重ねると結合されます。ページの構築中にスペース調整ブロックを使用してコンテンツを分離することで、これを回避できます。

テキスト列

テキストを列内に移動させることで、コンテンツを視覚的に分割したり、テキストを画像ブロックなどの他のブロックと対にしたりするのに最適な方法です。テキスト列を作成する方法は以下のとおりです。

1. ページ上の任意の場所に最初のテキスト ブロックを追加します。
2. スペース調整ブロックを追加するには、ページ上の任意の場所にある挿入箇所をクリックします。最初のテキスト ブロックの横にあるブロックをクリックしてドラッグします。

3. 次のテキスト ブロックを追加する場合は、ページ上の任意の場所にある挿入箇所をクリックします。テキスト ブロックは配置後に移動させることが難しい場合があるため、ブロック メニューから直接テキスト アイコンをクリックしてドラッグします。すでに配置されているブロックを移動する場合と同様に、ガイドラインが表示されます。
4. テキスト アイコンをスペース調整ブロックに向かってドラッグし、ガイドラインを同じ高さまで縮小し、指を離してテキストを追加します。

5. 必要な数のテキスト列に対して、スペース調整ブロックとテキスト ブロックを追加する手順を繰り返します。
6. すべてのテキスト列を配置したら、スペース調整ブロックを削除してテキスト列のみを残します。

テキスト行

テキスト ブロックを積み重ねると、多くの場合、1つのブロックに結合されます。これらのブロックを互いに独立したままにしておくには、テキストを線ブロックまたはスペース調整ブロックで分割することをおすすめします。より明確なスペースが必要な場合は、線ブロックを使用します。オープン スペースの場合は、スペース調整ブロックを使用してください。

クラシック エディターで列と行を組み合わせる

ページをカスタマイズするには、列と行を組み合わせる必要があります。よくある例としては、会社概要のページで、テキスト ブロックとそれに対応する画像ブロックを均等に並べたい場合があります。この例では、3つの画像ブロックと3つのテキスト ブロックを組み合わせています。

列と行を結合する方法は以下のとおりです。

1. 前述の同じ高さの列を作成する手順に従って、それぞれ別の列に3つの画像ブロックを追加します。
2. 各画像ブロックの下にテキスト ブロックを追加します。ガイドラインが上の画像ブロックと一致していることを確認します。これにより、各画像の下の既存の列に新しい行が作成されます。

タイトルが必要な場合は、画像ブロックに合わせて配置された追加のテキスト ブロックを使用して、各列の上部にタイトルを追加します。

クラシック エディターでの列と行に関するトラブルシューティング

画像のサイズが異なる

最良の結果を得るには、アップロードする前に、使用している各画像の縦横比が同じであることを確認しておくとよいでしょう。通常、幅が1500ピクセル以上の画像を使用することをおすすめします。画像の調整方法については、「Webで表示する画像の書式設定を行う」をご参照ください。

列と行のレイアウトがモバイル端末に表示されない

サイトの読みやすさを維持し、訪問者がコンテンツを表示するためにピンチ、ズーム、スクロールする必要がないように、Squarespaceのレスポンシブ デザインでは、モバイル端末上でブロックが自動的にスタックされます。ブロックの順序は、列と行の構造によって異なります。

詳細については、「クラシック エディターを使用してモバイルでブロックを積み重ねる方法」をご覧ください。