スパム対策等で、reCAPTCHAを導入している場合、初期設定ではサイトの右下にロゴマークが常駐します。
このreCAPTCHAのロゴマークの位置が、戻るボタンなどと被ってしまい、レイアウト的に良くない場合があります。
しかし、CSSの「display: none;」などを使用してreCAPTCHAのロゴを非表示にすることは、GoogleのreCAPTCHAの利用規約に違反する可能性があり、機能しない場合があります。
reCAPTCHAのロゴを非表示にする代わりに、ウェブサイトのデザインに合わせてロゴを調整するか、文字で表示をする、サイズを縮小することを検討することが望ましいです。
今回は、reCAPTCHAロゴを非表示にして機能させる代替案を案内します。
reCAPTCHA バッジを非表示にしてみる
Google reCAPTCHAのサポートページ真ん中あたりにやり方が図のよう掲載されています。
1 2 3 |
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. |
基本的には上記コードを追記するだけで問題ありませんが、レイアウトの調整などを考えCSSとあわせて調整すると綺麗に整います。
1 2 3 4 5 |
<div class="footer_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. </div> |
このサイトの場合は、上記のようにして<div class=”footer_recaptcha”></div>で挟むことにより、CSSのクラスセレクタを設定しています。
実際にクラスセレクタに設定しているCSSの内容は以下のようになっています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
/* ブラウザの大きさが1202px以上の場合 */ @media screen and (min-width: 1202px){ .footer_recaptcha { padding: 1%; text-align: center; color: #CCC; width: 100%; } } /* ブラウザの大きさが1201px以下の場合 */ @media screen and (max-width: 1201px){ .footer_recaptcha { padding: 2%; text-align: center; color: #CCC; width: 96%; border-bottom: none; border-left: none; border-right: none; line-height: 20px; } } |
このサイトのレスポンシブの切り替えサイズは、1201px以下と1202px以上で分けているため、上記の様にサイズごとに表示内容を変える様にしています。
パディングと文字の色を入れている程度ですが、文字の周りに枠線を入れたりすることも問題ありません。リンクの文字色は特に変更していませんが、もし変更したい場合は、
1 2 3 4 5 6 7 8 9 |
/*リンクの文字の色を緑色にしてみる*/ .footer_recaptcha a { color: #00ff00; /*←緑色になる*/ } /*リンクの文字にマウスオンしたときに色を赤色にしてみる*/ .footer_recaptcha a:hover { color: #ff0000; /*←緑色になる*/ } |
上記の様に色見を調整してみてください。
reCAPTCHAバッジの非表示設定を忘れずに
上記までですと、reCAPTCHAのロゴは右下に残ったままですので、最後に非表示にします。
こちらもreCAPTCHAのサポートページにやり方が記載されていますので、同じように行いましょう。
ワードプレスのダッシュボードから、「外観>テーマファイルエディター>style.css」を選択していきます。
※テーマの機能で追加CSSが簡単に設定できる場合は、テーマのカスタムCSS部分に記載する形でも問題ありません。
1 |
.grecaptcha-badge { visibility: hidden; } |
上記のコードを、サイト全体のCSSにかかわるスタイルシートに入れることにより、reCAPTCHAバッジが非表示になります。
※非表示にするコードはほかにも方法がありますが、上記がGoogle推奨方法となります。
さいごに
どうしても右下にreCAPTCHAのロゴ(バッジ)が表示されたままだと、サイトのレイアウトの邪魔になってしまったりすることが有りますので、その際はGoogle推奨のこちらやり方で対応してみましょう。
上記のように非表示にするのではなく、CSSで表示位置を変更することもできますので、適切な手段を用いてみてください。
Google reCAPTCHAは、WordPressのプラグインである Contact Form 7 を利用している場合、簡単に設定することが出来ます。以下の記事にて紹介しています。
[clink url=”https://recross.co.jp/cf7_recaptcha/”]