### [WPFormsにカスタムCSSスタイルを追加する方法](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/)
**公開日:** 2019年10月9日
**著者:** エディトリアルチーム
**抜粋:** このチュートリアルでは、WPFormsのフォームやフィールドの外観をカスタマイズするために、サイトにCSSを追加する方法を説明します。
**コンテンツ:**
サイトにカスタムCSSスタイルを追加したいですか？このチュートリアルでは、選択した方法ごとにステップバイステップの説明で、これらのスニペットをサイトに追加する方法を複数紹介します。
この役立つガイドを使用すると、スニペットをサイトに追加したい方法を簡単に選択できます。実装方法を選択したら、開発者ドキュメントを探索して、サイトに追加したいCSSスニペットを選択できます。
利用可能なすべてのスニペットのホストを確認するには、[開発者ドキュメントをご覧ください](https://wpforms.com/developers/ "WPForms開発者ドキュメント")。
サイトにカスタムCSSスニペットを追加する方法をより実践的に確認するには、ビデオチュートリアルをご覧ください。
## 実装オプション
CSSは、サイトやフォームのスタイリングに強力なツールです。カスタムCSSをサイトに追加するには、主に3つのアプローチがあります。
#### WPCodeプラグインを使用する（推奨）
WPCodeプラグインを使用すると、CSSスニペットをサイトに非常に迅速かつ簡単に追加できます。
このプラグインをカスタムスニペットの追加に強く推奨する多くの理由の1つは、スニペットを保存する前に組み込みのチェックがあることです。セミコロンが欠落していたり、余分な括弧が追加されていたりすると、スニペットは保存されません。これにより、コピー＆ペーストしたCSSスニペットが正しくないためにサイトで問題が発生するのを防ぐことができます。そして、無料バージョンでも、スニペットがアクティブになる前にこの追加の監査を受け取ることができます。
このプラグインの詳細については、[専用ドキュメントを含む詳細情報については、サイトをご覧ください](https://wpcode.com/ "ヘッダーとフッターの挿入 – WPCodeによるコードスニペット")。
プラグインをインストールしたら、WordPressダッシュボードの左側メニューから**コードスニペット**メニューに移動し、**+スニペットを追加**を選択します。次に、**カスタムコードを追加（新規スニペット）**をクリックし、青い**スニペットを使用**ボタンをクリックして新しいCSSスニペットを作成します。
新しいスニペット画面が表示されたら、あなたとサイト管理者がその目的を理解できるように、スニペットにわかりやすい名前を付けます。**コードタイプ**ドロップダウンから、このスニペットにCSSのみを追加するため、**CSS**を選択します。
**コードプレビュー**セクションにCSSを追加します。ここでは、このドキュメントの目的で使用する例を示します。
```
/*ここにCSSコードを記述してください*/
ul#wpforms-999-field_27 li label,
ul#wpforms-999-field_26 li label {
padding: 10px;
transition: all ease 0.3s;
background: linear-gradient(to right, #e27730 50%, #cd631d 50%);
background-size: 200% 100%;
background-position: left bottom;
color: white;
}
ul#wpforms-999-field_27 li.wpforms-selected label,
ul#wpforms-999-field_27 li label:hover,
ul#wpforms-999-field_26 li.wpforms-selected label,
ul#wpforms-999-field_26 li label:hover {
cursor: pointer;
border-radius: 2px;
background-position: right top;
}
ul#wpforms-999-field_27 li input,
ul#wpforms-999-field_26 li input {
display: none;
}
ul#wpforms-999-field_27 li,
ul#wpforms-999-field_26 li {
float: left;
width: auto;
display: inline-block;
padding: 10px 10px 10px 0!important;
}
```
次に、**挿入**セクションが表示されます。CSSを追加するため、**挿入方法**で**自動挿入**を、**場所**で**サイト全体ヘッダー**を選択します。
スニペットを追加したら、**スニペットを保存**をクリックします。これによりスニペットは保存されますが、自動的にアクティブにはなりません。最初に保存すると、スニペットのステータスはデフォルトで**非アクティブ**に設定されていることに気づくでしょう。**非アクティブ**から**アクティブ**にスイッチを切り替え、**更新**をクリックしてスニペットを**アクティブ**に設定します。
#### CSS Heroを使用する
コードに触れたくない場合は、WPFormsにCSS Heroの使用方法に関する完全なチュートリアルがあります。詳細については、[このチュートリアルに従ってください](https://wpforms.com/docs/how-to-style-wpforms-without-knowing-any-code/ "HTMLやCSSを知らなくてもCSS HeroでWPFormsをカスタマイズする方法")。
#### 子テーマを作成する
子テーマは、より高度な開発に推奨されます。子テーマの作成方法については、[このチュートリアルに従ってください](http://www.wpbeginner.com/wp-themes/how-to-create-a-wordpress-child-theme-video/ "WordPressの子テーマを作成する方法（ビデオ）
").
各子テーマには必須の**style.css**があり、このファイルにカスタムCSSを追加します。
#### WordPressカスタムizerを使用する
WordPress 4.5以降、WordPressはテーマやインストールされているプラグインにカスタムCSSスタイルを追加するための組み込みツールを提供しており、これはCSSを追加するための一般的な選択肢となっています。
WordPressカスタムizerの詳細については、[ドキュメントをご覧ください](http://www.wpbeginner.com/plugins/how-to-easily-add-custom-css-to-your-wordpress-site/ "WordPressサイトにカスタムCSSを簡単に追加する方法")。
**外観** » **カスタマイズ** » **追加CSS**に移動すると、WordPressカスタムizerを見つけることができます。
CSSを追加した後、変更を保存するために**公開**ボタンをクリックすることを忘れないでください。テーマがアクティブである限り、カスタムCSSは適用されます。
テーマを非アクティブにすると、ここに追加されたカスタムCSSはテーマ自体に接続されているため、カスタムCSSは削除されます。
## 注意事項
サイトにカスタムコードを追加する場合は、コードを保護することが重要です。したがって、どの方法を選択しても、[まずサイトをバックアップする](http://www.wpbeginner.com/plugins/7-best-wordpress-backup-plugins-compared-pros-and-cons/ "WordPressバックアッププラグイン7選を比較：長所と短所")ことをお勧めします。そうすれば、必要に応じてサイトファイルやデータベースの古いバージョンにアクセスできます。
## 追加リンク
WPFormsのカスタムCSSに関する追加情報については、これらの参照リンクを確認してください。
- [WPFormsのスタイリングドキュメント](https://wpforms.com/categories/docs/styling/ "WPFormsのスタイリングドキュメント")
- [CSSを使用してWPFormsをスタイリングするためのドキュメントの完全なリスト](https://wpforms.com/developers/tags/css/ "CSSを使用してWPFormsをスタイリングするためのドキュメントの完全なリスト")
## FAQ
#### Q: これはWPFormsのカスタムCSSの追加にどのように役立ちますか？
**A:** このチュートリアルは、WPFormsのカスタムCSSに特化したものではありませんが、サイトに追加したい**あらゆる**カスタムCSSに役立ちます。
上記のオプションの中から、[チュートリアル](https://wpforms.com/developers/categories/tutorials/ "チュートリアル")および[スニペット](https://wpforms.com/developers/categories/snippets/ "スニペット")セクションで言及されているWPFormsコードスニペットを含む、コードスニペットを追加するのに最も簡単な方法を見つけてください。
**カテゴリ:** 入門
**タグ:** CSS
---