先日、サイトに大量のスパムメールが届くことに対しての
Google reCHAPTCHA を使用しての対処法をお伝えしました。
↓ その時の記事 ↓
Contact Form 7の問い合わせメールに大量のスパム！対処法を解説します
reCHAPTCHA のおかげで2600通を超えていたスパムメールは、
1通も届かなくなったんですが・・・
reCHAPTCHA 導入後からサイトの右下に
「reCHAPTCHAバッジ」が表示されるようになりました。
そしてどーも、これが邪魔に感じてしまうんですよね。
特に狭いスマホ画面だと、もっと邪魔に感じられます。
あと、「上に戻るボタン」にも被ってしまっているのもよくない。
おなじように感じている人もいると思うので、
今回は、この reCHAPTCHAバッジなるものを削除（非表示）
する方法について解説していこうと思います。
GoogleもreCHAPTCHAバッジを非表示にすることを許可している
邪魔に感じるとはいえ、Googleから許可されていないのであれば
あきらめるしかなかったのですが、調べてみたところ
reCHAPTCHAバッジを非表示にすることは、Googleからも許可されているようでした。
reCAPTCHA バッジを非表示にします。どうすればよいですか？
ユーザーフローに reCAPTCHA のブランドを明示している限り、バッジを非表示にできます。次のテキストを含めてください。
上記の reCHAPTCHA のよくある質問ページを読んでみると、
「reCHAPTCHAのブランドを明示しているなら、バッジを非表示にしてもいいよー」
とのこと。
これで心おきなく邪魔なバッジを削除できるぜ！
reCHAPTCHAを使用していることをサイトに明記する
ということで、まずはサイトの問い合わせページに、
reCHAPTCHAブランドを明記する作業からやりましょう。
（Contact Form7を利用の場合）
WordPressの右側メニューの「お問い合わせ」より、
問い合わせページを開き、下部に以下のコードを設置するだけでOKです。
|
1 2 3 |
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. |
設置場所に指定はないので、送信ボタンの下にでも設置しておきましょう。
設置すると、以下のように「reCHAPTCHAを使用しています」という説明書きとともに、
reCHAPTCHA のプライバシーポリシーと、利用規約ページへのリンクが設置されます。
これで下準備は完了。
CSSでreCHAPTCHAを非表示にする
reCHAPTCHAは、CSSを使って非表示にします。
CSSで非表示というと、なんとなく非公式っぽい気がしますが、
ちゃんとGoogleの公式サイトで指定されていた方法なので、ご安心ください。
テーマファイルエディターの style.css でもいいと思うんですが、
ボクの環境だとなぜか上手くいかなかったので、追加CSSの方に設置しました。
↓ これが設置用のコード ↓
|
1 2 |
/*reCAPTCHA非表示*/ .grecaptcha-badge { visibility: hidden; } |
「外観」→「カスタマイズ」→「追加 CSS」と進み、最下部にコードを設置します。
上部の公開ボタンを押せば非表示設定完了です。
reCHAPTCHAバッジがなくなって見た目すっきり！
もちろん、バッジが非表示になっただけで、
reCHAPTCHAの機能はちゃんと保持されているという、いいとこ取りな設定です。
おなじように邪魔だと感じていた人は、お試しあれ。
─── あわせて読みたい記事 ───
Contact Form 7の問い合わせメールに大量のスパム！対処法を解説します
【超簡単】Gmailアカウントの相手にメールが届いていない可能性。その対処方法を解説します
