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

recaptcha-v3-toppage-button-thumbnail

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

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

v2とv3の違い

v2とv3の違い

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

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

トップへ戻るボタンとreCAPTCHAが被る

トップへ戻るボタンとreCAPTCHAが被る

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

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

reCAPTCHA v3の表示位置変更方法

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

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

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

.grecaptcha-badge {
	bottom: 85px !important;
}
reCAPTCHAのロゴが上に上がった

reCAPTCHAのロゴが上に上がった

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

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


追記

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

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

ご参考ください。

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

コメント

  1. TM_BB より:

    ありがとうございました。
    実はプラグインを2つほど試しましたが、うまく動作せず、v2に戻してました。
    わたしは60pxでいい感じに設置できました。

    • 山川 達也 より:

      なるべくプラグインは使わない方がいいので、簡易的ですが上手くいったものを紹介させていただきました。

コメントを残す

入力エリアすべてが必須項目です。
メールアドレスが公開されることはありません。

承認制のため反映にお時間をいただきます。