### [CSSを使用したマルチページフォームの「前へ」および「次へ」ボタンのカスタマイズ](https://wpforms.com/docs/how-to-customize-the-previous-and-next-buttons-in-multi-page-forms/)
**公開日:** 2023年12月11日
**著者:** Umair Majeed
**抜粋:** マルチページフォームの「前へ」および「次へ」ボタンのスタイルをカスタマイズする方法を学びましょう。
**コンテンツ:**
マルチページフォームの「前へ」および「次へ」ボタンをカスタマイズしたいですか？フォームのボタンをカスタマイズすることは、サイトに個性とスタイルを追加するための素晴らしい方法です。
このチュートリアルでは、マルチページフォームの「前へ」および「次へ」ボタンのスタイルをカスタマイズする方法を説明します。
- [「前へ」および「次へ」ボタンのスタイリング](#style-previous-and-next)
- [ホバースタイルのカスタマイズ](#hover)
- [CSSの例](#example)
**注意**: コードを使用せずにフォームをスタイリングしたい場合は、[フォームのスタイリング](https://wpforms.com/docs/styling-your-forms/)チュートリアルをご覧ください。
---
開始する前に、WPFormsがサイトに[インストールおよび有効化](https://wpforms.com/docs/install-wpforms-plugin/)されており、[ライセンスが検証](https://wpforms.com/docs/verify-wpforms-license/)されていることを確認してください。次に、「前へ」および「次へ」ボタンを追加するために[マルチページフォームを作成](https://wpforms.com/docs/how-to-create-multi-page-forms-in-wpforms/)します。
**注意**: マルチページフォームを実際に確認し、すぐに開始するには、WPFormsの[Blue Badge Application Form Template](https://wpforms.com/templates/blue-badge-application-form-template/)を独自のフォームの基盤として使用できます。その後、このチュートリアルで説明するカスタマイズを適用して、「前へ」および「次へ」ボタンをスタイリングできます。
## 「前へ」および「次へ」ボタンのスタイリング
[CSS](http://www.wpbeginner.com/glossary/css/)は、WPFormsの「前へ」および「次へ」ボタン、およびフォームのその他の側面をカスタマイズするための優れた柔軟性を提供します。
CSSが初めての方や復習したい方は、[CSS入門ガイド](https://wpforms.com/docs/how-to-style-wpforms-with-custom-css-beginners-guide/)から始めるのが最適です。
WPFormsの「前へ」および「次へ」ボタンのデフォルトのCSSと、各CSS行が何をするかを説明するコメントを以下に示します。
```
div.wpforms-container-full .wpforms-form .wpforms-page-button {
background-color: #eee; /* グレーの背景 */
border: 1px solid #ddd; /* ダークグレーの境界線 */
color: #333; /* 黒い文字色 */
font-size: 1em; /* テキストのサイズ */
padding: 10px 15px; /* テキストと境界線の間の距離 */
}
```
これらの値を変更することで、ボタンをさまざまな方法でスタイリングできます。例として、まずボタンの背景色をオレンジ色に、テキストを白色に変更します。
まず、使用したい色の16進数コードを見つける必要があります。[htmlcolorcodes.com](http://htmlcolorcodes.com/)と[Adobe Color CC](https://color.adobe.com/create/color-wheel/)は、色を選択するのに役立つ便利な無料ツールです。
目的の色が決まったら、それらをCSSに追加できます。
```
div.wpforms-container-full .wpforms-form .wpforms-page-button {
background-color: #e27730 !important; /* オレンジ色の背景 */
color: #fff !important; /* 白いテキスト */
}
```
**注意**: サイトにCSSを追加する際は、カスタムスタイルが正常に適用されるように、セミコロンの前に**!important**を含める必要がある場合があります。詳細については、[CSSのトラブルシューティング](https://wpforms.com/docs/how-to-troubleshoot-css-not-working/)ガイドをご覧ください。
次に、[このCSSをサイトに追加](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/)する必要があります。最も簡単な方法は、WordPressのCSSエディターを使用することです。これを行うには、**外観** » **カスタマイズ**に移動し、**追加CSS**を選択します。
追加CSSセクションを開いたら、新しいCSSを追加できます。次に、**公開**ボタンをクリックすると完了です。
この例のCSSを適用すると、ボタンは次のようになります。
**注意**: 追加したCSSがサイトに表示されない場合は、[この問題のトラブルシューティング](https://wpforms.com/docs/how-to-troubleshoot-css-not-working/)に関するチュートリアルをご覧ください。
## ホバースタイルのカスタマイズ
CSSを使用すると、ユーザーがボタンにカーソルを合わせたときに完全に異なるスタイルを適用することもできます。この変更は、ボタンがクリック可能であることをユーザーに知らせるため、ユーザーエクスペリエンスを向上させるのに役立ちます。
以下は、WPFormsのボタンホバースタイルのデフォルトのCSSです。コメントで示されているように、背景色が少し暗くなり、境界線の色が少し明るくなります。
```
div.wpforms-container-full .wpforms-form .wpforms-page-button:hover, div.wpforms-container-full .wpforms-form .wpforms-page-button:active {
background-color: #ddd; /* 暗いグレーの背景 */
border: 1px solid #ccc; /* 明るいグレーの境界線 */
}
```
ボタンがホバーされていない場合のボタンよりもCSSが少ないことに気づくかもしれません。これは、CSSが、指示がない限り、前のすべてのスタイルをホバーされたボタンに適用するためです。
たとえば、デフォルトのスタイルをそのままにしておくと、ユーザーがボタンにカーソルを合わせたときにテキストの色は黒のままになります。これは、ボタンのテキスト色は通常黒であり、ホバー時に変更するように指示していないためです。
前のカスタムCSSの例と同様に、これらの値のいずれかを変更して、ボタンのホバースタイルを変更できます。この例では、ボタンにカーソルを合わせたときに、より暗いオレンジ色の背景を与えます。
```
div.wpforms-container-full .wpforms-form .wpforms-page-button:hover, div.wpforms-container-full .wpforms-form .wpforms-page-button:active {
background-color: #cd631d !important; /* 暗いオレンジ色の背景 */
}
```
CSSを適用すると、ボタンは次のようになります。
## CSSの例
基本をカバーしたので、次に「前へ」および「次へ」ボタンのカスタムCSSの完全な例を見ていきましょう。
**注意:** 以下のコードは、WPFormsで作成されたサイト上の**すべて**のマルチページフォームの「前へ」および「次へ」ボタンを変更します。
単一のフォームの「前へ」および「次へ」ボタンのみをスタイリングしたい場合は、そのフォームの一意のIDを見つける必要があります。詳細については、[CSSを使用したお問い合わせフォームのスタイリング](https://wpforms.com/how-to-style-contact-forms-in-wordpress/)の完全ガイドを参照してください。
この例に追加するCSSは次のとおりです。ホバー時のスタイル変更も含まれています。
```
/* 新しいボタンのスタイル */
div.wpforms-container-full .wpforms-form .wpforms-page-button {
background-color: #003B6D !important; /* 暗い青色の背景 */
border: 2px solid #BDBDBD !important; /* グレーの境界線 */
color: #fff !important; /* 白いテキスト */
font-size: 1em !important; /* テキストサイズの増加 */
font-weight: bold !important; /* 太字テキスト */
padding: 16px !important; /* テキストと境界線の間の距離の増加 */
width: 25% !important; /* ボタンの幅を4分の1にする */
}
/* 新しいボタンのホバースタイル */
div.wpforms-container-full .wpforms-form .wpforms-page-button:hover, div.wpforms-container-full .wpforms-form .wpforms-page-button:active {
background-color: #BDBDBD !important; /* グレーの背景 */
border: 2px solid #003B6D !important; /* 暗い青色の境界線 */
}
```
このCSSを適用したカスタマイズされたボタンは次のようになります。
そして、ホバー時のボタンは次のようになります。変更は背景色と境界線の色のみであることに注意してください。
これで完了です！カスタムCSSを使用して、「前へ」および「次へ」ボタンをカスタマイズできるようになりました。
フォームにさらにカスタムスタイルを追加したいですか？[個々のフォームフィールドのスタイルをカスタマイズする方法](https://wpforms.com/docs/how-to-customize-the-style-of-individual-form-fields/)に関するチュートリアルをご覧ください。
**カテゴリ:** スタイリング、スタイリングとカスタマイズ
---