2023.04.20

|

2023.04.30

reCAPTCHAのロゴを非表示にしてみる（Google推奨方法）

スパム対策等で、reCAPTCHAを導入している場合、初期設定ではサイトの右下にロゴマークが常駐します。

このreCAPTCHAのロゴマークの位置が、戻るボタンなどと被ってしまい、レイアウト的に良くない場合があります。

しかし、CSSの「display: none;」などを使用してreCAPTCHAのロゴを非表示にすることは、GoogleのreCAPTCHAの利用規約に違反する可能性があり、機能しない場合があります。

reCAPTCHAのロゴを非表示にする代わりに、ウェブサイトのデザインに合わせてロゴを調整するか、文字で表示をする、サイズを縮小することを検討することが望ましいです。

今回は、reCAPTCHAロゴを非表示にして機能させる代替案を案内します。

reCAPTCHA バッジを非表示にしてみる

Google reCAPTCHAのサポートページ真ん中あたりにやり方が図のよう掲載されています。

reCAPTCHAサポートページ

このサイトの下部も同様のやり方でreCAPTCHAのバッジを非表示にしています。

※CSSで文字の色見などを変えることは問題ありません。

ワードプレスでコードを追記する場合は、ダッシュボードの「外観＞footer.php」から対象の箇所へコードを追記します。

※カスタマイズをしていて複数のフッターファイルがある場合は、全てのフッターファイルに記載する必要があります。
※FTPアクセスの場合は、ルートフォルダにある「footer.php」から編集をしていきます。

基本的には上記コードを追記するだけで問題ありませんが、レイアウトの調整などを考えCSSとあわせて調整すると綺麗に整います。

このサイトの場合は、上記のようにして<div class=”footer_recaptcha”></div>で挟むことにより、CSSのクラスセレクタを設定しています。

実際にクラスセレクタに設定しているCSSの内容は以下のようになっています。

このサイトのレスポンシブの切り替えサイズは、1201px以下と1202px以上で分けているため、上記の様にサイズごとに表示内容を変える様にしています。

パディングと文字の色を入れている程度ですが、文字の周りに枠線を入れたりすることも問題ありません。リンクの文字色は特に変更していませんが、もし変更したい場合は、

上記の様に色見を調整してみてください。

 

reCAPTCHAバッジの非表示設定を忘れずに

上記までですと、reCAPTCHAのロゴは右下に残ったままですので、最後に非表示にします。

こちらもreCAPTCHAのサポートページにやり方が記載されていますので、同じように行いましょう。

ワードプレスのダッシュボードから、「外観＞テーマファイルエディター＞style.css」を選択していきます。

※テーマの機能で追加CSSが簡単に設定できる場合は、テーマのカスタムCSS部分に記載する形でも問題ありません。

上記のコードを、サイト全体のCSSにかかわるスタイルシートに入れることにより、reCAPTCHAバッジが非表示になります。
※非表示にするコードはほかにも方法がありますが、上記がGoogle推奨方法となります。

 

さいごに

どうしても右下にreCAPTCHAのロゴ（バッジ）が表示されたままだと、サイトのレイアウトの邪魔になってしまったりすることが有りますので、その際はGoogle推奨のこちらやり方で対応してみましょう。
上記のように非表示にするのではなく、CSSで表示位置を変更することもできますので、適切な手段を用いてみてください。

Google reCAPTCHAは、WordPressのプラグインである Contact Form 7 を利用している場合、簡単に設定することが出来ます。以下の記事にて紹介しています。

[clink url=”https://recross.co.jp/cf7_recaptcha/”]

株式会社リクロス

Copyright © Re'cross All Rights Reserved.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.