重要: reCAPTCHA API のバージョン 1.0 のサポートは終了しました。バージョン 2.0 にアップグレードしてください。詳細
reCAPTCHA をサイトに正常にインストールしたら、表示方法を変更できます。このページ 説明: (1)標準の reCAPTCHA テーマのいずれかを選択する方法。(2)reCAPTCHA の外観を完全にカスタマイズする方法。(3)ウィジェットの言語を変更して reCAPTCHA を多言語化する方法。
標準テーマ
reCAPTCHA ウィジェットに別のテーマを表示するには、まず次のコードをメインの HTML ページ(<form> の前)reCAPTCHA が表示される要素(これは、 reCAPTCHA が最初に呼び出されるメイン スクリプトの後に配置):
<script type="text/javascript"> var RecaptchaOptions = { theme : 'theme_name' }; </script>
標準のテーマを使用するには、'theme_name'
を次の 4 つのテーマのいずれかに置き換える必要があります
name:
「赤」(デフォルトのテーマ) | '白' |
---|---|
![]() |
![]() |
'ブラックグラス' | 「クリーン」 |
![]() |
![]() |
カスタム テーマ設定
カスタム テーマ設定では、reCAPTCHA 画像の表示方法を正確に制御できます。(カスタムテーマ設定のデモはこちらです)。使用するには、
カスタムテーマ設定を行うには、まず RecaptchaOptions
のテーマ プロパティを「custom」に設定する必要があります。この
reCAPTCHA に、独自のユーザー インターフェースを作成しないように指示します。reCAPTCHA は、ユーザーが認識した
次の ID を持つ HTML 要素を使用して、ユーザーに CAPTCHA を表示します。
-
ID
recaptcha_image
の空の div。ここで 実際の画像が配置されます。div は 300x57 ピクセルにします。 -
ID と名前の両方が設定されたテキスト入力
recaptcha_response_field
に送信します。ユーザーはここで 解答を入力します。 -
(省略可)reCAPTCHA 全体を含む div
追加します。この ID div は
custom_theme_widget
と div のスタイルをdisplay:none
に設定します。reCAPTCHA テーマ設定コードの後 これで div が表示されるようになります。この要素は 読み込み中にページがちらつくことがあります。
これらをすべて実装するには、まずメイン HTML ページの <form> の前の任意の場所に次のコードを配置します。 要素です。
<script type="text/javascript"> var RecaptchaOptions = { theme : 'custom', custom_theme_widget: 'recaptcha_widget' };
次に、<form> 内に要素を追加して、次の場所に配置します。
<div id="recaptcha_widget" style="display:none"> <div id="recaptcha_image"></div> <div class="recaptcha_only_if_incorrect_sol" style="color:red">Incorrect please try again</div> <span class="recaptcha_only_if_image">Enter the words above:</span> <span class="recaptcha_only_if_audio">Enter the numbers you hear:</span> <input type="text" id="recaptcha_response_field" name="recaptcha_response_field" /> <div><a href="javascript:Recaptcha.reload()">Get another CAPTCHA</a></div> <div class="recaptcha_only_if_image"><a href="javascript:Recaptcha.switch_type('audio')">Get an audio CAPTCHA</a></div> <div class="recaptcha_only_if_audio"><a href="javascript:Recaptcha.switch_type('image')">Get an image CAPTCHA</a></div> <div><a href="javascript:Recaptcha.showhelp()">Help</a></div> </div> <script type="text/javascript" src="http://www.google.com/recaptcha/api/challenge?k=your_public_key"> </script> <noscript> <iframe src="http://www.google.com/recaptcha/api/noscript?k=your_public_key" height="300" width="500" frameborder="0"></iframe><br> <textarea name="recaptcha_challenge_field" rows="3" cols="40"> </textarea> <input type="hidden" name="recaptcha_response_field" value="manual_challenge"> </noscript>
最後の数行は、「はじめに」で説明した reCAPTCHA の標準的な表示方法です。 説明します。
上記のコードは次のようになります。Recaptcha JavaScript オブジェクトには、 CAPTCHA の状態を変更できます。メソッド reload は、新しい CAPTCHA チャレンジを表示し、メソッドは switch_type は、画像と音声の CAPTCHA を切り替えます。reCAPTCHA の完全な UI を作成するには、 キャプチャの状態に応じて異なる情報を表示します。たとえば、ユーザーが閲覧中の動画 画像キャプチャ(「音声キャプチャを取得」へのリンク)表示されます。4 つの CSS クラスを使用して、 ステートフル UI:
CSS クラス | 表示タイミング |
---|---|
recaptcha_only_if_image | 画像のキャプチャが表示されています |
recaptcha_only_if_audio | 音声キャプチャが表示されています |
recaptcha_only_if_incorrect_sol | 前の解答が正しくなかった |
recaptcha_only_if_no_incorrect_sol | 前の解答は正しくなかった |
テーマ設定には多くのオプションがありますが、ユーザー インターフェースの整合性ルールに従う必要があります。
- CAPTCHA ウィジェットの近くで reCAPTCHA を使用していることを申告する必要があります。
- 再読み込み関数を呼び出すボタンを表示する必要があります。
- 視覚障がいのあるユーザーが音声キャプチャにアクセスする方法を提供する必要があります。
- reCAPTCHA ウィジェットでボタンとして使用する画像については、代替テキストを指定する必要があります。
国際化: ウィジェットの言語の変更
reCAPTCHA ウィジェットを国際化する方法は 2 つあります。
組み込みの翻訳機能
reCAPTCHA には多数の翻訳機能が組み込まれています。これらを使用するには、
RecaptchaOptions
:
<script type="text/javascript"> var RecaptchaOptions = { lang : 'fr', }; </script>
カスタム翻訳
お使いの言語の翻訳がない場合は、独自の翻訳を作成できます。すべての文字列を翻訳する必要があります。 reCAPTCHA JavaScript を実装し、「custom_translations」を RecaptchaOptions 変数を使用します。設定していない文字列は、デフォルトの翻訳から取得されます。 あります。これにより、デフォルトの翻訳の一部のみをオーバーライドできます(たとえば、選択した翻訳が あります。例:
<script type= "text/javascript"> var RecaptchaOptions = { custom_translations : { instructions_visual : "This is my text:" } }; </script>
カスタム イタリア語翻訳の例を以下に示します(このコードを reCAPTCHA を呼び出す前に配置してください)。
<script type="text/javascript"> var RecaptchaOptions = { custom_translations : { instructions_visual : "Scrivi le due parole:", instructions_audio : "Trascrivi ci\u00f2 che senti:", play_again : "Riascolta la traccia audio", cant_hear_this : "Scarica la traccia in formato MP3", visual_challenge : "Modalit\u00e0 visiva", audio_challenge : "Modalit\u00e0 auditiva", refresh_btn : "Chiedi due nuove parole", help_btn : "Aiuto", incorrect_try_again : "Scorretto. Riprova.", }, lang : 'it', // Unavailable while writing this code (just for audio challenge) theme : 'red' // Make sure there is no trailing ',' at the end of the RecaptchaOptions dictionary }; </script>
RecaptchaOptions リファレンス
RecaptchaOptions ディクショナリで次のフィールドを設定できます。
たとえば、次のスクリプトタグを使用すると、reCAPTCHA のテーマが白で、tabindex が 2 になります。
<script> var RecaptchaOptions = { theme : 'white', tabindex : 2 }; </script>