サイト上のコンテンツ ブロックを大きくまたは小さく変更します。

ブロックのサイズはいつでも変更できます。これにより、レイアウトを変更したり、新しい方法でコンテンツを表示したりできます。ブロックのサイズを変更する方法はエディターによって異なります。また、ブロックごとにサイズ変更の動作が異なる場合があります。このガイドでは、ブロックのサイズを変更する方法をいくつか説明します。

このガイドの例ではレイアウト ページを使用していますが、サイトのさまざまな領域でブロックの追加やサイズ変更ができます。コンテンツ エリア内のブロックを再配置する方法については、「ブロックを移動してレイアウトをカスタマイズする」をご覧ください。

動画を見る

創造エディターでブロックのサイズを変更する

創造エディターはSquarespaceの最新の編集エクスペリエンスです。これは、ブロック セクションを追加できるバージョン7.1サイトでサポートされています。編集時に、左上隅に [ブロックを追加] ボタンが表示される場合、そのセクションは創造エディターを使用しています。

創造エディターでは、ページ上でブロックをクリックしてドラッグすると、サイズを直接変更できます。

1. ページ上で [編集] をクリックします。
2. サイズを変更するブロックをクリックします。複数のブロックのサイズを同時に変更するには、セクションの背景をクリックしてドラッグし、サイズを変更するすべてのブロックを強調表示します。
3. ブロックのアウトラインの四角形の1つにカーソルを合わせ、カーソルが矢印に変わってから、クリックしてドラッグすると、ブロックの幅、高さ、またはその両方を増減できます。⌘またはCtrlを押したままドラッグすると、ブロックのサイズを左右対称に変更できます。 グリッドが背景に表示され、サイズ変更のガイドになります。
4. [モバイル ビュー] アイコンをクリックして、モバイル レイアウトのブロックのサイズを変更します。コンピューター ビューでブロックのサイズを変更しても、モバイル レイアウトのブロックのサイズは変更されません。
5. [保存] をクリックして変更を保存し、そのまま編集を続けるか、[終了] をクリックしてから [保存] をクリックしてエディターを閉じます。

サイズ変更はブロックの種類によって異なる場合があることに注意してください。たとえば、フォーム ブロックの幅は変更できますが、高さを変更するにはフィールドを追加または削除しかありません。

サイズ変更インジケーター

ブロックのサイズを変更する場合、ブロックの高さ、幅、または高さと幅がセクション内の他のブロックと同じになると、黄色のインジケーターが表示されます。たとえば、ボタンの上の画像の幅を変更する場合、画像ブロックの幅がボタン ブロックの幅と一致すると、両方のブロックの上または下の境界線に黄色のインジケーターが表示されます。高さを変更する場合、高さが一致すると左または右の境界線に黄色のインジケーターが表示され、ブロックの幅と高さが一致すると、インジケーターがブロック全体を囲みます。

クラシック エディターでブロックのサイズを変更する

バージョン7.0のすべてのサイト、およびバージョン7.1サイトの特定の場所では、ブロック コンテンツ エリアでクラシック エディターを使用します。クラシック エディターでは、2つ以上のブロックを隣り合わせに配置すると、互いに相対的にサイズが変更されます。これを使用して、ブロックのサイズを変更できます。

特に、スペース調整ブロックは空きスペースを作るブロックですが、サイズを変更すると周囲のブロックを大きくしたり小さくしたりできます。たとえば、ブロックをコンテンツ エリアの中央に配置するには、どちらかの側にスペース調整ブロックを追加し、各スペース調整ブロックを同じサイズに調整します。

ヒント: ブロックをクリックしてドラッグすると、黒いガイドラインが表示されます。ガイドラインが、サイズを変更するブロックの高さの分のみとなる場合、スペース調整ブロックはこのブロックのサイズのみを変更します。ガイドラインがコンテンツ エリアの高さ全体にわたる場合は、新しい列が作成されます。

ブロックでサイズを変更する方法は次のとおりです。

1. 挿入箇所をクリックします。
2. ブロック メニューからスペース調整ブロックまたは他のブロックを選択します。
3. 新しいブロックをクリックして、サイズを変更するブロックの隣にドラッグします。

4. 2つのブロックの間にカーソルを置き、カーソルが列サイズ変更ツールになったら、クリックしてドラッグし、サイズを調整します。これにより、周囲のブロックのサイズが変更され、コンテンツ エリアにさらに多くの空白スペースが作成されます。

ヒント: より高度なレイアウトを作成するには、ブロックの移動と、列と行の作成に関するガイドをご覧ください。

クラシック エディターでのハンドルのトリミング

クラシック エディターでは、特定のブロックの高さをトリミング ハンドルで変更できるため、コンテンツのサイズを変更してもゆがみが生じないようにできます。トリミング ハンドルは、次のブロックで使用できます。

• カルーセル ギャラリー ブロック
• インラインおよびポスター画像ブロック
• 地図ブロック
• SoundCloudブロック
• スペース調整ブロック

トリミング ハンドルを使用するには、ブロックをクリックし、ブロックの下部に表示される円をクリックしてドラッグします。

トリミング ハンドル ブロックを使用するためのヒント:

• Shiftキーを押したままトリミング ハンドルをドラッグすると、画像のサイズが20ピクセル単位で変更されます。これは、画像の下端を他のブロックと揃えるのに役立ちます。
• 画像ブロックでは、トリミング ハンドルは画像を追加した後にのみ表示されます。
• トリミングを元に戻すには、トリミング ハンドルをダブルクリックします。
• ハンドルを下に引くと、ブロックが拡大表示されます。
• 水平方向にトリミングするには、トリミング ハンドルをクリックして下にドラッグします。画像ブロックの場合、この操作で画像が拡大され、側面が切り取られます。