google推奨！reCAPTCHAのマークを非表示にする方法(日本語で明示)

メールフォームなどにスパム対策として、googleのreCAPTCHAを設定すると、右下にマークが表示されます。
これが邪魔な時があるので、非表示にしましょう。
googleが推奨している方法がありますので、それに則った形で進めていきます。

この記事ではWordpressでの制作を前提としております。

reCAPTCHAの設定はこちら

あわせて読みたい

Contactform7 でreCAPTCHAを設定してスパム・迷惑メール対策をする方法 こんにちは、クートス・ラボ菅井です。Contactform7というお問い合わせフォームを作れるWordpressプラグインの、迷惑メール・スパムメール対策の方法をご紹介します。 …

reCAPTCHAのマークを非表示にする手順

こちらにgoogleからの公式な回答がありますので、このページに記載されている情報を参考にします。

手順1：reCAPTCHA のブランドを明示する

「reCAPTCHAを使ってまっせ〜」ということをユーザーに明示する必要があります！

お問い合わせページに以下の文言を追加しましょう。
お問い合わせフォームの設置されている固定ページの編集画面から編集します。

場所はフォームの送信ボタンの下に入れたいので、フォームが挿入されているブロックのすぐ下に「カスタムHTML」ブロックでコードを追加していきます。

ブロックの追加＞カスタムHTML を選択し、以下のコードを貼り付けてください。

<p class="recapcha-text">このサイトはreCAPTCHAによって保護されており、Googleの
<a href="https://policies.google.com/privacy" target="_blank">プライバシーポリシー</a> と
<a href="https://policies.google.com/terms" target="_blank">利用規約</a> が適用されます。</p>

googleの公式サイトには英語でしか書かれていませんでしたが、今回は日本語での表示にします。

手順2：CSSでマークを非表示にする

以下のCSSをサイトに追加してください。（外観＞カスタマイズ＞追加CSS）

/*reCAPTHAマーク設定*/
.grecaptcha-badge { visibility: hidden; }
p.recapcha-text { font-size: 11px; text-align: center;}

これで右下のマークが消え、先ほどの文字も少し小さくなりました。

完了！

無事にお問い合わせフォームの下に文字が表示されましたか？これでスパム対策＆見た目の問題も解決です！

ページスピード対策

ページスピードインサイト対策として、フォームのあるページ以外ではreCAPTCHAを除外することをおすすめします。

ぜひ以下の記事も参考にしてみてください。やり方を紹介しています。

あわせて読みたい

サイト高速化！PageSpeed insightsの数値を改善する方法（SWELLテーマ） こんにちは、クートス・ラボWEB担当の菅井です。 今回はPageSpeed insightsでページ表示スピードの改善について、私が実際に行った施策をまとめていきたいと思います。…