このページは Cloud Translation API によって翻訳されました。

reCAPTCHA のデザインをカスタマイズする

重要: 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 と音声 CAPTCHA を切り替えます。reCAPTCHA の完全な UI を作成するには、キャプチャの状態に応じて異なる情報を表示します。たとえば、ユーザーが閲覧中の動画画像キャプチャ（「音声キャプチャを取得」へのリンク）表示されます。ステートフル UI を作成するために、次の 4 つの CSS クラスを使用できます。

CSS クラス	表示タイミング
`recaptcha_only_if_image`	画像キャプチャが表示されている場合
`recaptcha_only_if_audio`	音声キャプチャが表示されています
`recaptcha_only_if_incorrect_sol`	前の解答が正しくなかった
`recaptcha_only_if_no_incorrect_sol`	前の解答は正しくなかった

テーマ設定には多くのオプションがありますが、ユーザーインターフェースの整合性ルールに従う必要があります。

CAPTCHA ウィジェットの近くで reCAPTCHA を使用していることを申告する必要があります。
再読み込み関数を呼び出すボタンを表示する必要があります。
視覚障がいのあるユーザーが音声 CAPTCHA にアクセスできるようにする必要があります。
reCAPTCHA ウィジェットでボタンとして使用する画像については、代替テキストを指定する必要があります。

国際化: ウィジェットの言語を変更する

reCAPTCHA ウィジェットを国際化する方法は 2 つあります。

組み込みの翻訳機能

reCAPTCHA には、多数の翻訳が組み込まれています。これらを使用するには、RecaptchaOptions の lang パラメータを設定します。

<script type="text/javascript">
var RecaptchaOptions = {
   lang : 'fr',
};
</script>

カスタム翻訳

お使いの言語の翻訳がない場合は、独自の翻訳を作成できます。reCAPTCHA JavaScript のすべての文字列を翻訳し、RecaptchaOptions の「custom_translations」変数を設定する必要があります。設定していない文字列は、デフォルトの翻訳から取得されます。あります。これにより、デフォルトの翻訳の一部のみをオーバーライドできます（たとえば、選択した翻訳があります。例:

<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 に使用するテーマを定義します。赤、白、ブラックグラス、クリーンテーマ reCAPTCHA がユーザーインターフェースを提供する事前定義済みのテーマです。カスタムテーマで reCAPTCHA の外観は、サイトが完全に制御できます。

言語

サポートされている任意の言語コード。

「ja」

事前定義されたテーマのインターフェースで使用される言語。次の言語がサポートされています。

言語	コード
英語	en
オランダ語	nl
フランス語	fr
ドイツ語	de
ポルトガル語	pt
ロシア語	ru
スペイン語	es
トルコ語	tr

サイトの言語がサポートされていない場合は、カスタムテーマ設定を使用して、ご希望の言語で reCAPTCHA を表示できます。

custom_translations

翻訳辞書

null

reCAPTCHA 文字列のカスタム翻訳を指定するには、これを使用します。

custom_theme_widget

DOM 要素の ID を含む文字列

null

カスタムテーマ設定を使用する場合、これはウィジェットを含む div 要素です。使用方法については、カスタムテーマ設定のセクションをご覧ください。

tabindex

任意の整数

を tabindex 入力します。フォーム内の他の要素が tabindex を使用する場合は、ユーザーが簡単に移動できるように設定する必要があります。

たとえば、次のスクリプトタグを使用すると、reCAPTCHA のテーマが白になり、tabindex が 2 になります。

<script>
var RecaptchaOptions = {
   theme : 'white',
   tabindex : 2
};
</script>