スパム対策としてお問い合わせフォームに設置しているreCAPTCHA。
最新版のreCAPTCHA v3をブログやサイトで綺麗に表示する方法をご紹介します。
ブログをWordPressで運営している方は、この方法でロゴを綺麗に表示することができます。
読みたい項目へジャンプ
reCAPTCHA v3は便利だがロゴが邪魔になる
これまで利用されていたreCAPTCHA v2では、チェックボックスにチェックを入れる手間がありました。
しかし、最新版のreCAPTCHA v3ではチェックボックスはなくなり、ユーザーにとっては嬉しい仕様に変更されています。
しかし、reCAPTCHA v3にはひとつ大きなデメリットがある。
それは、画面右下に固定表示されるロゴです。
このようにPCでもスマホでも右下にロゴが固定表示されるので、メニューやTOPに戻るボタンと被ってしまってとても邪魔。
これではブログやサイトのデザインにも影響がでてしまいます。
また、条件を満たせばロゴを消すこともできるみたいですが、ユーザーに安心感を与えるためにあえて残す方向でカスタマイズしたいと考えています。
クラゲ社長
うーん。これはとてつもなく邪魔だ。
なんとかできないですかね…?
クリオネ社員
プラグインを使って邪魔にならないように表示する
reCAPTCHA v3をreCAPTCHA v2のように、特定の場所に止まって表示してくれるプラグインが「Invisible reCaptcha for WordPress」です。
まずは管理画面の[プラグイン]>[新規追加]からInvisible reCaptcha for WordPressをインストールして有効化します。
次に[設定]>[Invisible reCaptcha]>[Settings]を開きます。
それぞれの設定項目を以下のように設定して保存します。
Your Site Key:reCAPTCHA v3のサイトキー
Your Secret Key:reCAPTCHA v3のシークレットキー
Language:Japanese
Badge Position:inline
これで準備は完了です。
お問い合わせにreCAPTCHA v3を設定する
ここでは「Contact Form 7」で設置したお問い合わせページにreCAPTCHA v3を設定していきます。
まずは、Contact Form 7でインテグレーションを設定している場合は削除してください。
次に[設定]>[Invisible reCaptcha]>[Contact Forms]を開き、「Enable Protection for Contact Form 7」にチェックを入れて保存します。
これでお問い合わせページの送信ボタンの下にreCAPTCHA v3のロゴが表示されるようになりました。
記事のコメント欄にreCAPTCHA v3を設定する
記事のコメント欄にもreCAPTCHA v3を表示させることができます。
[設定]>[Invisible reCaptcha]>[WordPress]を開き、「Enable Comments Form Protection」にチェックを入れて保存をするだけ。
このようにコメント欄にもreCAPTCHA v3を設置することができます。
reCAPTCHA v3のロゴを中央にする
Invisible reCaptcha for WordPressでreCAPTCHA v3を設置すると、ロゴが左寄せになって気になるかと思います。
このロゴはCSSで簡単に中央に配置することができます。
やり方は簡単で、管理画面の[外観]>[テーマ編集(テーマエディター)]に下記のコードをコピペするだけ。
/*--------------------------------------
reCAPTCHA v3を中央表示
--------------------------------------*/
.grecaptcha-badge {
margin: auto;
}
まとめ
プラグインを使えば簡単に問題解説することができました。
reCAPTCHA v3では写真を選択する“あの超難問”を解く必要もないので、まだreCAPTCHA v2を利用している場合はv3に変更してみましょう。
これもひとつのユーザーファーストとなりますからね。
クラゲ社長
これでブログデザインを崩すことなくreCAPTCHA v3を導入できたね!