reCAPTCHA v3認証バッジが被った時の対処
毎回忘れるので備忘録も兼ねて。
お問い合わせフォームなどでreCAPTCHA v3認証を導入した際のブラウザのウィンドウ右下に表示される｢reCAPTCHA｣で保護されている旨のマーク(バッジ)の移動方法について記載します。
reCAPTCHA v3バッジ
サイトを制作していると、よくあるのが｢トップへ戻る｣ボタンを、ブラウザのウィンドウ右下に配置する事がよくあります。
また、スマホですとposition:fixedで設置した問い合わせボタン(電話やメール、LINEなど)をブラウザのウィンドウ下部に設置する事がよくあります。(固定のフッターボタン)
そうすると、このreCAPTCHA v3認証のマーク(バッジ)とかぶってしまう事があるわけです。
移動するときは、以下のCSSでmarginで調整する事ができます。
カスタムプロパティ(:root)を使用しています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | :root{ --recaptcha-badge-position:130px; } /* recaptcha badge */ .grecaptcha-badge{ margin-bottom:var(--recaptcha-badge-position); z-index:9999; } @media(min-width:992px){ .grecaptcha-badge{ margin-bottom:0; } } |
こちらは、スマホ表示時だけ、reCAPTHCA v3マーク(バッジ)の位置をデフォルトから130px上に移動し、上位に表示されるようz-index:9999を設定しています。
なぜならば、スマホ表示時のposition:fixedで設置された固定のフッターボタンと重ならないようにするためです。
以上、皆さまのお役に立てれば幸いです。どちらかというと備忘録ですが。。
WEB DESIGN全てお任せ！ホームページ制作
RishunTradingでは、日本にはないコンセプトや高いデザイン性をもったヨーロッパ製品の輸入販売、及び、Webサイト制作事業などをおこなっております。
「全てお任せ！ホームページ制作」は、ドメイン取得からサーバー設定、レスポンシブルデザイン(スマホ、タブレット対応)、SEO対策がすべて含まれたお得なホームページを制作するサービス商品です。
運用開始後に「Webサイト運用管理サービス(保守)」と組み合わせて購入しますと、メンテナンス、更新も含めてすべて弊社で実施しますので、お客様は安心して本業に集中する事ができます。
しかもなんと、「全てお任せ！ホームページ制作」は、￥100,000！で提供しております。
本業が忙しい中小企業様に大変ご好評を頂いている商品です。
独自ドメイン取得
サーバー開設＆設定
レイアウト設計
レスポンシブルデザイン
(*1)
検索エンジン最適化
(SEO対策)
場所Maps
お問い合わせフォーム
SSL化
各種SNS連携
運用マニュアル
