メールフォームなどにスパム対策として、googleのreCAPTCHAを設定すると、右下にマークが表示されます。
これが邪魔な時があるので、非表示にしましょう。
googleが推奨している方法がありますので、それに則った形で進めていきます。
完成イメージはこちら
ピンクで囲っている文字を今回入れていきます！
この記事ではWordpressでの制作を前提としております。
reCAPTCHAの設定はこちら
reCAPTCHAのマークを非表示にする手順
こちらにgoogleからの公式な回答がありますので、このページに記載されている情報を参考にします。
reCAPTCHA のブランドを明示する文言を貼り付ける
「reCAPTCHAを使ってまっせ〜」ということをユーザーに明示する必要があります！
お問い合わせページに以下の文言を追加しましょう。
お問い合わせフォームの設置されている固定ページの編集画面から編集します。
場所はフォームの送信ボタンの下に入れたいので、フォームが挿入されているブロックのすぐ下あたりに、以下をコピペしてください！
以下をコピペしてみてね
このサイトはreCAPTCHAによって保護されており、Googleのプライバシーポリシー と利用規約 が適用されます。
これでプライバシーポリシーと利用規約のリンクもされている状態で貼り付けられると思います！
文字の大きさは一番小さいサイズで大丈夫なので、ブロックエディタ上でサイズを変更してください。
うまくできない場合は、ブロックの追加＞カスタム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の公式サイトには英語でしか書かれていませんでしたが、今回は日本語での表示にします。
HTMLでコピーした場合、CSSでマークを非表示にする
以下のCSSをサイトに追加してください。（外観＞カスタマイズ＞追加CSS）
/*reCAPTHAマーク設定*/
.grecaptcha-badge { visibility: hidden; }
p.recapcha-text { font-size: 11px; text-align: center;}これで右下のマークが消え、先ほどの文字も少し小さくなりました。
完了！
無事にお問い合わせフォームの下に文字が表示されましたか？これでスパム対策＆見た目の問題も解決です！
ページスピード対策
ページスピードインサイト対策として、フォームのあるページ以外ではreCAPTCHAを除外することをおすすめします。
ぜひ以下の記事も参考にしてみてください。やり方を紹介しています。
