スタイルを変更する

サイトのフ⁠ォント⁠、色⁠、ペ⁠ージ レイアウトを編集します⁠。

最終更新日 2025年1月31日

サイトのスタイルを変更するには⁠、サイト スタイルのオプシ⁠ョンを使用します⁠。サイト全体に適用されるグロ⁠ーバル スタイルを編集して一貫性のある外観に変更することも⁠、個⁠々のセクシ⁠ョンにスタイルを設定することもできます⁠。

このガイドでは⁠、「⁠微調整オプシ⁠ョン⁠」というスタイル オプシ⁠ョンを使用してサイトの外観を変更する方法を説明します⁠。サイトを構築する際には⁠、様⁠々なデザイン オプシ⁠ョンを試してみることをおすすめします⁠。様⁠々なフ⁠ォント⁠、色⁠、ペ⁠ージ設定を試すことで⁠、何が可能かを把握し⁠、気に入⁠ったデザインを作成できるようになります⁠。

ヒント

ガイドと動画チ⁠ュ⁠ートリアルの他に⁠、2件の「⁠Squarespaceを始める⁠」ウ⁠ェビナ⁠ーを提供しています⁠。これらのセ⁠ッシ⁠ョンでは⁠、Squarespace Blueprint AIを使用したテンプレ⁠ートの構築⁠、サイト⁠、ドメイン⁠、メ⁠ール オプシ⁠ョンの操作⁠、サイト コンテンツの準備⁠、ト⁠ップペ⁠ージの構築⁠、色とフ⁠ォントのスタイル設定について説明します⁠。ウ⁠ェビナ⁠ーの所要時間は通常は1時間で⁠、サインア⁠ップにSquarespaceサイトやアカウントは必要ありません⁠。

動画を見る

バ⁠ージ⁠ョン7⁠.1とバ⁠ージ⁠ョン7⁠.0のスタイル オプシ⁠ョン

スタイルの変更の動作は⁠、サイトのバ⁠ージ⁠ョンによ⁠って異なります⁠。以下のセクシ⁠ョンで⁠、お使いのバ⁠ージ⁠ョンのタブをクリ⁠ックして⁠、ご自分のサイトに適用される手順をご確認ください⁠。

バ⁠ージ⁠ョン7⁠.1

Squarespaceの最新バ⁠ージ⁠ョンでは⁠、サイト スタイルを使用して⁠、フ⁠ォント⁠、色⁠、間隔などのスタイルの変更を最大限に活用できます⁠。サイト スタイルで行う変更は通常⁠、サイト全体に適用されますが⁠、特定のセクシ⁠ョンやテキスト エリアにスタイルを設定することで⁠、より細かい変更を加えることができます⁠。

バ⁠ージ⁠ョン7⁠.1では⁠、すべてのサイトが同じテンプレ⁠ートを共有しています⁠。つまり⁠、どれも同じスタイルのオプシ⁠ョンと機能を備えているということです⁠。また⁠、いずれでもセクシ⁠ョンを使用してペ⁠ージにコンテンツを追加することができます⁠。

テンプレ⁠ートを切り替える必要がないため⁠、バ⁠ージ⁠ョン7⁠.1ではそのオプシ⁠ョンはありません⁠。その代わりに⁠、このガイドに記載されている手順で⁠、サイトの様⁠々な外観を試してみてください⁠。

バ⁠ージ⁠ョン7⁠.0

Squarespaceの旧バ⁠ージ⁠ョンであるバ⁠ージ⁠ョン7⁠.0では⁠、各テンプレ⁠ートに独自のスタイル オプシ⁠ョンと既定の設定があります⁠。各テンプレ⁠ートのサイト スタイルには⁠、それぞれ異なる微調整オプシ⁠ョンがあり⁠、サイト ヘ⁠ッダ⁠ーメイン コンテンツなどのセクシ⁠ョンにグル⁠ープ化されています⁠。詳細については⁠、テンプレ⁠ートのガイドをご参照ください⁠。

スタイル微調整オプシ⁠ョンを探す

スタイル微調整オプシ⁠ョンを見つける方法は⁠、サイトのバ⁠ージ⁠ョンと⁠、サイトをコンピ⁠ュ⁠ータ⁠ーで編集しているか⁠、Squarespaceアプリで編集しているかによ⁠って異なります⁠。

サイト スタイルのパネルを開くには⁠⁠、ペ⁠⁠ージ編集中に右上のペイントブラシのアイコンをクリ⁠⁠ックします⁠⁠。

paintbrush_icon.png

paintbrush_icon.png

そこから [⁠⁠テ⁠⁠ーマ⁠⁠] をクリ⁠⁠ックして⁠⁠、「⁠⁠専門的⁠⁠」⁠⁠、「⁠⁠大胆⁠⁠」⁠⁠、「⁠⁠お茶目⁠⁠」などのプリセ⁠⁠ット パ⁠⁠ックを閲覧できます⁠⁠。いずれかのパ⁠⁠ックを選択すると⁠⁠、フ⁠⁠ォント⁠⁠、色⁠⁠、ボタンがパ⁠⁠ック内のものに変更されます⁠⁠。プリセ⁠⁠ット パ⁠⁠ックを選択した後でも⁠⁠、[⁠⁠フ⁠⁠ォント⁠⁠] や [⁠⁠⁠⁠] など⁠⁠、変更したいサイト エレメントをクリ⁠⁠ックすることで⁠⁠、個⁠⁠々のスタイルを編集できます⁠⁠。各パネルのより詳細な手順については⁠⁠、このガイドをご参照ください⁠⁠。

サイト スタイルを閉じるには⁠⁠、ペ⁠⁠ージ プレビ⁠⁠ュ⁠⁠ーをダブルクリ⁠⁠ックするか⁠⁠、ペイントブラシのアイコンをクリ⁠⁠ックするか⁠⁠、パネルの上部にある [⁠⁠閉じる⁠⁠] をクリ⁠⁠ックします⁠⁠。スタイルの変更は⁠⁠、保存するか元へ戻すまでそのまま残ります⁠⁠。

サイト スタイルを閉じた状態で⁠⁠、特定のセクシ⁠⁠ョンを編集することで⁠⁠、より細かい変更を加えることができます⁠⁠。セクシ⁠⁠ョンのスタイルを設定するには⁠⁠、セクシ⁠⁠ョンの上にカ⁠⁠ーソルを置き⁠⁠、[⁠⁠セクシ⁠⁠ョンを編集⁠⁠] または鉛筆アイコンをクリ⁠⁠ックします⁠⁠。セクシ⁠⁠ョン スタイルはサイト全体のスタイルを上書きします⁠⁠。

edit_a_section.png

edit_a_section.png

ここでは⁠⁠、自動レイアウト⁠⁠、コレクシ⁠⁠ョン⁠⁠、ギ⁠⁠ャラリ⁠⁠ー セクシ⁠⁠ョンの様⁠⁠々なレイアウトを選択することもできます⁠⁠。コレクシ⁠⁠ョン セクシ⁠⁠ョンにスタイルを変更すると⁠⁠、そのタイプのすべてのレイアウトに影響します⁠⁠。たとえば⁠⁠、2つのブログ セクシ⁠⁠ョンがあり⁠⁠、どちらもメ⁠⁠ーソンリ⁠⁠ー レイアウトを使用している場合⁠⁠、1つのセクシ⁠⁠ョンに加えたスタイルの変更は両方のセクシ⁠⁠ョンに影響します⁠⁠。

サイト スタイルを開くには⁠⁠、次の手順に従⁠⁠ってください⁠⁠。

  1. [⁠⁠ペ⁠⁠ージパネル⁠⁠] を開きます⁠⁠。
  2. スタイルを設定したいペ⁠⁠ージをクリ⁠⁠ックします⁠⁠。フ⁠⁠ッタ⁠⁠ーなどのサイト全体の機能を使用するには⁠⁠、任意のペ⁠⁠ージを開きます⁠⁠。コレクシ⁠⁠ョン アイテムの場合は⁠⁠、そのタイプのコレクシ⁠⁠ョン アイテム(⁠⁠ブログ投稿や製品アイテムなど⁠⁠) を開きます⁠⁠。
  3. [⁠⁠ペ⁠⁠ージ⁠⁠] パネルの左上にある [⁠⁠Webサイト⁠⁠] をクリ⁠⁠ックし⁠⁠、[⁠⁠デザイン⁠⁠] > [⁠⁠サイト スタイル⁠⁠] の順にクリ⁠⁠ックします⁠⁠。
  4. サイト スタイルのパネルで⁠⁠、任意の微調整オプシ⁠⁠ョンをクリ⁠⁠ックして変更を加えます⁠⁠。

サイト スタイルが開いていると⁠⁠、サイトの編集は無効になります⁠⁠。コンテンツを追加または削除するには⁠⁠、サイト スタイルを閉じて⁠⁠、[⁠⁠ペ⁠⁠ージ⁠⁠] パネルを開きます⁠⁠。

サイト スタイルには⁠⁠、現在閲覧しているペ⁠⁠ージのオプシ⁠⁠ョンが表示されます⁠⁠。これらの微調整オプシ⁠⁠ョンに対する変更は⁠⁠、サイト全体の同じタイプのすべてのペ⁠⁠ージに適用されます⁠⁠。たとえば⁠⁠、ストア ペ⁠⁠ージのスタイルを変更すると⁠⁠、サイト上のすべてのストア ペ⁠⁠ージに同じ変更が適用されます⁠⁠。

ヒント

それぞれのカバ⁠⁠ー ペ⁠⁠ージは別⁠⁠々にスタイル設定されます⁠⁠。

プレビ⁠⁠ュ⁠⁠ー パネルでペ⁠⁠ージのエリアをクリ⁠⁠ックすると⁠⁠、そのエリアで使用できるスタイル微調整オプシ⁠⁠ョンが表示され⁠⁠、それ以外は非表示になります⁠⁠。クリ⁠⁠ックしたエレメントの周囲にスタイル強調ボ⁠⁠ックスが表示されます⁠⁠。[⁠⁠すべて表示⁠⁠] をクリ⁠⁠ックして⁠⁠、すべてのオプシ⁠⁠ョンに戻ります⁠⁠。このシ⁠⁠ョ⁠⁠ートカ⁠⁠ットは⁠⁠、サイトのほとんどのテンプレ⁠⁠ートとほとんどのエリアで使用できます⁠⁠。

たとえば⁠⁠、Brineテンプレ⁠⁠ートでは次のようになります⁠⁠。

Clicking_an_element_on_the_page_displays_the_style_tweaks_available_for_that_area.png

Clicking_an_element_on_the_page_displays_the_style_tweaks_available_for_that_area.png

一部の微調整オプシ⁠⁠ョンについては⁠⁠、プレビ⁠⁠ュ⁠⁠ー内でクリ⁠⁠ック & ドラ⁠⁠ッグして設定を調整できます⁠⁠。

drag-spacers.gif

drag-spacers.gif

スタイルの変更は⁠⁠、アプリ内のバ⁠⁠ージ⁠⁠ョン7⁠⁠.1サイトでのみサポ⁠⁠ートされています⁠⁠。サイトがバ⁠⁠ージ⁠⁠ョン7⁠⁠.0の場合⁠⁠、スタイルを変更するにはパソコンを使用してください⁠⁠。

アプリのバ⁠⁠ージ⁠⁠ョン7⁠⁠.1のスタイル

サイト スタイルを使用すると⁠⁠、フ⁠⁠ォント⁠⁠、色⁠⁠、間隔など⁠⁠、大規模なスタイルの変更をワン タ⁠⁠ップでサイトに適用できます⁠⁠。通常⁠⁠、サイト スタイルで行う変更はサイト全体に適用されますが⁠⁠、特定のセクシ⁠⁠ョンやテキスト エリアにスタイルを設定することで⁠⁠、より細かい変更を加えることができます⁠⁠。

スタイルを変更するには⁠⁠、次の手順に従⁠⁠ってください⁠⁠。

  1. サイトの任意のペ⁠⁠ージをタ⁠⁠ップし⁠⁠、[⁠⁠プレビ⁠⁠ュ⁠⁠ー⁠⁠] をタ⁠⁠ップします⁠⁠。
  2. 左上隅の [⁠⁠編集⁠⁠] をタ⁠⁠ップします⁠⁠。
  3. ペイントブラシ アイコンをタ⁠⁠ップして⁠⁠、サイト スタイルを開きます⁠⁠。
  4. [⁠⁠フ⁠⁠ォント⁠⁠] や [⁠⁠⁠⁠] など⁠⁠、スタイルを設定したいサイト エリアをタ⁠⁠ップします⁠⁠。
  5. パネルのオプシ⁠⁠ョンを使用して⁠⁠、そのエリアをカスタマイズします⁠⁠。
    • [⁠⁠フ⁠⁠ォント⁠⁠] で⁠⁠、[⁠⁠Sans-serif⁠⁠] ⁠⁠、[⁠⁠Serif⁠⁠] ⁠⁠、または [⁠⁠混合⁠⁠] をタ⁠⁠ップして⁠⁠、各タイプのフ⁠⁠ォント パ⁠⁠ックを確認します⁠⁠。ベ⁠⁠ース サイズを変更するには⁠⁠、フ⁠⁠ォント名をタ⁠⁠ップします⁠⁠。
    • [⁠⁠⁠⁠] で⁠⁠、各カラ⁠⁠ー テ⁠⁠ーマごとにアクセントになる色⁠⁠、明るい色⁠⁠、暗い色を選択します⁠⁠。

ヒント

[⁠⁠設定⁠⁠] タブからサイト スタイルを開くこともできます⁠⁠。

セクシ⁠⁠ョンのスタイルを設定するには⁠⁠、次の手順に従⁠⁠ってください⁠⁠。

  1. 編集するペ⁠⁠ージをタ⁠⁠ップし⁠⁠、[⁠⁠プレビ⁠⁠ュ⁠⁠ー⁠⁠] をタ⁠⁠ップします⁠⁠。
  2. [⁠⁠編集⁠⁠] をタ⁠⁠ップし⁠⁠、スタイルを設定するセクシ⁠⁠ョンをタ⁠⁠ップします⁠⁠。
  3. セクシ⁠⁠ョン ツ⁠⁠ールバ⁠⁠ーの鉛筆アイコンをタ⁠⁠ップします⁠⁠。
  4. [⁠⁠フ⁠⁠ォ⁠⁠ーマ⁠⁠ット⁠⁠] ⁠⁠、[⁠⁠背景⁠⁠] ⁠⁠、または [⁠⁠⁠⁠] をタ⁠⁠ップして⁠⁠、新しいスタイルを選択します⁠⁠。
  5. [⁠⁠完了⁠⁠] をタ⁠⁠ップし⁠⁠、[⁠⁠変更を保存⁠⁠] をタ⁠⁠ップします⁠⁠。

フ⁠ォントと色

サイトのフ⁠ォントや色の変更については⁠、以下のセクシ⁠ョンをご参照ください⁠。

フ⁠ォント

フ⁠ォントの変更方法は⁠、サイトのバ⁠ージ⁠ョンによ⁠って異なります⁠。

フ⁠⁠ォントを変更するには⁠⁠、サイト スタイルを開き⁠⁠、[⁠⁠フ⁠⁠ォント⁠⁠] の横にある>をクリ⁠⁠ックします⁠⁠。

[⁠⁠フ⁠⁠ォント⁠⁠] パネルでは⁠⁠、サイト上のすべてのテキストに適用するフ⁠⁠ォント パ⁠⁠ックを選択したり⁠⁠、特定の種類のテキストのフ⁠⁠ォントを変更したりできます⁠⁠。詳細については⁠⁠、 フ⁠⁠ォントを変更するをご参照ください⁠⁠。

任意のテキスト エリアで⁠⁠、テキストの書式を見出し⁠⁠、段落⁠⁠、または等幅テキストに変更したり⁠⁠、リンクを追加したりすることができます⁠⁠。

  • ハイパ⁠⁠ーリンクには常に下線が表示されます⁠⁠。
  • 訪問者がリンクをクリ⁠⁠ックすると⁠⁠、その周囲に点線が表示されるので⁠⁠、すべての訪問者がサイトにアクセスしやすくなります⁠⁠。

フ⁠⁠ォントやサイズを変更するには⁠⁠、サイト スタイルの [⁠⁠タイポグラフ⁠⁠ィ⁠⁠ー⁠⁠] または [⁠⁠フ⁠⁠ォント⁠⁠] の微調整オプシ⁠⁠ョンを使用します⁠⁠。詳細については⁠⁠、 フ⁠⁠ォントを変更するをご参照ください⁠⁠。

サイトの色の変更方法は⁠、サイトのバ⁠ージ⁠ョンによ⁠って異なります⁠。

サイトの色を変更するには⁠⁠、サイト スタイルを開き⁠⁠、[⁠⁠色⁠⁠] の横にあるをクリ⁠⁠ックします⁠⁠。

厳選されたカラ⁠⁠ー パレ⁠⁠ットを使用すれば⁠⁠、サイトのすべての色を同時に変更したり⁠⁠、サイトのエレメントごとに色をカスタマイズしたりできます⁠⁠。サイトとセクシ⁠⁠ョンの色の変更の詳細については⁠⁠、 色を変更するをご参照ください⁠⁠。アクセシビリテ⁠⁠ィに関するベスト プラクテ⁠⁠ィスを確認するには⁠⁠、アクセスしやすいサイト コンテンツを作成するをご参照ください⁠⁠。

色を変更するには⁠⁠、ラベルの横にある色付きの円で⁠⁠、サイト スタイルの微調整オプシ⁠⁠ョンを選択します⁠⁠。詳細については⁠⁠、色を変更するをご参照ください⁠⁠。アクセシビリテ⁠⁠ィに関するベスト プラクテ⁠⁠ィスを確認するには⁠⁠、アクセスしやすいサイト コンテンツを作成するをご参照ください⁠⁠。

レイアウト

サイトのペ⁠ージ レイアウトや間隔設定の変更方法については⁠、以下のセクシ⁠ョンをご参照ください⁠。

ヘ⁠ッダ⁠ー

訪問者は⁠、上部のヘ⁠ッダ⁠ーを使用してサイトを移動します⁠。ヘ⁠ッダ⁠ーの編集方法は⁠、サイトのバ⁠ージ⁠ョンによ⁠って異なります⁠。

サイト ヘ⁠⁠ッダ⁠⁠ーを編集するには⁠⁠、サイト プレビ⁠⁠ュ⁠⁠ーの左上にある [⁠⁠編集⁠⁠] をクリ⁠⁠ックし⁠⁠、ヘ⁠⁠ッダ⁠⁠ーにカ⁠⁠ーソルを合わせて [⁠⁠サイト ヘ⁠⁠ッダ⁠⁠ーを編集⁠⁠] をクリ⁠⁠ックします⁠⁠。エデ⁠⁠ィタ⁠⁠ーのオプシ⁠⁠ョンを使用して⁠⁠、サイトのタイトルロゴ⁠⁠、ナビゲ⁠⁠ーシ⁠⁠ョン リンクをカスタマイズします⁠⁠。シ⁠⁠ョ⁠⁠ッピング カ⁠⁠ートのアイコン⁠⁠、ソ⁠⁠ーシ⁠⁠ャル アイコン⁠⁠、コ⁠⁠ール ト⁠⁠ゥ アクシ⁠⁠ョンのボタンを追加することもできます⁠⁠。

より詳細な手順については⁠⁠、サイト ヘ⁠⁠ッダ⁠⁠ーを構築するをご参照ください⁠⁠。

サイトのヘ⁠⁠ッダ⁠⁠ー スタイルはテンプレ⁠⁠ートに依存します⁠⁠。具体的なヘ⁠⁠ッダ⁠⁠ー設定については⁠⁠、テンプレ⁠⁠ートのガイドをご参照ください⁠⁠。

テンプレ⁠⁠ートによ⁠⁠っては⁠⁠、ヘ⁠⁠ッダ⁠⁠ーに特別な機能があります⁠⁠。利用可能な機能のリストについては⁠⁠、 サイト ヘ⁠⁠ッダ⁠⁠ーを構築するをご参照ください⁠⁠。

フ⁠ッタ⁠ー

フ⁠ッタ⁠ーのスタイル設定方法は⁠、サイトのバ⁠ージ⁠ョンによ⁠って異なります⁠。

フ⁠⁠ッタ⁠⁠ーのスタイルを設定するには⁠⁠、次の手順に従⁠⁠ってください⁠⁠。

  1. 左上にある [⁠⁠編集⁠⁠] をクリ⁠⁠ックします⁠⁠。
  2. フ⁠⁠ッタ⁠⁠ーにカ⁠⁠ーソルを合わせ⁠⁠、[⁠⁠フ⁠⁠ッタ⁠⁠ーの編集⁠⁠] をクリ⁠⁠ックします⁠⁠。
  3. スタイルを変更するには⁠⁠、[⁠⁠セクシ⁠⁠ョンを編集⁠⁠] または鉛筆アイコンをクリ⁠⁠ックします⁠⁠。

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

サイトのフ⁠⁠ッタ⁠⁠ー スタイルはテンプレ⁠⁠ートに依存します⁠⁠。具体的なフ⁠⁠ッタ⁠⁠ー設定については⁠⁠、テンプレ⁠⁠ートのガイドをご参照ください⁠⁠。

テンプレ⁠⁠ートごとのフ⁠⁠ッタ⁠⁠ー オプシ⁠⁠ョンの詳細については⁠⁠、フ⁠⁠ッタ⁠⁠ーを編集するをご参照ください⁠⁠。

間隔とパデ⁠ィング

サイトの間隔設定を変更する方法は⁠、サイトのバ⁠ージ⁠ョンによ⁠って異なります⁠。

サイトの間隔設定を変更するには⁠⁠、[⁠⁠間隔設定⁠⁠] パネルを開きます⁠⁠。

次の微調整オプシ⁠⁠ョンを使用すると⁠⁠、サイトのすべてのペ⁠⁠ージの間隔設定が変更されます⁠⁠。

  • ペ⁠⁠ージ幅 (⁠⁠最大⁠⁠) - サイトのペ⁠⁠ージの最大幅を変更します⁠⁠。実際の幅は⁠⁠、ブラウザ⁠⁠ーやデバイスによ⁠⁠って異なります⁠⁠。この微調整は⁠⁠、サイト ヘ⁠⁠ッダ⁠⁠ーの間隔設定には影響しません⁠⁠。
  • サイトの余白 - サイトの両側の余白の幅を変更します⁠⁠。ペ⁠⁠ージ幅の設定によ⁠⁠っては⁠⁠、この微調整がペ⁠⁠ージのコンテンツに目に見える影響を与えない場合があります⁠⁠。この微調整は⁠⁠、ヘ⁠⁠ッダ⁠⁠ーを含むサイト全体に影響します⁠⁠。ギ⁠⁠ャラリ⁠⁠ー セクシ⁠⁠ョンでは⁠⁠、余白の幅に応じて上部と下部のパデ⁠⁠ィングも変化します⁠⁠。

セクシ⁠⁠ョン エデ⁠⁠ィタ⁠⁠ーで個⁠⁠々のセクシ⁠⁠ョンの間隔を変更できます⁠⁠。

パデ⁠⁠ィング⁠⁠、間隔⁠⁠、幅⁠⁠、境界線など⁠⁠、サイズに関連する多くのスタイル微調整オプシ⁠⁠ョンは⁠⁠、[⁠⁠サイズと値⁠⁠] の見出しの下にあります⁠⁠。テンプレ⁠⁠ートによ⁠⁠っては⁠⁠、他のセクシ⁠⁠ョンに含めることもできます⁠⁠。

サイズを変更するには⁠⁠、サイズ微調整オプシ⁠⁠ョンにカ⁠⁠ーソルを合わせ⁠⁠、スライダ⁠⁠ーを使用するか⁠⁠、フ⁠⁠ィ⁠⁠ールドに数値を入力します⁠⁠。

サイドバ⁠ー (⁠バ⁠ージ⁠ョン7⁠.0⁠)

この機能へのアクセス

バ⁠ージ⁠ョン7⁠.1のサイトにはサイドバ⁠ーが含まれません⁠。

テンプレ⁠ートにサイドバ⁠ーがある場合は⁠、サイト スタイルでその外観を変更できます⁠。たとえば⁠、テンプレ⁠ートによ⁠っては⁠、サイドバ⁠ーを左または右に移動させることができます⁠。サイドバ⁠ーのスタイル微調整オプシ⁠ョンを見つけるには⁠、ペ⁠ージ プレビ⁠ュ⁠ーでサイドバ⁠ーをクリ⁠ックするか⁠、サイト スタイルで [⁠サイドバ⁠ー⁠] の見出しを探します⁠。

画像とアニメ⁠ーシ⁠ョン

画像ブロ⁠ックやバナ⁠ーのスタイル設定方法⁠、画像の縦横比の変更方法⁠、アニメ⁠ーシ⁠ョンの適用方法については⁠、以下のセクシ⁠ョンをご参照ください⁠。

画像ブロ⁠ック

画像ブロ⁠ックのスタイル設定方法は⁠、サイトのバ⁠ージ⁠ョンによ⁠って異なります⁠。ブロ⁠ック レイアウトによ⁠っては⁠、サイト スタイルのフ⁠ォント⁠、色⁠、ボタンなどの独自のスタイル設定ができます⁠。

両バ⁠ージ⁠ョンの画像ブロ⁠ックのスタイルについては⁠、画像ブロ⁠ックをご参照ください⁠。

バナ⁠ー

バナ⁠ーの編集方法は⁠、サイトのバ⁠ージ⁠ョンによ⁠って異なります⁠。

ペ⁠⁠ージ上部に背景画像付きのブロ⁠⁠ック セクシ⁠⁠ョンを追加することで⁠⁠、任意のペ⁠⁠ージにバナ⁠⁠ー画像を作成できます⁠⁠。

  • バナ⁠⁠ーに画像だけを使用したい場合は⁠⁠、空白のセクシ⁠⁠ョンから開始します⁠⁠。
  • セクシ⁠⁠ョンに追加されたブロ⁠⁠ックはバナ⁠⁠ーにオ⁠⁠ーバ⁠⁠ーレイされます⁠⁠。
  • 高さを変更するには⁠⁠、[⁠⁠セクシ⁠⁠ョンを編集⁠⁠]⁠⁠、または鉛筆アイコンをクリ⁠⁠ックしてセクシ⁠⁠ョンの高さを設定します⁠⁠。
  • 背景画像を選択するときは⁠⁠、画像の書式設定のヒントに従⁠⁠ってください⁠⁠。

詳細については⁠⁠、バナ⁠⁠ー画像を追加するをご参照ください⁠⁠。

ほとんどのテンプレ⁠⁠ートはペ⁠⁠ージ バナ⁠⁠ーをサポ⁠⁠ートしており⁠⁠、ペ⁠⁠ージの設定で追加できます⁠⁠。

縦横比

画像の縦横比は⁠、幅と高さの比を3⁠:4のように数値で表したものです⁠。縦横比の微調整オプシ⁠ョンを選択すると⁠、画像は通常は焦点を中心に⁠、その図形 (⁠ 1⁠:1正方形など⁠) にトリミングされます⁠。

  • バ⁠ージ⁠ョン7⁠.1では⁠、セクシ⁠ョン エデ⁠ィタ⁠ーやブロ⁠ック エデ⁠ィタ⁠ーで画像の縦横比を変更できます⁠。
  • バ⁠ージ⁠ョン7⁠.0では⁠、サイト スタイルやブロ⁠ック エデ⁠ィタ⁠ーで画像の縦横比を変更できます⁠。
  • どちらのバ⁠ージ⁠ョンでも⁠、サイトに画像をア⁠ップロ⁠ードした後⁠、組み込みの画像エデ⁠ィタ⁠ーを使⁠って画像の縦横比を変更することができます⁠。

縦横比が [⁠自動⁠] に設定されている場合⁠、画像はペ⁠ージ上に最適に収まるように再配置されます⁠。ア⁠ップロ⁠ードされた順番とは異なる順番で表示される場合があります⁠。詳しくは⁠、「⁠縦横比について⁠」をご参照ください⁠。

アニメ⁠ーシ⁠ョン

視覚的な効果を加えるために⁠、 [⁠アニメ⁠ーシ⁠ョン⁠] パネルを使用して⁠、訪問者がサイト内を移動するときにコンテンツをわずかにアニメ⁠ーシ⁠ョン化できます⁠。詳細については⁠、サイト全体のアニメ⁠ーシ⁠ョンをご参照ください⁠。

背景

サイトの背景の変更方法は⁠、サイトのバ⁠ージ⁠ョンによ⁠って異なります⁠。

背景を変更するには⁠⁠。

  • [⁠⁠色⁠⁠] パネルを使用して⁠⁠、サイトの背景を変更します⁠⁠。
  • セクシ⁠⁠ョン エデ⁠⁠ィタ⁠⁠ーを使⁠⁠って⁠⁠、個⁠⁠々のセクシ⁠⁠ョンの背景色を変更したり⁠⁠、背景画像や動画を追加したりすることができます⁠⁠。これにはフ⁠⁠ッタ⁠⁠ー セクシ⁠⁠ョンも含まれます⁠⁠。
  • セクシ⁠⁠ョンの背景画像が[⁠⁠はめ込み⁠⁠]に設定されている場合⁠⁠、はめ込み枠の色を設定できます⁠⁠。
  • ヘ⁠⁠ッダ⁠⁠ーは⁠⁠、透明な場合はト⁠⁠ップ セクシ⁠⁠ョンと同じ背景色になります⁠⁠。ヘ⁠⁠ッダ⁠⁠ー エデ⁠⁠ィタ⁠⁠ーで透明度をオフにすると⁠⁠、ヘ⁠⁠ッダ⁠⁠ーのカラ⁠⁠ー テ⁠⁠ーマを変更できます⁠⁠。

サイト スタイルでメイン コンテンツ エリアの背景色を設定できます⁠⁠。テンプレ⁠⁠ートによ⁠⁠っては⁠⁠、ヘ⁠⁠ッダ⁠⁠ーやフ⁠⁠ッタ⁠⁠ー⁠⁠、コンテンツ周囲のスペ⁠⁠ースに背景色を追加するオプシ⁠⁠ョンもあります⁠⁠。詳細については⁠⁠、色を変更するをご参照ください⁠⁠。

テンプレ⁠⁠ートによ⁠⁠っては⁠⁠、サイト スタイルでサイト全体またはペ⁠⁠ージの背景画像を追加できます⁠⁠。背景画像を追加するには⁠⁠、背景画像の微調整オプシ⁠⁠ョン⁠⁠、またはサイト スタイル内の対応する画像アイコンをクリ⁠⁠ックします⁠⁠。独自の画像をア⁠⁠ップロ⁠⁠ードすることも⁠⁠、スト⁠⁠ック画像を検索して追加することもできます⁠⁠。詳細については⁠⁠、バ⁠⁠ージ⁠⁠ョン7⁠⁠.0でバナ⁠⁠ー画像を追加するをご参照ください⁠⁠。

ボタン

ボタンのスタイルの設定方法は⁠、サイトのバ⁠ージ⁠ョンや⁠、ボタンがサイト全体に表示されるか⁠、特定のペ⁠ージまたはセクシ⁠ョンにのみ表示されるかによ⁠って異なります⁠。

すべてのシナリオの詳細な手順については⁠、ボタンのスタイル設定をご参照ください⁠。

商品

商品のスタイル設定方法は⁠、サイトのバ⁠ージ⁠ョンによ⁠って異なります⁠。

メインのストア ペ⁠⁠ージをスタイル設定するには⁠⁠、ストア セクシ⁠⁠ョンのスタイルを開きます⁠⁠。セクシ⁠⁠ョンの形式⁠⁠、背景⁠⁠、色を変更するオプシ⁠⁠ョンを確認できます⁠⁠。

商品をスタイル設定するには⁠⁠、商品詳細ペ⁠⁠ージのサイト スタイルを開きます⁠⁠。これらの設定は⁠⁠、個⁠⁠々の商品詳細ペ⁠⁠ージに影響します⁠⁠。これらのオプシ⁠⁠ョンの中には⁠⁠、複数の画像がある商品にのみ適用されるものもあるため⁠⁠、商品に画像が1枚しかない場合⁠⁠、一部の変更が表示されないことがあります⁠⁠。

詳細については⁠⁠、ストア ペ⁠⁠ージのスタイル設定をご参照ください⁠⁠。

商品のスタイル オプシ⁠⁠ョンは⁠⁠、サイトのテンプレ⁠⁠ートや⁠⁠、テンプレ⁠⁠ートがクラシ⁠⁠ック⁠⁠、アドバンス⁠⁠、またはユニ⁠⁠ークのストア ペ⁠⁠ージを使用しているかどうかによ⁠⁠って異なります⁠⁠。

商品のスタイル オプシ⁠⁠ョンの詳細なリストについては⁠⁠、ストア ペ⁠⁠ージのスタイル設定をご参照ください⁠⁠。

機能の非表示または表示

サイトのさまざまなエレメントや機能を非表示または表示させる方法は⁠、サイトのバ⁠ージ⁠ョンによ⁠って異なります⁠。

ブロ⁠⁠ックやセクシ⁠⁠ョンを削除するか⁠⁠、ヘ⁠⁠ッダ⁠⁠ーフ⁠⁠ッタ⁠⁠ーを非表示にすることで⁠⁠、ソ⁠⁠ーシ⁠⁠ャル アイコン⁠⁠、バナ⁠⁠ー⁠⁠、フ⁠⁠ッタ⁠⁠ーなどの特定のデザイン機能を非表示にすることができます⁠⁠。セクシ⁠⁠ョン エデ⁠⁠ィタ⁠⁠ーを開いて⁠⁠、ペ⁠⁠ージのそのセクシ⁠⁠ョンのさまざまなオプシ⁠⁠ョンを検索します⁠⁠。

テンプレ⁠⁠ートによ⁠⁠っては⁠⁠、ペ⁠⁠ージ タイトル⁠⁠、ソ⁠⁠ーシ⁠⁠ャル アイコン⁠⁠、境界線⁠⁠、バナ⁠⁠ー⁠⁠、フ⁠⁠ッタ⁠⁠ーなどのデザイン機能を非表示にすることができます⁠⁠。これらの微調整オプシ⁠⁠ョンは通常⁠⁠、サイト スタイルの [⁠⁠オプシ⁠⁠ョン⁠⁠] セクシ⁠⁠ョンにあります⁠⁠。

変更を保存または元へ戻す

スタイルの変更を保存したり⁠、前の変更を元に戻したり⁠、サイトの領域を既定のスタイルにリセ⁠ットしたりできます⁠。

変更を保存

スタイルやコンテンツを変更したら⁠、ペ⁠ージ エデ⁠ィタ⁠ーの左上にある [⁠保存⁠] をクリ⁠ックします⁠。この変更は元に戻せません⁠。既定のスタイルに戻すことはできますが⁠、保存後に前のスタイルの変更を復元することはできません⁠。

変更を元へ戻す

ほとんどのスタイル変更は⁠、次の2つの異なる方法で元へ戻すことができます⁠。

  • パネルの上部の元へ戻す矢印をクリ⁠ックします⁠。これにより⁠、最後に行⁠ったスタイル変更が取り消されます⁠。複数回クリ⁠ックすると⁠、より多くの変更を順次取り消すことができます⁠。やり直し矢印をクリ⁠ックして⁠、変更を再び反映することもできます⁠。

ヒント

バ⁠ージ⁠ョン7⁠.1でサイト スタイルを編集している場合⁠、サイトス タイルのパネルを閉じてペ⁠ージ コンテンツを編集しても⁠、最後に変更したスタイルを元に戻したり⁠、やり直したりすることができます⁠。

  • 一部のパネルでは⁠、変更した微調整オプシ⁠ョンの横にあるをクリ⁠ックします⁠。これにより⁠、微調整オプシ⁠ョンが最後に保存された変更に戻ります⁠。点は⁠、変更を保存するまで引き続き表示されます⁠。
style_dot.png

ヒント

スタイルを変更してから元へ戻すと⁠、[⁠保存⁠] オプシ⁠ョンは表示されません[⁠保存⁠] オプシ⁠ョンは⁠、微調整オプシ⁠ョンを変更し⁠、それを保持する場合にのみ表示されます⁠。

既定のスタイルにリセ⁠ットする

スタイル オプシ⁠ョンによ⁠っては⁠、サイトの既定値にリセ⁠ットできます⁠。これにより⁠、選択したエリアが⁠、最初にサイトを立ち上げたときに設定された元の状態に戻ります⁠。保存すると⁠、この変更は元に戻せません⁠。

詳細な手順については⁠、やり直しをご参照ください⁠。

カスタムCSSを追加する

Squarespaceのすべてのサイトは⁠、カスタム コ⁠ードなしで⁠、サイトのCSSを自動的に制御します⁠。しかし⁠、CSSを使い慣れていて⁠、サイト スタイルに必要な変更が見つからない場合は⁠、CSSエデ⁠ィタ⁠ーでCSSを追加できます⁠。

カスタムCSSはサイトの機能を妨げる可能性があります⁠。また⁠、すべてのカスタム コ⁠ードはSquarespaceサポ⁠ートの対象外です⁠。

その他のヘルプ

ガイドのほかにも⁠、サイトのスタイル変更に役立つリソ⁠ースを提供しています⁠。

  • よくある質問については⁠、スタイル変更に関するよくある質問 をご参照ください⁠。
  • 1時間の「⁠Squarespaceを始める⁠」ウ⁠ェビナ⁠ーに参加して⁠、ペ⁠ージの作成やサイト スタイルの調整など⁠、サイト設定の基本を学びまし⁠ょう⁠。
  • プロのWebデザイナ⁠ー向けのSquarespaceのパ⁠ートナ⁠ー プログラムであるCircleに参加すると⁠、カスタム コ⁠ードの使用について質問できるプライベ⁠ート Q&A フ⁠ォ⁠ーラムにアクセスできます⁠。
  • Squarespace Marketplaceを通じて第三者のデザイナ⁠ーを採用し⁠、サイトのデザインをカスタマイズできます⁠。

バ⁠ージ⁠ョン7⁠.0に関するその他のヘルプ

バ⁠ージ⁠ョン7⁠.0でのスタイル変更については⁠、こちらの動画をご覧ください⁠。

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

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

  • Squarespace Expertを雇う

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