reCAPTCHAのマークの位置の調整 – 消す方法を解説

2024年4月3日2024年4月7日

reCAPTCHAを設定した際に、トップに戻るボタンと被ったりして、位置を変更したいなと思われたことはないでしょうか。

今回はWordPressの管理画面からCSSやコードを修正して、reCAPTCHAマークの制御を行う方法をご紹介いたします。

reCAPTCHAマークを調整する方法

追加CSSでの修正

外観－カスタマイズー追加CSSより以下のコードを追加します。

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

!importantを付けているのは、.grecaptcha-badgeの要素に対して直接bottomプロパティが指定されているため、!importantで上書きしています。

reCAPTCHAマークを消す方法

reCAPTCHAマークを消す場合、サイト上にreCAPTCHAを使用している旨、記載する必要があります。

Google公式/よくある質問

以下のコードを追加CSSに記載することでマークを消すことが可能です。

.grecaptcha-badge { visibility: hidden; }

reCAPTCHAを使用していることを明示する

公式サイトでは以下のコードを追加するよう案内があります。

This site is protected by reCAPTCHA and the Google
    <a href="https://policies.google.com/privacy">Privacy Policy</a> and
    <a href="https://policies.google.com/terms">Terms of Service</a> apply.

上記をそのまま追加してもよいですが、デザインの調整を行います。

本サイトでは以下のようにコードを調整し、reCAPTCHAを使用していることを明示しております。
※本サイトではお問い合わせフォームの送信ボタンの下に追加しております。

<div class="recaptcha-text">
  <p>This site is protected by reCAPTCHA and the Google</p>
  <p>このサイトはreCAPTCHAとGoogleによって保護されており、Googleのプライバシーポリシーと利用規約が適用されます</p>
  <p><a href="https://policies.google.com/privacy">プライバシーポリシー</a> / <a href="https://policies.google.com/terms">利用規約</a></p>
</div>
<style>
  .recaptcha-text {
    font-size: .7em;
    margin-top: 2em;
  }
  .recaptcha-text p:last-child {
    margin-top: .5em;
  }
  .recaptcha-text p:last-child {
    margin-top: 1em;
  }
</style>