/ #recaptcha #HTML 

reCAPTCHAのバッヂ(プライバシー、利用規約のマーク)を消す方法

reCAPTCHAがバッヂを強制的に出す問題

botなどのアクセスをガードしてくれるGoogleの"reCAPTCHA"サービスは便利・簡単・無料ですが、自動で表示されるバッヂが他のデザインと干渉する場合があります。 そこで、バッヂを消す(隠す)方法を紹介します。

そもそも消していいのか問題

そもそもバッヂを消していいものなのかですが、reCAPTCHAのFAQページにちゃんと書いてありました。

https://developers.google.com/recaptcha/docs/faq

You are allowed to hide the badge as long as you include the reCAPTCHA branding visibly in the user flow.

具体的には次のような文章をページに含めればよいようです。

This site is protected by reCAPTCHA and the Google
    <a href="https://policies.google.com/privacy">Privacy Policy</a> and
    <a href="https://policies.google.com/terms">Terms of Service</a> apply.

CSS、HTMLの編集方法

バッヂを消すのはCSSを1行書くだけで済みます。

.grecaptcha-badge { visibility: hidden; }

visibilityなので見えないだけで存在はすることに注意して下さい。

入力ページのどこかに先程の文章を入れておきます。日本語がよければ、以下のような文章で良いでしょう。

このサイトはreCAPTCHAによって保護されており、Googleの
    <a href="https://policies.google.com/privacy">プライバシーポリシー</a>と
    <a href="https://policies.google.com/terms">利用規約</a>が適用されます。

簡単すぎますね。