【reCAPTCHAの非表示化】Contact Form 7の設定後に出るreCAPTCHAのロゴを消したい！

reCAPTCHAのロゴ（バッジ）を非表示にする

先日WordPressでお問い合わせページを実装できるプラグイン「Contact Form 7」のスパムメール対策として、reCAPTCHA（リキャプチャ）を設定したのですが、設定後すぐにreCAPTCHAのロゴが気になりました。

reCAPTCHAのバッジ（ロゴ）を消したい...

画面右下にずっと表示されるのが正直邪魔です...。
お問い合わせページだけならそんなに見られないので良いのですが、Contact Form 7にreCAPTCHAを設定するとサイト全体、記事ページにもロゴが表示されるようです。

それだけでなく、元々あった“ページトップに戻る”ボタンと被ってしまって凄いことになっちゃいました。...という事でreCAPTCHAのロゴを非表示にします。

reCAPTCHAのロゴを消すのは規約違反か？

reCAPTCHAはGoogleが提供するサービスなので、当然利用規約があります。

まずはreCAPTCHAのロゴ（バッジ）を非表示にすることが規約違反にならないのか？を調べました。結果、Googleが推奨する非表示化方法が存在していました。

reCAPTCHA バッジを非表示にします。どうすればよいですか？
ユーザーフローに reCAPTCHA のブランドを明示している限り、バッジを非表示にできます。

当記事ではここで紹介されている方法、つまりGoogleが推奨する方法でreCAPTCHAのロゴを非表示にする方法をご紹介します。この方法なら規約違反になりません。

先にreCAPTCHAを非表示にする際のポイントを整理しておくと、以下の通りです。

そこまで厳しい制限はありませんが、少なくともフォーム部分にreCAPTCHAを使っているのにロゴもテキストも無しというのはダメなようなので注意しましょう。

では早速手順を見ていきましょう・ｗ・

reCAPTCHAのロゴを非表示にする手順

reCAPTCHAのロゴ（バッジ）を非表示にする手順はシンプルで以下の通りです。

この記事では「Contact Form 7」で作ってある“お問い合わせページ”に表示されるreCAPTCHAのロゴを非表示にする形で手順を解説していきます。

手順１．reCAPTCHAのブランドをページに記載する

まずは指定のテキスト、“reCAPTCHAのブランド”とやらを該当ページに明示します。

お問い合わせ＞コンタクトフォーム＞該当のページ

に進みます。

フォームの下に“reCAPTCHAのブランド”を記載する

続いてContact Form 7に使うページの下部に指定のテキスト（↓）を記載します。

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のよくある質問」に書かれている通りです。
記述し終わったら「保存」してページを閉じましょう。

手順２．CSSでreCAPTCHAのロゴを非表示にする

続いてCSS（スタイルシート）を使ってreCAPTCHAのロゴを非表示にします。
使うCSSのスタイルについてもGoogleに案内があるので、これを使いましょう。

注: バッジを非表示にする場合は、
.grecaptcha-badge { visibility: hidden; }
を使用してください。

reCAPTCHAのロゴを非表示にするには、サイトの全てのページで読み込まれるCSSに.grecaptcha-badge { visibility: hidden; }というコードを追加するだけでOKです。

非表示化のCSSを追記する場所について

ここでは、初心者の方向けにパターンを分けて解説します。
使うCSSのコードは全て以下のものでOK。

.grecaptcha-badge { visibility: hidden; }

このスタイルを自分が編集できるスタイルシートに追記しましょう。

「sytle.css」を編集する場合

分かる方はこれが一番だと思います。

子テーマ内の「style.css」を編集する

WordPressの子テーマ内にある「sytle.css」を開き、CSSを追記します。

管理画面からCSSを編集する場合

初心者の方などで「sytle.css」がよく分からん！という方はコチラ。

に進んでCSSを追記してもOKです。

固定ページにstyleを直書きする場合

CSSファイルの編集が手間だと思う場合は、reCAPTCHAのロゴを非表示にするページのヘッダー部分に以下のコードを追記する感じでもOKです。

<style>
.grecaptcha-badge { visibility: hidden; }
</style>

テーマによっては“ページごとのヘッダーに任意のコードを追加できる機能”があるので、あればそちらを使うのも楽です。

結果：reCAPTCHAのロゴは簡単に消せる

ここまでの作業を終えたらreCAPTCHAのロゴが非表示にできているはずです。

CSSを追記したので、お問い合わせフォーム以外（記事ページ）のロゴも消えます。

記事中でも触れましたが、reCAPTCHAのロゴはreCAPTCHAを使っている場所にだけあればよく、非表示にするならブランドを明示しなさい！という事でしたので、これで作業完了です。お疲れさまでした。

まとめ

以上、reCAPTCHAを使った際に出てくるロゴ（バッジ）を消す方法でした。

WordPressを使っている方なら、お問い合わせフォーム用に使う「Contact Form 7」にreCAPTCHAを設定した後に困る内容かと思います。

今回はあくまでも「Googleが推奨する方法」の紹介でしたが、個人的には今回の方法よりも「お問い合わせフォームだけreCAPTCHAを読み込む方法」の方がお勧めです。
というのは、Contact Form 7にreCAPTCHAを設定した場合、全ページでこのリソースが読み込まれてしまうため、サイトスピードが遅くなってしまうからです。

この記事は結構なボリュームになったのでこれは別の記事（↓）にします。

ではではこのへんで・ｗ・