コメントスパムや総当たり攻撃から守るreCAPTCHA ですが、次のような表示で、このロゴがサイトの右下に表示され目につくことがあるかもしれません。
本記事ではreCAPTCH のロゴを非表示にする方法を解説します。
reCAPTCHA を非表示にするには以下の方法があります。
上記のreCAPTCHA ロゴマークを非表示にするならGoogle公式の方法がオススメです。なぜGoogle公式の方法が良いのか理由を解説すると
プラグインの使用であれば、簡単に導入することができますが、その他のプラグインとの相性もあるのでうまく非表示になるかわかりません。
今回は本記事がオススメするGoogle公式の方法を解説します。
目次
設定前の準備
まずはreCAPTCHA のロゴを非表示にする前に、利用環境を確認します。
以上2つが確認できたらreCAPTCHA を非表示にする手順に移ります。
Contact Form７のインストールと設定についての投稿はこちら
reCAPTCHA を非表示にする方法
実際にreCAPTCHA のロゴを非表示にする方法を解説します。
それでは順を追って説明していきます。
GoogleサイトからHTMLコードをコピー
まずはGoogleのreCAPTCHA 関するFAQサイト、「reCAPTCHA バッジを非表示にします。どうすればよいですか？」のセクションにアクセスします。
Google公式ページ：reCAPTCHA バッジを非表示にします。どうすればよいですか？
※この画面は追加CSS記述で使用するので閉じないでください。
このHTMLコードは、「このサイトはreCAPTCHAによって保護されており、Googleの プライバシーポリシー と 利用規約 が適用されます。」と明記しています。
「このコードを記載していればreCAPTCHA ロゴを非表示にできますよ」ということになります。
ですので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.reCAPTCHA HTMLコードをお問い合わせフォームに記述
上記のHTMLコードをコピーしたら、WordPress のお問い合わせフォームに記述します。まず、コピーしたHTMLコードをコンタクトフォームに記述します。
コンタクトフォーム７にHTMLコードを記述
まずは、Wordpless 管理画面からお問い合わせを選択します。作成したコンタクトフォームを編集します。
編集タブの「フォーム」に先ほどのコピーしたHTMLコードを一番下に記述します。
これでお問い合わせフォームにreCAPTCHA 非表示に関する明示が記載されます。
※この時点はまだロゴは非表示になっていません。
次に非表示にする方法を解説します。
Googleサイトからロゴ非表示用のコードをコピー
先ほどアクセスしたGoogleの公式ページから非表示に関するコードをコピーします。
.grecaptcha-badge { visibility: hidden; }reCAPTCHA 非表示用コードを追加CSSに記述
上記のコードをコピーしたらWordPress管理画面にある「外観-カスタマイズ」を選択します。
次に「追加CSS」を選択します。
最後にコピーしたコードをわかりやすいように、一番下に貼り付けして保存すれば完了になります。
ロゴが非表示になったか確認
ブログやサイトを開き、次の2点を確認します。
reCAPTCHA のロゴの非表示確認は、右下にロゴが表示されていなければ成功です。
reCAPTCHA ロゴ非表示のための文言明記については
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.
とお問い合わせフォームに追記されていることを確認しましょう。
以上を確認できればGoogle公式の方法は成功になります。
まとめ
いかがだったでしょうか。以外に簡単にできますので、コンタクトフォーム７を使ってお問い合わせフォームを作成している方はぜひ試してみてください。
また、コンタクトフォーム７以外でお問い合わせフォームを作成した場合は、手順「１」と「２」を別で明記することで問題ありません。
そして、実際の非表示コード、手順「3」と手順「4」にある追加CSSに記載することで非表示にできるかと思います。
以上、最後までお読みいただきありがとうございました！
コメント