---
title: "フォームのスタイルをカスタマイズする"
slug: "customize-the-style-of-a-form"
abstract: "フォームの背景画像、幅、フォント、色、リンクなどの一般的な設定を編集してスタイリングを変更してください。また、一部のフィールドに対してカスタムの検証メッセージを作成することも可能です。"
---
# フォームのスタイルをカスタマイズする

フォームのスタイルをカスタマイズするには、左側の一般的なスタイリングオプションや右側の [アイテム固有の](https://doc.sitecore.com/sai/ja/users/sitecoreai/design-components/forms/designing-forms/work-with-field-items/configure-field-items.html "Configure field items") 設定を利用できます。

フォームを作成後すぐに全体的な見た目や雰囲気をカスタマイズできます。カスタムフォントの設定、リンク設定、ソーシャルメディアなども設定可能です。

複数のページがあり、それぞれの見た目を変えたい場合は、[各ページのスタイリングを個別に編集](https://doc.sitecore.com/sai/ja/users/sitecoreai/design-components/forms/designing-forms/work-with-multiple-form-pages.html "Work with multiple form pages") する必要があります。

フォームのスタイルをカスタマイズするには:

1.  エディターの左側ペインで「 **オプション** 」タブをクリックします。
    
2.  **一般設定**セクションで、以下を設定できます:
    
    -   **コンテンツ幅** - 幅を入力し、上下矢印を使って幅を編集してください。デフォルトの幅は1000です。
    -   **境界幅** - 幅を入力したり、上下矢印を使って境界幅を編集できます。
    -   **ボーダーカラー** - ボーダーの色を選択します。デフォルトの色は黒です。
    -   **背景色** - 背景色を選択します。
    -   **背景画像を追加** - クリックして [背景画像を選択しアップロード](https://doc.sitecore.com/sai/ja/users/sitecoreai/design-components/forms/styling-forms/customize-the-style-of-a-form/add-a-background-image.html "Add a background image")します。
    -   **背景画像を変更する** - 新しい背景画像を選択して現在のものを置き換えるボタンをクリックしてください。
    -   **背景画像を削除** - 現在の背景画像を削除するためにクリックします。
3.  **Googleフォント**を展開して[カスタムフォントをデザインに追加](https://doc.sitecore.com/sai/ja/users/sitecoreai/design-components/forms/styling-forms/customize-the-style-of-a-form/work-with-form-fonts.html "Work with form fonts")してください。
    
4.  高ピクセル密度の画像を表示するには、「 **Retina画質の画像を使用** 」のチェックボックスを選択してください。
    
    > !注レティナ品質の画像を使うと、受信者の帯域幅使用が増え、フォームの読み込み時間が長くなることもあります。
    
5.  **リンク設定**を展開して、リンクの色、フォントファミリー、フォントサイズを設定できます。
    
6.  スロット **を展開** すると、スロットの背景色、コンテンツの背景色、アライメント、最小高さ、パディング、境界の幅、半径、色を設定できます。
    
7.  **テキスト**展開で、テキストのデフォルトフォントカラー、フォントサイズ、行長、フォントファミリー、背景色、影、境界幅、色、半径、パディングを設定できます。
    
8.  **検証メッセージ**を展開して、デフォルトの検証メッセージをカスタムメッセージに上書きします。**これはRequiredフィールド**、**Emailフィールド**、**Phoneフィールド**で可能です。
    
    ![Screenshot of the left-hand pane showing some styling configuration options](https://doc.sitecore.com/api/markdown-image/sai/ja/users/sitecoreai/images/customvalidation.png)
    
9.  **スペーサー**を展開して、スペーサーの背景色、影、高さ、境界の幅、色、半径を設定します。
    
10.  **画像**を展開すると、画像の背景色、影、境界線の幅と色、アライメント、パディング、画像の境界半径、URLリンク、代替テキスト(オルトテキスト)を設定します。
     
11.  アクションを展開 **ボタン** で、背景色、影、ボタン、ラベル、境界線の色、ラベル、フォントファミリー、フォントサイズ、アライメント、ボタン幅、ラベルパディング、マージン、境界幅、コーナー半径を設定できます。
     
12.  **ソーシャルメディア**を展開すると、ソーシャルメディアの背景色、影、間隔、位置合わせ、アイコンスタイル、ソーシャル設定を設定します(ソーシャルメディアのアイコンをクリックするとURLが追加されます)。