reCAPTCHA v3のバッジの位置を調整する

WEB DEVELOPMENT

この記事では、reCAPTCHA v3の「バッジ」位置調整方法を解説します。

reCAPTCHAv3 バッジ

バッジはデフォルトでは一番下に表示されるため、サイトデザインによっては「トップへ戻る」ボタンを重なってしまうことがあります。

erCAPTCHAv3 トップに戻るボタンと重なる

CSSでバッジの位置を調整する

reCAPTCHA v3のバッジのセレクタは、「.grecaptcha-badge」です。
この位置をCSSで調整します。

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

bottomは下からの配置位置(距離)を指定するプロパティです。数値をご自身のサイトにあった値に変えて調整してください。
位置を指定すると、このように表示され、「トップへ戻る」ボタンとの重なりが解消されました。

erCAPTCHAv3 バッジ位置調整

まとめ

この記事のポイント
  • reCAPTCHA v3のバッジ位置を調整するときは、.grecaptcha-badgeの配置をご自身のサイトにあった位置に指定します。

簡単ですね。

reCAPTCHA v3の導入方法が知りたい方はこちらもどうぞ。

 

アカリュウネ

アカリュウネ

当サイトが提供する情報の利用、およびサンプルの利用・改変は利用者の責任においておこなってください。ABOUT>利用規約もご確認ください。

関連記事

コメント

この記事へのコメントはありません。

CAPTCHA


TOP