ブロックのサイズを変更する

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

最終更新日 2024年8月08日

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

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

動画を見る

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

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

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

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

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

備考

[⁠ペ⁠ージ幅 (⁠最大⁠)⁠] スタイル微調整オプシ⁠ョンを使用すると⁠、創造エデ⁠ィタ⁠ーでブロ⁠ックのサイズを変更する機能に影響が生じる可能性があります⁠。ブロ⁠ックのサイズを変更できない場合は⁠、その値をより高い幅に変更してみてください⁠。

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

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

When_resizing_blocks__indicators_display_when_boxes_match_height__width__or_both.png

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

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

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

ヒント

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

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

  1. 挿入箇所をクリ⁠ックします⁠。
  2. ブロ⁠ック メニ⁠ュ⁠ーからスペ⁠ース調整ブロ⁠ックまたは他のブロ⁠ックを選択します⁠。
  3. 新しいブロ⁠ックをクリ⁠ックして⁠、サイズを変更するブロ⁠ックの隣にドラ⁠ッグします⁠。
add_spacer.gif
  1. 2つのブロ⁠ックの間にカ⁠ーソルを置き⁠、カ⁠ーソルが列サイズ変更ツ⁠ールにな⁠ったら⁠、クリ⁠ックしてドラ⁠ッグし⁠、サイズを調整します⁠。これにより⁠、周囲のブロ⁠ックのサイズが変更され⁠、コンテンツ エリアにさらに多くの空白スペ⁠ースが作成されます⁠。
centering_with_spacers.gif

ヒント

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

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

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

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

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

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

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

  • Squarespace Expertを雇う

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