### [Google Checkbox v2 reCAPTCHA のキャプチャテーマを変更する](https://wpforms.com/developers/how-to-change-the-captcha-theme-on-google-checkbox-v2-recaptcha/)

**公開日:** 2019年10月14日
**著者:** Umair Majeed

**概要:** このチュートリアルでは、JavaScriptを使用してGoogle reCAPTCHAのデフォルトテーマを「ライト」から「ダーク」に変更する方法をご紹介します。

**内容:**

reCAPTCHAをウェブサイトのダークテーマに合わせてみませんか？GoogleのCheckbox v2 reCAPTCHAはデフォルトでライトテーマが設定されていますが、簡単なJavaScriptスニペットを使用すれば、ダークテーマに簡単に切り替えることができます。 この機能は、ダークカラーの配色を採用しているサイトや、より洗練された外観にしたい場合に最適です。

このガイドでは、reCAPTCHAのテーマをライトからダークに変更する方法をご紹介します。

## reCAPTCHAのテーマについて

デフォルトでは、reCAPTCHAはライトテーマで表示されます。しかし、Googleは組み込みのダークテーマオプションを提供しており、簡単な属性の変更で有効にすることができます。

このテーマの変更は、以下のものに適用されます：

- Google Checkbox v2 reCAPTCHA
- Invisible reCAPTCHA v2
- hCAPTCHA

## 準備

テーマを変更する前に、以下の条件を満たしていることを確認してください：

1. WPFormsでフォームを作成済みであること。作成方法については、[フォームの作成方法](https://wpforms.com/docs/creating-first-form/)のガイドをご参照ください。
2. フォームに reCAPTCHA を設定していること。設定方法については、[WPForms での reCAPTCHA の設定方法](https://wpforms.com/docs/how-to-set-up-and-use-recaptcha-in-wpforms/)に関するドキュメントをご確認ください。
3. フォームの **設定** 内で Google Checkbox v2 reCAPTCHA を有効にしていること » **スパム対策とセキュリティ** タブで有効にします。

![フォーム設定の [一般] タブで Google reCAPTCHA を有効にする](https://wpforms.com/wp-content/uploads/2019/10/wpforms-change-captcha-theme-settings.jpg)## テーマ変更コードの追加

ダークテーマに切り替えるには、このコードスニペットをサイトに追加してください。カスタムコードの追加についてサポートが必要な場合は、[コードスニペットの追加](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/)に関するチュートリアルをご確認ください。

このコードは、reCAPTCHA要素に`data-theme="dark"`属性を追加することで機能します。その他のカスタマイズオプションについては、[GoogleのreCAPTCHA開発者ガイド](https://developers.google.com/recaptcha/old/docs/customization)をご参照ください。

コードをサイトに追加すると、キャプチャのテーマが**ダーク**に設定されます。

![上記のコードを使用すると、キャプチャのテーマをダークに変更できます](https://wpforms.com/wp-content/uploads/2019/10/wpforms-dark-theme-google-captcha.jpg)これで完了です！ キャプチャのテーマを**ライト**から**ダーク**に正常に変更できました。次に、フォームのテキストの表示をカスタマイズしてみませんか？[フォームフィールドのプレースホルダーテキストのスタイル設定](https://wpforms.com/developers/style-placeholder-text-for-form-fields/)に関するガイドをご覧ください。

## リファレンスアクション

[wpforms\_wp\_footer\_end](https://wpforms.com/developers/wpforms_wp_footer_end/ "wpforms_wp_footer_end アクションの使用")

**カテゴリ:** 機能拡張

**タグ:** カスタムキャプチャアドオン, Javascript, JS

---