reCAPTCHA v3がトップへ戻るボタンに被ってしまうときの対処法

2018年12月13日
WordPress

先日、お問い合わせフォームを設置するプラグイン「Contact Form 7」のアップデートで、対応するreCAPTCHAのバージョンがv2からv3へ変更になりました。

v2ではお問い合わせボタンの上に表示されていたreCAPTCHAですが、v3からはブラウザ右下に固定表示されるようになります。

チェックボタンがなくなり、自動でBOTか人間かを判断してくれるシステムのようです。これは便利ですね。

ただ、表示される位置にやや問題があります。この右下の位置というのは、トップへ戻るボタンを配置している人も多い場所。案の定、当ブログでも完全に被ってしまっています。

これはさすがに邪魔。ユーザビリティもよくありません。

ということで今回は、トップへ戻るボタンと被ってしまうreCAPTCHAの表示位置を変更する方法を紹介します。

reCAPTCHA v3の表示位置変更方法

reCAPTCHAは.grecaptcha-badgeというセレクタを持っています。

以下のCSSを追加すれば、好きなように位置をずらすことができます。

CSS

/*===============================
	reCAPTCHA
=================================*/

.grecaptcha-badge {
	bottom: 85px !important;
}

これだけです。簡単ですね！

bottom: 85px !important;の数字が大きいほどロゴは上に上がるので、いい感じの位置を探してみてください。

追記

右下に追従されるのが鬱陶しい。全てのページに表示されるのが鬱陶しい。

そう思ったので、インライン化してお問い合わせページにのみ配置する方法を書きました。

ご参考ください。

こちらの記事で「トップへ戻るボタンに被ってしまうreCAPTCHAの位置をずらす方法」を紹介しました。 https://lognote

2018年12月13日