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

Google公式方法で「reCAPTCHA」バッジを非表示に

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

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

これが正直、

、、、邪魔

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

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

この記事の内容
  • 「Google reCAPTCHA」のバッジを非表示にする方法
  • 【コピペOK!】ちょっとカッコよくアレンジ
目次

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

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

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

「Google reCAPTCHA」導入方法

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

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

>>Google reCAPTCHAを設定する

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

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

Google reCAPTCHA

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

手順はこちら
  1. ポリシーを記載
  2. バッジを非表示

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

「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!】ちょっとカッコよくアレンジ

【コピペ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; }
/*ここまで*/

表示すると、こんな感じ

ちょっとスタイリッシュになりましたね!

この要領で、お好きなカラー、サイズにしてみてください。

以上です。

参考書籍

\ ブログランキング参加中 /
応援お願いします!


ブログランキング・にほんブログ村へ
にほんブログ村

Google公式方法で「reCAPTCHA」バッジを非表示に

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

アパレル勤務からWEBマーケターへ。
自分らしい自然体な暮らしを追求しつつ、アラサーの目線から暮らしに役立つ情報を発信中。

コメント

コメントする

CAPTCHA


目次