[TH] reCAPTCHAのバッジを非表示にしたい

サイトにフォームを追加して、reCAPTCHAを導入したけど、スマホで表示したときにreCAPTCHAのバッジ（アイコン？）が邪魔！何とかして！…そんな今日のヘルプ。

いや、それくらい自分で調べなさいよ、とも思いましたが、規約的にそれがOKなのかどうかも含めて気になったので、早速調べてみました。

まずは公式サイトへ

当然ですが、規約上消すのはダメですよ、ということであれば、邪魔でも表示しておくしかありません。

そこで、まずは規約を確認するために公式サイトへ。

「サポート」タブの中に「よくある質問」というメニューがあり、ここを見ていくと…「reCAPTCHA バッジを非表示にします。どうすればよいですか？」という質問を発見。

「よくある質問」の記載によると、以下のテキストを表示すれば、バッジを非表示にしていいそうです。

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。

.grecaptcha-badge { visibility: hidden; }

バッジが結構大きくて、場合によっては邪魔になることもあるので、非表示にできるのはイイですね。

さいごに

ということで、「よくある質問」に書かれているようにテキストを表示し、CSSを適用したことで、reCAPTCHAのバッジを非表示にすることができました。

指定されたテキストは、公式サイトの例にあるようにフォームの直下などに表示してもいいですし、フッターなどに入れておいてもいいようです。

気持ちとしては、あまり気にならない場所に表示させておきたいところですね。

今日の作業は以上です。お疲れ様でした！