reCAPTCHAへのCSSの当て方 最適解かも
画面右下に表示されるreCAPTCHAのバッジですが、全部のページに表示されるとちょっと煩わしい面もあります。
今回は、我流ではありますが、reCAPTCHA（V3）のバッジに対するCSSの当て方をご紹介します。
header.phpへの記述
フォームが設置してあるページのスラッグが「contact」だった場合、それ以外のページのバッジを隠すCSSです。
|
1 2 3 4 5 |
<?php if ( !is_page('contact') ) : ?> <style> .grecaptcha-badge { visibility: hidden; } </style> <?php endif; ?> |
フォームの近接への記述
reCAPTCHAのバッジを隠すには、下記のような記述をする必要があります。
|
1 2 3 |
<p class="recaptcha_policy"> This site is protected by reCAPTCHA and the Google<a href="https://policies.google.com/privacy" target="_blank">Privacy Policy</a> and <a href="https://policies.google.com/terms" target="_blank">Terms of Service</a> apply. </p> |
style.cssへの記述
このCSSは一例ですので、適宜デザインに合わせていただけると良いかと思います。
|
1 2 3 4 5 6 7 8 9 10 11 |
.recaptcha_policy { padding: 0; margin: 0; text-align: center; font-size: 11px !important; color: #ccc !important; } .recaptcha_policy a { font-size: 11px !important; color: #ccc !important; } |
こんな感じの表記になります。
以上です。ご活用ください。
公開日：2025年5月27日
最終更新日：2025年5月27日
