WordPress

【初心者向け】Google公認!?ContactForm7で設定したreCAPTCHAのロゴ(バッチ)を非表示にする方法

問い合わせフォームなどで定番のプラグイン「Contact Form 7」でスパムメール対策として設定した「Google reCAPTCHA」のロゴマークが全ページに表示されて邪魔と感じたことありませんか?

CSSで表示位置の高さを変更したり、問い合わせフォーム以外のページには表示しないようfunctions.phpにコードを追記したり、いろんな対処法がありますが、今回は、Googleが推奨する非表示の設定方法がありましたので、初心者の方でも解るように解説します。

reCAPTCHAロゴ(バッチ)とは?

reCAPTCHAロゴとは?

Googleの「reCAPTCHA v3」を導入しているウェブサイトやフォームで、「プライバシー利用規約」と表記されたロゴマークが邪魔に感じることはありませんか?
(※Googleでは「バッチ」と呼びます)

reCAPTCHAロゴとは?

特に、デザインに合わないとか、機能を邪魔するケースでは、reCAPTCHAのロゴマークを非表示にしたいと考える方は多いと思います。

そんな方のために、Google公認の方法でreCAPTCHAロゴを非表示にする方法を解説します。

大前提として・・・

今回は、お使いのホームページでreCAPTCHA設定が完了している方への解説となります。

  • WordPress+プラグイン「Contact Form 7」を使っている
  • 「インテグレーション」メニューから「Google reCAPTCHA v3」を設定済み
reCAPTCHA v2について

この記事は「reCAPTCHA v3」の説明です。

v2」は「私はロボットではありません」でレ点を入れたり、たまにクルマとか信号とかの写真を選択させるv3の1世代前のタイプです。

今回の解説では「v2」は対象外となりますのでご注意ください。

Googleが公開する対処法

「Google公認!ってどういうこと?」とお思いの方もいらっしゃると思いますが、Googleの「reCAPTCHA よくある質問」に情報が公開されています。

reCAPTCHAバッチを非表示にします。どうすればよいですか?」という内容で、具体的な設定方法が記載されていますので、事実上の公認と考えて良いかと思います。

reCAPTCHA「よくある質問」
よくある質問  |  reCAPTCHA  |  Google for Developers
Google for Developers
reCAPTCHA Enterprise、バージョン、制限、カスタマイズなどに関する質問への回答を得る

reCAPTCHAのよくある質問

それでは「reCAPTCHA よくある質問」の記載事項について確認してみましょう。

Google推奨の設定方法

reCAPTCHAバッチを非表示にします。どうすればよいですか?」をクリックするとこちらの項目が表示されます。

一見、簡単じゃん!ってぐらい短い内容で書かれてますが、初心者の方にはちょっとハードル高い気がします。海外サイトの日本語チュートリアルってこんな感じですよね。

要約すると「Googleのプライバシーポリシーと利用規約のリンクをフォームに記述したら、スタイルシート(CSS)でバッチ(ロゴ)を非表示にしてもいいですよ。」という内容だと読み解けます。

ただ、この指示内容だけでは、具体的に何をどうすれば良いのか、ちょっと理解しづらいと思いますので、具体的な手順について解説します。

具体的な設定方法

ロゴ(バッチ)の代わりに表記するテキスト

繰り返しになりますが「reCAPTCHA よくある質問」には「ユーザーフローに目に見える形で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.

参考サイトをいろいろ調べたところ、日本語表記しているところもありましたので、日本語版のテキストも準備しましたので、お好きな方をコピペしてご利用ください。

このサイトはreCAPTCHAによって保護されており、Googleの
<a href="https://policies.google.com/privacy">プライバシーポリシー</a>と
<a href="https://policies.google.com/terms">利用規約</a>が適用されます。
参照サイト
ContactForm7でreCAPTCHAのロゴを非表示にする方法
WebSpot
スパム対策として WordPress の ContactForm7 で reCAPTCHA V3 (リキャプチ…

Contact Form 7にコードを貼り付け

次は「ユーザーフローに目に見える形」でテキストを貼り付けます。Contact Form 7の管理画面より以下の通りテキストを貼り付けます。

このままだと味気ないので、Googleのところで改行して、target=”_blank”を追記、スタイルシートでセンタリング、フォントサイズを小さめに変更してみました。

<p style="text-align: center; font-size: 80%;">このサイトはreCAPTCHAによって保護されており<br>
Googleの
<a href="https://policies.google.com/privacy" rel="noopener" target="_blank">プライバシーポリシー</a>と
<a href="https://policies.google.com/terms" rel="noopener" target="_blank">利用規約</a>
が適用されます。</p>
Contact Form 7にコードを貼り付ける際の注意点

上記コードは、見やすくするために改行していますが、Contact Form 7の登録の際には、改行しないで貼り付けないと<P>タグが強制的に組み込まれて表示が崩れる場合があります。ご注意ください。

ロゴを非表示にするCSS

最後に、ロゴを非表示にするためのCSSコードを設定します。

以下のCSSコードでreCAPTCHAのロゴマークを画面上から見えなくすることができます。具体的なCSSコードは以下の通りです。

/* reCAPTCHAバッジを非表示にする */
.grecaptcha-badge {
    visibility: hidden;
}

このCSSコードを適用することで、reCAPTCHAのロゴマークが非表示となります。

CSSコードの貼り付け

CSSコードを貼り付ける場所はそれぞれのサイトで違う場所になります。現在のテーマに直接追記しても良いですが、この場合、テーマがアップデートすると消えてします可能性がありますので、ご注意ください。

まとめ

以上が、reCAPTCHAロゴを非表示にする方法です。ホームページ制作が初心者の方でも簡単に設定できる方法ですし、何より、Googleのよくある質問で正式に回答している内容ですので、ぜひお試しください。

関連記事

コメント

この記事へのコメントはありません。

新着
特集
  1. 複雑な交付申請手続きを図解で攻略!『IT導入補助金2024』初心者ガイド(2)

  2. 『IT導入補助金2024』初心者ガイド(1)申請前に準備すべき5つのポイントをわかりやすく解説

  3. Site Kit by Google(WordPressプラグイン)の初期設定で404エラーが出たときの対処法、初期設定方法も一緒に解説

  1. 【WordPress】TCDテーマ「SOLARIS」使ってみた!サービスや商品がたくさんあるコーポレートサイト制作に最適

  2. 【WordPress】募集サイト・求人サイト・リクルートサイトが作れるTCDテーマ「MASSIVE」を研究してみた!

  3. 【WordPress】会員サイト・コミュニティサイト・WEBメディアなど多様なサイトが作れるTCDテーマ「ZOOMY」を利用者だから判る視点で解説します!

TOP