【reCAPTCHA v3】あのバッジを簡単に非表示にする方法【コピペOK】

お問い合わせフォームなどに設置するreCAPTCHA v3。
便利だけど、右下に表示されるあのバッジ（ロゴ）、ちょっと気になる…そんな方も多いのではないでしょうか？

実はこのバッジ、ルールを守れば非表示にすることも可能です！
今回は、CSSを1行追加するだけで非表示にする方法をご紹介します。

そもそもreCAPTCHA v3のバッジって？

Googleのスパム防止ツール「reCAPTCHA v3」を設置すると、ページ右下に以下のようなバッジ（ロゴ）が表示されます。

これは「このサイトはreCAPTCHAで保護されていますよ」と示すものですが、デザインやレイアウトの邪魔になる場合も…。

非表示にするCSSコード（コピペOK）

.grecaptcha-badge {
  visibility: hidden;
}

このCSSをstyle.cssやカスタムCSSに追加するだけで、reCAPTCHAのバッジが非表示になります。

注意点：必ず「代替の表記」を入れてください！

reCAPTCHAの利用には、Googleの利用規約およびプライバシーポリシーの明記が義務づけられています。

バッジを非表示にする代わりに、フォームの近くなどに以下の一文を記載しましょう。

推奨されている文言（コピペ可）：

このサイトはreCAPTCHAによって保護されており、Googleの プライバシーポリシー と 利用規約 が適用されます。

表記の設置例（HTML）：

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

まとめ

• reCAPTCHA v3のバッジはCSSで非表示にできる
• ただしGoogleの規約により、表記の代替は必須！
• 見た目をスッキリさせつつ、しっかりルールも守ろう◎

ちょっとしたCSSの追加で、デザインを整えつつセキュリティも保てるので、ぜひ取り入れてみてくださいね。