WPFormsをカスタムCSSでスタイリングする（初心者向けガイド）

フォームにカスタムスタイルを追加できるようにしたいですか？ CSSは、フォームにユニークで個別のスタイルを与えることができる強力なツールです。

このチュートリアルでは、多くの例を含め、フォームをスタイル設定するためのカスタムCSSの作成方法を説明します。

---

CSSとは？

CSSはCascading Style Sheetsの略で、ブラウザがインターネット上で目にするほとんどすべてのものをスタイル設定するために読み取るコードです。フォントサイズやスタイルから色やホバーエフェクトまで、すべてを制御します。それがなければ、ほとんどのウェブは非常に退屈なテキストファイルのように見えるでしょう。

CSSを読む

他の多くの種類のコードとは異なり、CSSはコーディング経験が全くなくても比較的簡単に学習できます。最初のステップは、CSSの3つの主要なコンポーネントを理解することです。

• セレクター：スタイルを適用したい「ターゲット」
• プロパティ：フォントサイズや色など、変更したい特定のスタイル
• 値：適用したい特定のスタイル効果

例として、フォームタイトルのサイズを設定するこのCSSスニペットを確認してください。

.wpforms-form .wpforms-title {
    font-size: 26px !important;
}

この例のセレクターは.wpforms-form .wpforms-titleであり、サイト上のすべてのWPFormsのタイトルにCSSを適用します。

次に、波括弧の中に、この例では1つのCSSプロパティがあります：font-size。このプロパティの値は26ピクセルです。

フォームのタイトルテキストを大きくしたい（たとえば35ピクセル）と判断した場合、CSSの値だけを変更する必要があります。

.wpforms-form .wpforms-title {
    font-size: 35px !important;
}

CSSセレクターの選択

CSSを作成する最初のステップは、フォームの特定の С частиをターゲットにするための正しいセレクターを特定することです。セレクターを選択する方法は2つあります。

1) リストからセレクターをコピーする

フォームの利用可能なすべてのフィールドに対応する包括的なセレクターリストを作成しました。そのため、CSSを適用したい領域のセレクターを選択するだけです。

2) ブラウザの開発者ツールを使用する

このより高度なアプローチには学習曲線がありますが、多くのカスタムCSSを作成したい場合には優れたオプションです。

開発者ツールを使用すると、ウェブページの任意の С частиを検査して、適用されているCSSを確認できます。また、CSSの変更をその場でテストして、ブラウザにすぐに適用されているのを確認することもできます。WPBeginnerには、開発者ツールの使用に関するチュートリアルがあり、Chromeの開発者ツールの使用に関するステップバイステップのビデオを含め、開始に役立つはずです。

CSSプロパティと値の使用

CSSセレクターの選択方法がわかったので、次にCSSプロパティと値を使用して特定のスタイルを変更する方法について説明します。

以下に、フォームで役立つ可能性のある基本的なCSSプロパティをいくつか紹介します。さらに、セレクター、プロパティ、および値を組み合わせて完全なCSSスニペットを作成することで、変更できるスタイルの例も紹介します。

このリストのリンクをクリックするだけで、必要なセクションにスキップできます。

• フォントファミリー
• 色
• フォントサイズ
• 背景色
• パディング
• 境界線
• 角丸

フォントファミリー

• • 定義: デフォルトのフォントスタイル
  • 例: サイトのフォームのタイトルのデフォルトフォントをArialに変更するには、次のように使用します。

.wpforms-form .wpforms-title {
    font-family: 'Arial', sans-serif !important;
}

色

• • 定義: フォントの色
  • 例: サイトのすべてのフォームのタイトルを青色にするには、次のように使用できます。

.wpforms-form .wpforms-title {
    color: #007acc !important;
}

フォントサイズ

• • 定義: フォントのサイズ（単位はpx、em、またはremを使用できます）
  • 例: サイトのすべてのフォームのタイトルを35pxにするには、次のように使用します。

.wpforms-form .wpforms-title {
    font-size: 35px !important;
}

背景色

• • 定義: セレクター領域の背景を塗りつぶす色
  • 例: フォーム全体の背景をライトグレーにするには、次のCSSを使用できます。

.wpforms-form {
    background-color: #eee !important;
}

パディング

• • 定義: セレクター要素とその境界線の間の距離
  • 例: 上記の例では、テキストと色のボックスの端の間に距離がないことに気づきましたか？背景色に加えて、フォームの上部と下部に20ピクセル、右側と左側に15ピクセルのパディングを追加しましょう。これは、前の例のCSSにpadding: 20px 15px;を追加することで行います。

.wpforms-form {
    background-color: #eee !important;
    padding: 20px 15px !important;
}

境界線

• • 定義: 要素の端のスタイルと太さを決定します
  • 例: 上記の例に、厚さ3ピクセル、実線、ダークグレーの境界線を追加しましょう。これは、.wpforms-formの既存のCSSにborder: 3px solid #666;を追加することで行います。

.wpforms-form {
    background-color: #eee !important;
    padding: 20px 15px !important;
    border: 3px solid #666 !important;
}

角丸

• • 定義: 要素の角がどれだけ丸くなるか（0pxは四角いエッジ、数値が大きいほど丸くなります）
  • 例: 上記の例を引き続き使用し、フォームのエッジを丸めるために20ピクセルのボーダー半径を追加します。これは、すでに作成したCSSにborder-radius: 20px;を追加することで行えます。

.wpforms-form {
    background-color: #eee !important;
    padding: 20px 15px !important;
    border: 3px solid #666 !important;
    border-radius: 20px !important;
}

個々のフォームのスタイル設定

上記で説明したCSSセレクターを使用すると、サイト上のすべてのWPFormsに同じスタイルを簡単に適用できます。ただし、特定のフォームにのみスタイルを適用したい場合は、セレクターにフォームのIDを追加する必要があります。

フォームのIDを簡単に見つけるには、ショートコードを確認してください。これは、ページ/投稿エディターで確認するか、WPForms » すべてのフォームに移動して、ショートコード列を確認することで確認できます。

この例では、フォームのIDは4です。前のスタイルをこの単一のフォームにのみ適用するには、セレクターの先頭に#wpforms-4を追加する必要があります。修正されたCSSは次のとおりです。

#wpforms-4 .wpforms-form {
    background-color: #eee !important;
    padding: 20px 15px !important;
    border: 3px solid #666 !important;
    border-radius: 20px !important;
}

CSSスニペットを作成したら、次のステップはそれをサイトに追加することです。WordPressにカスタムCSSを追加する方法に関するWPBeginnerのガイドに従って、その方法を学ぶことができます。

これで、フォームのカスタムCSSスタイルを作成できます。カスタムフォームデザインを作成するためのCSSの例については、盗むことができる美しいフォームデザインに関する記事を参照してください。

次に、フォームにカスタム送信ボタンのスタイルを追加したいですか？詳細と例については、送信ボタンのカスタマイズに関するチュートリアルを確認してください。