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

Google 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 を利用している場合、簡単に設定することが出来ます。以下の記事にて紹介しています。

2023.04.03

WordPressのContact Form7にreCAPTCHAを設定しスパム対策をする

WordPress（ワードプレス）の問い合わせに「Contact Form 7」を利用していると、迷惑メールがたくさん来るという悩みが…