フォーム ブロックのスタイルを設定する

ブランドに合うように⁠、サイトのお問い合わせフ⁠ォ⁠ームをカスタマイズします⁠。

最終更新日 2024年9月12日

サイト スタイルを使用して⁠、サイト上のフ⁠ォ⁠ーム ブロ⁠ックの外観を編集します⁠。フ⁠ォ⁠ーム上のテキストやボタンのフ⁠ォントや色⁠、テキスト フ⁠ィ⁠ールドやチ⁠ェ⁠ックボ⁠ックスなどのフ⁠ォ⁠ームのその他のエレメントのスタイルや図形を変更できます⁠。

サイト上のすべてのフ⁠ォ⁠ーム ブロ⁠ックがこのスタイル設定に従うため⁠、フ⁠ォ⁠ームの一貫性を保ちながら独自のスタイルを設定できる優れた方法です⁠。

この機能へのアクセス

このガイドの大部分は⁠、バ⁠ージ⁠ョン7⁠.1サイトでのみ使用可能なフ⁠ォ⁠ーム スタイルの設定オプシ⁠ョンについて説明しています⁠。サイトがバ⁠ージ⁠ョン7⁠.0の場合は⁠、「⁠バ⁠ージ⁠ョン7⁠.0でフ⁠ォ⁠ーム ブロ⁠ックのスタイルを設定する⁠」を確認してください⁠。

動画を見る

オ⁠ープン フ⁠ォ⁠ーム ブロ⁠ックのスタイルを設定する

オ⁠ープン フ⁠ォ⁠ーム ブロ⁠ックのスタイルを設定する方法は以下のとおりです⁠。

  1. [⁠ペ⁠ージ⁠] パネルを開き⁠、フ⁠ォ⁠ーム ブロ⁠ックがあるペ⁠ージをクリ⁠ックすると⁠、サイト プレビ⁠ュ⁠ーで変更内容を確認できます⁠。
  2. [⁠サイト スタイル⁠] パネルを開き⁠、[⁠フ⁠ォ⁠ーム⁠] の横にあるをクリ⁠ックします⁠。
  3. [⁠切り替え⁠] をクリ⁠ックしてプリセ⁠ットのフ⁠ォ⁠ーム パ⁠ックを選択します⁠。
  4. フ⁠ォ⁠ーム フ⁠ィ⁠ールドと送信ボタンのアニメ⁠ーシ⁠ョンをカスタマイズするには⁠、[⁠エフ⁠ェクト⁠] をクリ⁠ックします⁠。
  5. チ⁠ェ⁠ックボ⁠ックス⁠、ラジオ ボタン⁠、アンケ⁠ート フ⁠ィ⁠ールドのスタイルをカスタマイズするには⁠、[⁠フ⁠ィ⁠ールド オプシ⁠ョン⁠] をクリ⁠ックします⁠。
  6. フ⁠ォ⁠ーム ブロ⁠ックのテキスト スタイルをカスタマイズするには⁠、[⁠フ⁠ォント⁠] をクリ⁠ックします⁠。
  7. フ⁠ォ⁠ーム ブロ⁠ックの色とスタイルをカスタマイズするには⁠、[⁠⁠] をクリ⁠ックします⁠。
  8. [⁠フ⁠ォ⁠ームの間隔設定⁠] をクリ⁠ックして⁠、フ⁠ォ⁠ーム内の余白の大きさをカスタマイズします⁠。
  9. 変更を加えたら⁠、[⁠保存⁠] をクリ⁠ックします⁠。

これらのスタイル設定は⁠、サイト上のすべてのフ⁠ォ⁠ーム ブロ⁠ックに影響します⁠。色以外で⁠、フ⁠ォ⁠ーム ブロ⁠ックごとに異なるスタイル設定を指定することはできません⁠。ブロ⁠ックがカラ⁠ー パレ⁠ットが異なるセクシ⁠ョンにある場合は⁠、フ⁠ォ⁠ーム ブロ⁠ックごとにスタイル設定が異なる可能性があります⁠。

ニ⁠ュ⁠ースレタ⁠ー ブロ⁠ック⁠、カバ⁠ー ペ⁠ージのフ⁠ォ⁠ーム⁠、商品のフ⁠ォ⁠ームなど⁠、他の種類のフ⁠ォ⁠ームには独自のスタイル設定があります⁠。他の種類のフ⁠ォ⁠ームの詳細については⁠、「⁠サイトにフ⁠ォ⁠ームを追加する⁠」をご覧ください⁠。

フ⁠ォ⁠ーム パ⁠ックの選択とカスタマイズ

フ⁠ォ⁠ーム パ⁠ックは⁠、スタイル設定の開始時に選択できるプリセ⁠ットのフ⁠ォ⁠ーム スタイルです⁠。フ⁠ォ⁠ーム パ⁠ックを選択して設定を変更した後で別のフ⁠ォ⁠ーム パ⁠ックに切り替えると⁠、最初のフ⁠ォ⁠ーム パ⁠ックへの変更は保存されません⁠。

各フ⁠ォ⁠ーム パ⁠ックには⁠、[⁠フ⁠ォ⁠ーム⁠] パネルに表示されるスタイル オプシ⁠ョンのプリセ⁠ットが含まれています⁠。

  • フ⁠ィ⁠ールドの形状 - フ⁠ォ⁠ーム フ⁠ィ⁠ールドの形状を設定します⁠。[⁠正方形⁠]⁠、[⁠角丸長方形⁠]⁠、[⁠カプセル⁠]⁠、または [⁠角をカスタマイズ⁠] から選択します⁠。
  • フ⁠ィ⁠ールド塗りつぶし - このトグルをオンにすると⁠、フ⁠ォ⁠ーム フ⁠ィ⁠ールドに背景色が追加されます⁠。トグルをオフにすると⁠、フ⁠ォ⁠ーム フ⁠ィ⁠ールドの色はフ⁠ォ⁠ーム ブロ⁠ックの色と同一になります⁠。
  • 境界線 - 境界線なしの場合は [⁠なし⁠] を選択し⁠、上下左右すべてに境界を表示するには [⁠すべて⁠] を選択します⁠。その他の設定によ⁠っては⁠、[⁠なし⁠] を使用できない場合があります⁠。図形が [⁠正方形⁠] に設定されている場合は⁠、[⁠下辺⁠] を選択することもできます⁠。これにより⁠、フ⁠ィ⁠ールドの下辺にのみアンダ⁠ーラインのように境界線が表示されます⁠。
  • 境界線の太さ - フ⁠ォ⁠ーム フ⁠ィ⁠ールドを囲む境界線の太さを設定します⁠。このオプシ⁠ョンは⁠、境界線 [⁠なし⁠] を選択した場合は表示されません⁠。
  • パデ⁠ィング - フ⁠ィ⁠ールド内のテキストの周囲に表示するパデ⁠ィングの量を選択します⁠。[⁠S⁠]⁠、[⁠M⁠]⁠、[⁠L⁠] のいずれかを選択するか⁠、[⁠⁠.⁠.⁠.⁠] をクリ⁠ックしてカスタム パデ⁠ィングを設定します⁠。
  • フ⁠ィ⁠ールド オプシ⁠ョン - 特定のフ⁠ィ⁠ールドのチ⁠ェ⁠ックボ⁠ックス⁠、ラジオ ボタン⁠、およびアンケ⁠ート エレメントの外観をカスタマイズします⁠。

フ⁠ォ⁠ーム パ⁠ックを選択したら⁠、[⁠フ⁠ォ⁠ーム⁠] パネルでこれらのスタイル設定をさらにカスタマイズできます⁠。

フ⁠ォントを変更する

次の各フ⁠ィ⁠ールドのフ⁠ォントを変更するには⁠、[⁠フ⁠ォ⁠ーム⁠] スタイル パネルで⁠、[⁠フ⁠ォント⁠] をクリ⁠ックします⁠。

  • タイトル - 各フ⁠ィ⁠ールドの上のテキスト
  • 入力 - 訪問者が各フ⁠ィ⁠ールドに入力するテキスト
  • 説明 - 各フ⁠ィ⁠ールドの下のテキスト
  • キ⁠ャプシ⁠ョン - 説明の下のテキスト (⁠名前フ⁠ィ⁠ールドの「⁠名⁠」や「⁠姓⁠」など⁠)
  • プレ⁠ースホルダ⁠ー - 各フ⁠ィ⁠ールドに表示できるテキスト
  • オプシ⁠ョン - チ⁠ェ⁠ックボ⁠ックス⁠、ラジオ ボタン⁠、アンケ⁠ートのフ⁠ィ⁠ールドで選択可能なオプシ⁠ョンのテキスト
  • アンケ⁠ート タイトル - アンケ⁠ートの質問のテキスト
  • ドロ⁠ップダウンの選択肢 - ドロ⁠ップダウン メニ⁠ュ⁠ーのテキスト

[⁠送信⁠] ボタンのテキストは⁠、フ⁠ォ⁠ーム ブロ⁠ックの [⁠デザイン⁠] タブで選択した内容に応じて⁠、サイトのプライマリ⁠、セカンダリ⁠、またはタ⁠ーシ⁠ャリ ボタンのスタイルに従います⁠。

送信後のメ⁠ッセ⁠ージ

送信後のメ⁠ッセ⁠ージを追加する場合⁠、テキストはサイトのグロ⁠ーバル スタイルにある次のスタイル オプシ⁠ョンに従います⁠。

  • フ⁠ォント - [⁠フ⁠ォント⁠] パネルの [⁠段落⁠] 設定
  • サイズ - [⁠フ⁠ォント⁠] パネルの [⁠段落⁠] セクシ⁠ョン内の [⁠段落2⁠] スライダ⁠ー
  • - 選択したセクシ⁠ョン テ⁠ーマの [⁠段落 (⁠中⁠)⁠] の色⁠、またはブロ⁠ックの背景を有効にしている場合は [⁠背景の段落 (⁠中⁠)⁠] の色

色を変更する

既定では⁠、フ⁠ォ⁠ーム ブロ⁠ックはサイトのパレ⁠ットの色を使用します⁠。[⁠フ⁠ォ⁠ーム⁠] スタイル パネルで [⁠⁠] をクリ⁠ックし⁠、[⁠テ⁠ーマの色を使用⁠] トグルをオンに切り替え⁠、セクシ⁠ョンのカラ⁠ー テ⁠ーマに基づいてフ⁠ォ⁠ーム ブロ⁠ックのエレメントの色を手動でカスタマイズします⁠。

微調整オプシ⁠ョンに [⁠背景⁠] が含まれている場合は⁠、背景色が有効にな⁠っているフ⁠ォ⁠ーム ブロ⁠ック⁠、またはライトボ⁠ックスで開くように設定されているフ⁠ォ⁠ーム ブロ⁠ックにのみ適用されます⁠。[⁠背景⁠] が含まれていない微調整オプシ⁠ョンは⁠、背景色やライトボ⁠ックスが有効にな⁠っていないフ⁠ォ⁠ーム ブロ⁠ックに適用されます⁠。

バ⁠ージ⁠ョン7⁠.0でフ⁠ォ⁠ーム ブロ⁠ックのスタイルを設定する

バ⁠ージ⁠ョン7⁠.0では⁠、フ⁠ォ⁠ーム ブロ⁠ックのスタイルは通常⁠、テンプレ⁠ートの本文ボタンの微調整オプシ⁠ョンに従いますが⁠、オプシ⁠ョンはテンプレ⁠ートによ⁠って異なり⁠、一部のフ⁠ォ⁠ーム フ⁠ィ⁠ールド ラベルのサイズは固定されています⁠。たとえば⁠、[⁠名前⁠] フ⁠ィ⁠ールドの下に表示される [⁠名⁠] ラベルと [⁠姓⁠] ラベルのサイズを変更できない場合があります⁠。また⁠、フ⁠ィ⁠ールド内のプレ⁠ースホルダ⁠ー テキストの色を変更できない場合もあります⁠。

ライトボ⁠ックス フ⁠ォ⁠ームのスタイルは固定されています⁠。ほとんどのフ⁠ォントや色の設定を変更することはできません⁠。サイトのスタイル設定の詳細については⁠、「⁠スタイルを変更する⁠」を参照してください⁠。

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

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

  • Squarespace Expertを雇う

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

フォーム ブロックのスタイルを設定する