- Google reCAPTCHA v3で、画面右下にあるバッジだけを見えなくする方法
まずは結論から
WordPressの設定 > Invisible reCaptcha 設定 > 設定 の画面にある「バッジのカスタム CSS」に以下を貼り付けます。
.grecaptcha-badge[data-style="bottomright"] {
visibility: hidden;
}これによって、お問い合わせページや記事ページのコメント欄の送信ボタンの付近にあるバッジを削除することなく、画面右下で上に戻るボタンと重なる位置にあるバッジだけを削除することができます。
ごあいさつ
こんにちは、涼太郎です。
WordPressでブログを投稿されている皆さんであれば、Google reCAPTCHA v3 を利用していますよね。
もちろんセキュリティのために大切なのはわかっているけれど、
画面右下に出てくるバッジが上に戻るボタンと重なるのが嫌だ
そんな悩みを誰もが持つのではないでしょうか。
Googleが公式に案内している方法でバッジ自体を見えなくすることはできます。
皆さんはこの記事に辿り着くまでに検索してきて、そこまではわかっていることと推察します。
だけど、
それだとお問い合わせページや記事ページのコメント欄に表示していたバッジまで無くなってしまってなんだか変な感じ……
そんなふうに感じた方もきっといらっしゃいますよね（僕はそうでした）。
そう、案内のとおりに以下のようなコードを書いて表示するのは何だか味気ない。
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.
何やら怪しい文字が表示されていて本当に大丈夫？とお客さんが思ってしまうのではないかと深読みしてしまったり、
この方式だとお問合せページには文字を簡単に表示できるけど記事ページのコメント欄にも表示させるには少し手間だったりと、色々とお悩みが出てきてしまいます。
そういった課題を解決するために、画面右下にあるバッジだけを見えなくする方法を紹介します。
それでは見ていきましょう。
この方式で見えなくするバッジの対象
まずは、今回ご紹介する方法で見えなくなるバッジと引き続き見えるバッジを確認しておきましょう。
見えなくなるバッジ
今回見えなくなるのは、画面右下に見えていて、上に戻るボタンとも重なってしまうバッジです。
引き続き見えるバッジ
今回の方法を対応しても残るのは、例えばお問い合わせ画面や記事内のコメント欄のボタン付近にあるバッジです。
つまり、画面右下のバッジ以外は全て残ります。
画面右下にあるバッジだけを見えなくする方法
本題のバッジを見えなくする方法です。
WordPressの設定 > Invisible reCaptcha 設定 > 設定 の画面にある「バッジのカスタム CSS」に以下を貼り付けます。
.grecaptcha-badge[data-style="bottomright"] {
visibility: hidden;
}公式の案内と違うのは [data-style="bottomright"] の部分があるかないかです。
これがあることによって、バッジのうち画面右下にあるものに対してだけ適用できるスタイルとなっています。
ちなみに、以下のコードも貼り付けると、残るバッジの透過度を変更することができます。
.grecaptcha-badge {
opacity: 0.75;
}僕の場合、もとの透過度を100％としたときに75%になるように指定しています。
これによって色が少し薄くなります。
もとの色だとちょっとキツすぎるからね
結果、こんな感じになればOKです。
公式の案内と違うけど大丈夫？
さて、今回ご紹介した方法は公式のものとは違いますね。
違うことして大丈夫？という疑問がありそうです。
結論、自己責任です。
しかしながら、公式が求めている要件は満たせていることから、僕はこの方法を選んでも問題ないと考えています。
Googleが言いたいことは
visibility: hidden; で見えなくしていいけど、reCAPTCHA が保護していることや規約をユーザーに明示してね
ということなので、その知らせる方法がリンク付き文字列であってもバッジであっても変わりないからです。
見た目が違うだけでやりたいことができていればよい。そういうことですね。
