reCAPTCHAのロゴを非表示にする

この記事は約2分で読めます。

お問い合わせフォームをWordPressのサイトに導入するにあたり、スパム対策でGoogleの「reCAPTCHA」を導入しました。ただ、導入後はサイトの画面右下にreCAPTCHAを導入している証明としてロゴが表示されるようになりました。

もちろん、表示されるということはその必要があるからだとは思いますが、スマートフォンなどの小さい画面でサイトを閲覧している時には操作しづらい場面もあるため、今回はそのロゴを非表示にしてみました。

ただし、非表示にする場合は公式よりプライバシーポリシーと利用規約を明記する必要があるためその手順もまとめています。

reCAPTCHAとは

reCAPTCHAとはサイトへのアクセスが人間かbotかを判別しスパムや不正アクセスを防いでくれるサービスです。Googleが無料で提供しています。

reCAPTCHAにはv2やv3などがあるようです。

  • v2:「私はロボットではありません」のチェックボックスと画像の認証を実施することでbotか人間か判別します。
  • v3:サイトを訪れたユーザーの行動分析でbotか人間かを判別します。そのため、ユーザー側で何らかの操作は必要ありません。

ロゴを非表示にする

手順は簡単で2ステップです。

  1. サイトにプライバシーポリシーと利用規約を明記する
  2. ロゴを非表示にするCSSを記述

基本的に公式サイトの手順に沿っています。

サイトにプライバシーポリシーと利用規約を表記する

作成したお問い合わせフォームに下記の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.

文言は日本語にしても良いかもしれませんね。

ロゴを非表示にするCSSを記述

CSSは公式サイトに記載があります。そのCSSをサイトの「カスタマイズ→追加CSS」にコピペするだけでOKです。今後さらに追記していくことも考慮して何のCSSなのかコメントしておくのも良いかもしれません。

まとめ

以上がreCAPTCHAのロゴを非表示にする手順でした。

タイトルとURLをコピーしました