reCAPTCHAをあなたのウェブサイトのダークテーマに合わせたいですか?GoogleのCheckbox v2 reCAPTCHAにはデフォルトでライトテーマが付属していますが、シンプルなJavaScriptスニペットで簡単にダークテーマに切り替えることができます。この機能拡張は、ダークなカラースキームのサイトや、より洗練された外観にしたい場合に最適です。
このガイドでは、reCAPTCHAのテーマをライトからダークに変更する方法を説明します。
reCAPTCHAテーマを理解する
デフォルトでは、reCAPTCHAは明るいテーマで表示されます。しかし、Googleは組み込みのダークテーマオプションを提供しており、簡単な属性変更で有効にすることができます。
このテーマ変更は以下の場合に適用される:
- Google チェックボックス v2 reCAPTCHA
- 見えないreCAPTCHA v2
- hCAPTCHA
前提条件
テーマを変更する前に、以下を確認してください:
- WPFormsでフォームを作成しました。ヘルプが必要な場合は、フォームの作成方法に関するガイドをご覧ください。
- フォームにreCAPTCHAを設定します。設定方法についてはWPFormsのreCAPTCHA設定に関するドキュメントをご覧ください。
- Google Checkbox v2 reCAPTCHA をフォームの設定 "スパム対策とセキュリティタブで有効にします。
![wpforms-change-captcha-theme-settings - WPForms フォーム設定の [全般] タブで Google reCAPTCHA を有効にします。](https://wpforms.com/wp-content/uploads/2019/10/wpforms-change-captcha-theme-settings.jpg)
テーマ変更コードの追加
ダークテーマに切り替えるには、このコードスニペットをサイトに追加してください。カスタムコードの追加にヘルプが必要な場合は、コードスニペットの追加に関するチュートリアルをご覧ください。
このコードは data-theme="dark"
属性を reCAPTCHA 要素に追加します。その他のカスタマイズオプションについては GoogleによるreCAPTCHA開発者ガイド.
コードがあなたのサイトに追加されると、あなたのキャプチャ・テーマはDarkに設定されます。

これで完了です!これでキャプチャのテーマをライトから ダークに変更できました。次に、フォームのテキストの外観をカスタマイズしたいですか?フォームフィールドのプレースホルダテキストをスタイリングするガイドをご覧ください。