
「Google reCAPTCHA」のバッジが邪魔だな。
非表示にするにはどうしたらいいんだろう?
スパム対策のプラグイン「Google reCAPTHA」をv3で導入すると、サイトの右下にバッジが表示されます。
これが正直、
、、、邪魔。
スマホで見ると、他のボタンとかぶってしまいうっとうしい…。
今回は、Google公式方法で「reCAPTCHA」のバッジを非表示にする方法を解説します。
- 「Google reCAPTCHA」のバッジを非表示にする方法
- 【コピペOK!】ちょっとカッコよくアレンジ
「Google reCAPTCHA」のバッジを非表示にする方法


「Google reCAPTCHA」のバッジを非表示にするには、「HTML」で設定します。
「Google reCAPTCHA」導入方法
前提として、「reCAPTCHA」は導入しておきましょう。
わたしは、こちらのサイトを参考に導入しました!
「Contact Form7」 で導入する場合は、こちらからどうぞ。
「Google公式方法」で非表示にする
ちなみに公式ページを見ると、非表示にする方法がしっかりのっています。


「reCAPTCHAを利用している旨を記載すれば、バッジを非表示にしてもいいよ」ってことですね。
- ポリシーを記載
- バッジを非表示
今回は、「お問合せフォーム」の下に記載しましょう。
「reCAPTCHA」ポリシーの記載方法
「お問い合わせページに」移動します。
お問合せフォームの送信ボタンの下で、ブロックエディタの「カスタムHTML」を選択。


以下のHTMLを、まるまるコピペ。
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」をクリック。


コードをコピペし、公開をクリック。
/*recaptcha バッジ非表示*/
.grecaptcha-badge { visibility: hidden; }
/*ここまで*/
これで非表示になりました。
カンタン!
【コピペOK!】ちょっとカッコよくアレンジ





このままだとなんかなぁ〜
って方は、スタイルをつけてカッコよくアレンジもできます。
先ほどの「お問合せページ」のHTMLを、以下の「class」が追加されたものに変更。
<p class="recaptcha_policy">
This site is protected by reCAPTCHA and the Google
<a href="https://policies.google.com/privacy" target="_blank" rel="noopener">Privacy Policy</a> and
<a href="https://policies.google.com/terms" target="_blank" rel="noopener">
Terms of Service</a>apply.
</p>
「追加CSS」に、以下をコピペしましょう。
/*recaptchaポリシー*/
.recaptcha_policy {
text-align: center;
font-size: 10px !important;
color: #444 !important;
}
.recaptcha_policy a {
font-size: 11px !important;
color: #111 !important;
}
/*ここまで*/
「追加CSS」の全体像
/*コンタクトフォーム recaptchaポリシー*/
.recaptcha_policy {
text-align: center;
font-size: 10px !important;
color: #444 !important;
}
.recaptcha_policy a {
font-size: 11px !important;
color: #111 !important;
}
/*ここまで*/
/*recaptcha バッジ非表示*/
.grecaptcha-badge { visibility: hidden; }
/*ここまで*/
表示すると、こんな感じ


ちょっとスタイリッシュになりましたね!
この要領で、お好きなカラー、サイズにしてみてください。
以上です。
参考書籍




コメント