【カンタン！】Google公式方法で「reCAPTCHA」バッジを非表示に

2021 12/26

2021-12-26

「Google reCAPTCHA」のバッジが邪魔だな。
非表示にするにはどうしたらいいんだろう？

スパム対策のプラグイン「Google reCAPTHA」をv3で導入すると、サイトの右下にバッジが表示されます。

これが正直、

、、、邪魔。

スマホで見ると、他のボタンとかぶってしまいうっとうしい…。

今回は、Google公式方法で「reCAPTCHA」のバッジを非表示にする方法を解説します。

この記事の内容

「Google reCAPTCHA」のバッジを非表示にする方法
【コピペOK！】ちょっとカッコよくアレンジ

「Google reCAPTCHA」のバッジを非表示にする方法

「Google reCAPTCHA」のバッジを非表示にするには、「HTML」で設定します。

「Google reCAPTCHA」導入方法

前提として、「reCAPTCHA」は導入しておきましょう。
わたしは、こちらのサイトを参考に導入しました！

L'7 Records

WordPressをGoogle reCAPTCHAで守ろう！Akismet代替手段でbotスパムコメント対策！

「Contact Form7」で導入する場合は、こちらからどうぞ。

「Google公式方法」で非表示にする

ちなみに公式ページを見ると、非表示にする方法がしっかりのっています。

「reCAPTCHAを利用している旨を記載すれば、バッジを非表示にしてもいいよ」ってことですね。

手順はこちら

ポリシーを記載
バッジを非表示

今回は、「お問合せフォーム」の下に記載しましょう。

「reCAPTCHA」ポリシーの記載方法

※WordPress有料テーマ「SWELL」を利用しています。

＞＞WordPressテーマ「SWELL」

STEP

固定ページからお問合せへ

「お問い合わせページに」移動します。

STEP

ブロックエディタの「カスタムHTML」を選択

お問合せフォームの送信ボタンの下で、ブロックエディタの「カスタムHTML」を選択。

STEP

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.

STEP

完了

こんな感じに表示されます。

バッジ非表示の設定方法

次に、バッジを非表示にする方法です。

STEP

追加CSS

ダッシュボードから、「外観」＞「カスタマイズ」へと進みます。
「追加CSS」をクリック。

STEP

コードをコピペ

コードをコピペし、公開をクリック。

/*recaptcha　バッジ非表示*/
.grecaptcha-badge { visibility: hidden; }
/*ここまで*/

これで非表示になりました。

カンタン！

【コピペOK！】ちょっとカッコよくアレンジ

このままだとなんかなぁ〜

って方は、スタイルをつけてカッコよくアレンジもできます。

STEP

class追加

先ほどの「お問合せページ」の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>

STEP

CSS追加

「追加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; }
/*ここまで*/

表示すると、こんな感じ