### [確認画面の投票結果のスタイル設定方法](https://wpforms.com/developers/how-to-style-the-poll-results-confirmation-screen/) **公開日:** 2019年10月31日 **著者:** エディトリアルチーム **抜粋:** 少量のCSSで、確認画面に表示される投票結果のスタイルを簡単に設定できます。その方法をご紹介します。 **コンテンツ:** ## 概要 確認ページに表示される投票結果画面のスタイルを設定したいですか？ **Survey and Polls** アドオンを使用すると、これらの結果を簡単に確認メッセージ内に表示することを選択できます。少しのCSSで、これらの結果のスタイルを簡単に変更できます。このチュートリアルでは、投票結果のスタイルを変更する方法をステップごとに説明します。 デフォルトでは、投票結果にはすでにスタイルが追加されています。  ## セットアップ このドキュメントの目的のために、[このチュートリアル](https://wpforms.com/docs/how-to-install-and-use-the-surveys-and-polls-addon/ "Surveys and Pollsアドオンのインストールと使用方法")の手順に従って、すでにフォームを作成していることを前提とします。 #### 投票結果の有効化 まず、フォームビルダーを開き、**Settings » Surveys and Polls** タブに移動します。 次に、**Enable Poll Results** チェックボックスをクリックします。  #### CSSコードの追加 投票結果のスタイルを設定するには、このCSSをサイトにコピーして貼り付ける必要があります。サイトにCSSを追加する方法についてサポートが必要な場合は、[このチュートリアル](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/ "WPFormsのカスタムCSSスタイルの追加方法")をご覧ください。 ``` #wpforms-confirmation-194 .wpforms-poll-answer-bar { background-color: #c45e1b; background: repeating-linear-gradient(45deg, #c45e1b, #c45e1b 10px, #f08a5d 10px, #f08a5d 20px); border-right: 1px solid #c45e1b; } #wpforms-confirmation-194 { background: transparent; border: none; } ``` linear-gradientsの詳細については、[Mozillaのドキュメント](https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient "linear-gradient()")を参照してください。 **-194** を、お使いのフォームの実際のフォームIDに更新してください。フォームIDの見つけ方がわからない場合は、[このチュートリアル](https://wpforms.com/developers/how-to-locate-form-id-and-field-id/ "フォームIDとフィールドIDの特定方法")を確認してください。  上記のCSSでグラデーションカラーを選択するのに支援が必要な場合は、オンライン（無料）ジェネレーターについては[CSS Gradientサイト](https://cssgradient.io/ "CSS Gradient")をご覧ください。 これで、CSSを使用して確認画面の投票結果のスタイルを正常に変更できました。フォームフィールドのプレースホルダーのスタイルを設定する方法を学びたいですか？ [フォームフィールドのプレースホルダーテキストのスタイル設定方法](https://wpforms.com/developers/style-placeholder-text-for-form-fields/ "フォームフィールドのプレースホルダーテキストのスタイル設定方法")に関するこのチュートリアルをご覧ください。 **カテゴリー:** スニペット **タグ:** CSS ---