空白のスペースを削除する

余分な空白を削除するために⁠、サイトのパデ⁠ィング設定を変更します⁠。

最終更新日 2024年9月27日

空白のエリアは「⁠ホワイト スペ⁠ース⁠」や「⁠ネガテ⁠ィブ スペ⁠ース⁠」とも呼ばれ⁠、ビジ⁠ュアル デザインの重要な要素であり⁠、開放的で落ち着いたレイアウトを作成することができます⁠。

サイト内に調整または削除したい空白エリアがある場合⁠、それはおそらくパデ⁠ィングが原因です⁠。パデ⁠ィングとは⁠、ペ⁠ージの余白⁠、ナビゲ⁠ーシ⁠ョン⁠、ヘ⁠ッダ⁠ー⁠、フ⁠ッタ⁠ーなど⁠、レイアウトで様⁠々なサイト エレメントの周囲に組み込まれているスペ⁠ースを指します⁠。

クラシ⁠ック エデ⁠ィタ⁠ーを使用している場合は⁠、ペ⁠ージ上にスペ⁠ース調整ブロ⁠ックなどの余分なブロ⁠ックがあることも原因として考えられます⁠。

このガイドでは⁠、空白のスペ⁠ースに関する問題のトラブルシ⁠ュ⁠ーテ⁠ィング方法について説明します⁠。

始める前に

  • すべてのSquarespaceサイトでは⁠、ある程度パデ⁠ィングを制御できますが⁠、一部のエリアでは調整できない可能性があります⁠。バ⁠ージ⁠ョン7⁠.0では⁠、各テンプレ⁠ートに独自のスタイル オプシ⁠ョンがあります⁠。
  • クラシ⁠ック エデ⁠ィタ⁠ーでは⁠、ブロ⁠ックの周囲のパデ⁠ィング (⁠テキスト ブロ⁠ックや画像ブロ⁠ックなど⁠) は調整できません⁠。
  • 表示される空白部分の大きさは⁠、デバイスのサイズ⁠、ブラウザ⁠ーのサイズ⁠、解像度の設定によ⁠って異なる場合があります⁠。解像度の設定については⁠、お使いのデバイスの製造元のサポ⁠ートにお問い合わせください⁠。ただし⁠、Squarespaceのレスポンシブ デザインにより⁠、訪問者に表示される外観は依然として異なる場合があることに注意してください⁠。
  • ペ⁠ージに含まれるコンテンツの量がブラウザ⁠ーのウ⁠ィンドウよりも短い場合⁠、ペ⁠ージ コンテンツとフ⁠ッタ⁠ーの間に空白部分が表示される場合があります⁠。ブラウザ⁠ーのサイズい⁠っぱいにサイトが表示されるようにするための設定であるため⁠、これを完全に回避することはできません⁠。ただし⁠、ペ⁠ージにコンテンツを追加すれば⁠、ほとんどのブラウザ⁠ー ウ⁠ィンドウで空白を回避できます⁠。
  • サイトのパデ⁠ィングについてスタイルの変更で調整できない問題がある場合は⁠、Squarespace Forumが役立つ場合があります⁠。当社はコ⁠ードに関連する高度な変更についてのサポ⁠ートを提供していないことにご注意ください⁠。

パデ⁠ィング オプシ⁠ョンを確認する

各Squarespaceサイトには⁠、独自のレイアウトと組み込みのパデ⁠ィングおよびスタイル オプシ⁠ョンがあります⁠。サイト上のエレメントのパデ⁠ィングを調整できるかどうか調べるには⁠、空白部分のあるペ⁠ージに移動して⁠、スタイル オプシ⁠ョンをご確認ください⁠。これを行う方法は⁠、サイトが使用しているSquarespaceのバ⁠ージ⁠ョンによ⁠って異なります⁠。

サイト全体の間隔設定を制御する方法は以下の通りです⁠⁠。

  1. [⁠⁠間隔設定⁠⁠] パネルを開きます⁠⁠。
  2. [⁠⁠サイトの余白⁠⁠] の微調整オプシ⁠⁠ョンを使用して⁠⁠、コンテンツとサイトの端の間に表示されるスペ⁠⁠ースの大きさを設定します⁠⁠。

ヘ⁠⁠ッダ⁠⁠ーのパデ⁠⁠ィングを変更する方法は以下の通りです⁠⁠。

  1. ペ⁠⁠ージの [⁠⁠編集⁠⁠] をクリ⁠⁠ックし⁠⁠、ヘ⁠⁠ッダ⁠⁠ーにカ⁠⁠ーソルを合わせて [⁠⁠サイト ヘ⁠⁠ッダ⁠⁠ーを編集⁠⁠] をクリ⁠⁠ックします⁠⁠。
  2. デスクト⁠⁠ップアイコンをクリ⁠⁠ックします⁠⁠。
  3. [⁠⁠フル⁠⁠] または [⁠⁠はめ込み⁠⁠] をクリ⁠⁠ックして⁠⁠、ヘ⁠⁠ッダ⁠⁠ー コンテンツの幅を設定します⁠⁠。
  4. 下にスクロ⁠⁠ールし⁠⁠、パデ⁠⁠ィングと間隔の微調整オプシ⁠⁠ョンを使用してヘ⁠⁠ッダ⁠⁠ーの余白量を設定します⁠⁠。

個⁠⁠々のペ⁠⁠ージ セクシ⁠⁠ョンのパデ⁠⁠ィングを変更する方法は以下の通りです⁠⁠。

  1. ペ⁠⁠ージの [⁠⁠編集⁠⁠] をクリ⁠⁠ックしてから⁠⁠、任意のセクシ⁠⁠ョンの [⁠⁠鉛筆⁠⁠] アイコンをクリ⁠⁠ックします⁠⁠。
  2. [⁠⁠形式⁠⁠] タブで⁠⁠、微調整オプシ⁠⁠ョンを使用してセクシ⁠⁠ョンの高さ⁠⁠、幅⁠⁠、パデ⁠⁠ィングを変更します⁠⁠。セクシ⁠⁠ョン タイプによ⁠⁠って⁠⁠、利用可能なオプシ⁠⁠ョンが異なる場合があります⁠⁠。
  3. [⁠⁠背景⁠⁠] タブで⁠⁠、[⁠⁠フルブリ⁠⁠ード⁠⁠] または [⁠⁠はめ込み⁠⁠] をクリ⁠⁠ックして⁠⁠、セクシ⁠⁠ョン コンテンツの幅を設定します⁠⁠。

サイトのスタイル設定について詳しくは⁠⁠、「⁠⁠スタイルを変更する⁠⁠」をご覧ください⁠⁠。

[⁠⁠サイト スタイル⁠⁠] パネルを開きます⁠⁠。

多くのテンプレ⁠⁠ートでは⁠⁠、サイト プレビ⁠⁠ュ⁠⁠ーをクリ⁠⁠ックしてドラ⁠⁠ッグすることで⁠⁠、パデ⁠⁠ィング エリアを直接編集できます⁠⁠。

cilck-and-drag-padding.gif

また⁠⁠、空白のスペ⁠⁠ースに影響する微調整オプシ⁠⁠ョンを探すこともできます⁠⁠。

  1. 空白のスペ⁠⁠ースにカ⁠⁠ーソルを合わせます⁠⁠。パデ⁠⁠ィングされているエリアの周囲に青色のスタイル強調ボ⁠⁠ックスが表示される場合があります⁠⁠。ペ⁠⁠ージをクリ⁠⁠ックすると⁠⁠、そのエレメントのスタイル微調整オプシ⁠⁠ョンのみが表示され⁠⁠、それ以外は非表示になります⁠⁠。このシ⁠⁠ョ⁠⁠ートカ⁠⁠ットは⁠⁠、サイトのほとんどのテンプレ⁠⁠ートとほとんどのエリアで使用できます⁠⁠。
  2. それでも解決しない場合は⁠⁠、サイト スタイルをスクロ⁠⁠ールして⁠⁠、「⁠⁠パデ⁠⁠ィング⁠⁠」⁠⁠、「⁠⁠余白⁠⁠」⁠⁠、「⁠⁠フルブリ⁠⁠ード⁠⁠」などのキ⁠⁠ーワ⁠⁠ードで微調整オプシ⁠⁠ョンを探してみてください⁠⁠。サイトのレイアウトに影響を与える微調整オプシ⁠⁠ョンは⁠⁠、パデ⁠⁠ィングにも影響を与える可能性があります⁠⁠。
KB Guide Image

どちらのバ⁠ージ⁠ョンでも⁠、以下の点は共通です⁠。

  • ほとんどのパデ⁠ィング微調整オプシ⁠ョンにはスライダ⁠ーがあります⁠。スライダ⁠ーを0pxに動かすと⁠、パデ⁠ィングが完全に削除されます⁠。手動で「⁠0px⁠」と入力してEnterキ⁠ーを押すこともできます⁠。
  • パデ⁠ィングを変更した場合⁠、モバイル レイアウトでは異なる影響が発生する可能性があるため⁠、パデ⁠ィングがモバイルでどのように表示されるかを確認してください⁠。
  • 多くの場合⁠、パデ⁠ィングのスタイル設定は⁠、テンプレ⁠ートのすべてのペ⁠ージ⁠、特にフ⁠ッタ⁠ーなどのエリアに適用されます⁠。スタイル設定がどのように適用されたかを見るには⁠、サイトの他のペ⁠ージをご確認ください⁠。
  • 一部のパデ⁠ィングは組み込み設定のため⁠、削除したり変更したりすることはできません⁠。

余分なブロ⁠ックがないか確認する

クラシ⁠ック エデ⁠ィタ⁠ーに不要な空白部分がある場合は⁠、余分なブロ⁠ックがないかご確認ください⁠。ペ⁠ージ エデ⁠ィタ⁠ーが開いていない場合⁠、スペ⁠ース調整ブロ⁠ック⁠、コ⁠ード ブロ⁠ック⁠、空のテキスト ブロ⁠ックが空白エリアとして表示されることがあります⁠。テキスト ブロ⁠ック内で余分な改行を行うと⁠、空白が生じる場合があります⁠。

不要なブロ⁠ックを確認して削除するには⁠、次の手順に従います⁠。

  1. [⁠ペ⁠ージ⁠] パネルを開き⁠、削除したい空白部分のあるペ⁠ージをクリ⁠ックします⁠。
  2. ペ⁠ージ上にカ⁠ーソルを合わせ⁠、[⁠編集⁠] をクリ⁠ックしてペ⁠ージ エデ⁠ィタ⁠ーを開きます⁠。ブログ投稿やイベントなどの個⁠々のコレクシ⁠ョン アイテムの場合は⁠、アイテムをクリ⁠ックし⁠、そこにカ⁠ーソルを合わせて [⁠編集⁠] をクリ⁠ックします⁠。
  3. プレビ⁠ュ⁠ー エリアで⁠、空白部分にカ⁠ーソルを合わせます⁠。空白部分が余分なブロ⁠ックによるものである場合⁠、ブロ⁠ック タイプを示す注釈が表示されます⁠。ブロ⁠ックをクリ⁠ックすると⁠、その上にゴミ箱アイコンが表示されます⁠。
  4. ゴミ箱アイコンをクリ⁠ックしてから⁠、[⁠はい⁠] をクリ⁠ックします⁠。
  5. 変更を保存します⁠。

このプロセスは⁠、サイト上の編集可能なすべてのコンテンツ エリアのうち⁠、ブロ⁠ックをサポ⁠ートするもの (⁠ペ⁠ージ⁠、ブログ投稿⁠、フ⁠ッタ⁠ーなど⁠) に使用できます⁠。

詳細については⁠、「⁠ブロ⁠ックを削除する⁠」をご参照ください⁠。

バ⁠ージ⁠ョン7⁠.0では次のように表示されます⁠。

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

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

  • Squarespace Expertを雇う

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