スパムコメントや迷惑メールなどの対策として、GoogleのreCAPTCHAというシステムを導入しているサイトやブログは多いかと思います。
私自身もWordPressでブログやウェブサイトを運営していてスパムコメントなどに悩まされていたのですが、reCAPTCHAを導入して以来ほとんどのスパムをブロックすることができており重宝しています。
reCAPTCHAの導入についてはこちらの記事をご覧ください。
ひとつ不満点として、「reCAPTCHA V3」を導入するとサイトの右下の邪魔な場所にreCAPTCHAのロゴ（バッジ）が表示されてしまうこと。
reCAPTCHA V3は、コメントやメール送信の際にチェックを入れたり画像認証を行う必要がなく、ユーザビリティに優れていますのでぜひ導入したいところですが、まぁまぁ大きめのロゴが表示されてしまうのはフッターメニューなどにも干渉してしまうのでなんとかしたいところです。
Googleの規約等に触れることなくreCAPTCHAのロゴを非表示にする方法がないか調べたところ、Googleが正式に許可し推奨している方法がありましたのでご紹介します。
reCAPTCHAのブランディング
reCAPTCHAの「よくある質問」のページに、以下のような記述がありました。
「reCAPTCHAのバッジ（ロゴ）を非表示にしたい」という質問に対し、「ブランディングを行えばOK」という意味の内容が書かれています。
上記サイトに記載されているこちらのテキストをユーザーの目に留まる場所に記載すれば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.
ブランディングを挿入する方法の一例として、当サイトで実際に行った方法をご紹介します。当サイトはWordPressで作成し、「Cocoon」という無料テーマを利用しています。
メールフォームの下にブランディングを挿入する
多くの方が利用している「Contact Form 7」というプラグインで作成したメールフォームの下にreCAPTCHAのブランディングを挿入する方法です。
作成したメールフォームのページの 編集 をクリックします。
ブロックの追加 → カスタムHTML を選択します。
追加されたブロックに以下のコードをコピー&ペーストします。
<p>
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.
</p>
右上の更新をクリックしてページを更新します。
以上でメールフォームの下にブランディングテキストが表示されます。自分のサイトのメールフォームを確認し、正しく表示されているか確認してください。
コメントフォームの下にブランディングを挿入する
コメントフォームの下にreCAPTCHAのブランディングを挿入するために comments.php というテーマファイルを編集する必要があるのですが、Cocoonの子テーマにファイルが存在しないので親テーマからファイルをコピーします。
FTPソフトなどを使って親テーマのcomments.phpを子テーマのフォルダにコピーしてください。
親テーマの comments.php のパスは
/public_html/wp-content/themes/cocoon-master/comments.php
子テーマのフォルダのパスは
/public_html/wp-content/themes/cocoon-child-master/
となります。
comments.phpをコピーできたらWordPressの管理画面から 外観 → テーマエディター をクリックします。
編集するテーマを選択 で Cocoon Child を選択し、comments.php をクリックして開きます。
最後の</div>の直前に以下のコードを追記します。
<p>
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.
</p>
以下のように追記できたら、ファイル更新 をクリックして保存します。
以上です。コメントフォームの下にreCAPTCHAのブランディングが正しく表示されていることを確認してください。
reCAPTCHAのロゴ（バッジ）を非表示にする
reCAPTCHAのブランディング表示ができたら、最後にreCAPTCHAのバッジ（ロゴ）を非表示にします。
WordPressの管理画面から 外観 → テーマエディター をクリックします。
子テーマ（Cocoon Child）の スタイルシート（style.css） に以下のコードを追記します。
.grecaptcha-badge { visibility: hidden; }
最後に ファイルを更新 をクリックしてスタイルシートを保存します。
スタイルシートを編集できましたら、自分のサイトを確認してreCAPTCHAのバッジが非表示になっていることを確認してください。