- reCAPTCHA V3のロゴを非表示にしたい
- サイトが重くなるプラグインは使いたくない
- 初心者でも簡単に設定できる方法を知りたい
このような悩みを解決します。
reCAPTCHAとは次のような表示で、このロゴがサイトの右下に表示され邪魔になってしまうケースがあります。
上記のreCAPTCHA V3のロゴマークを非表示にするならGoogle公認の方法がおすすめです。
本記事ではreCAPTCHのロゴを非表示にする方法を解説します。
こんな方におすすめ
- reCAPTCHA V3を導入した人
- reCAPTCHAのロゴを非表示にしたい人
- ブログやサイトの運営初心者
この記事は約３分で読むことができるボリュームの少ない記事です。
手順も初心者でもわかるように画像多めで作成していますので、最後までお読みいただければと思います。
reCAPTCHAを非表示にするならGoogleの指示に従いましょう
reCAPTCHAを非表示にする方法は大体この３つです。
- 直接functions.phpにコードを追加する方法
- プラグインを使用する方法
- Google公認の方法【本記事で解説】
本記事で解説するのは、３番のGoogle公認の方法です。
functions.phpにコードを追加
初心者向けとは言えないので却下。
プラグインを使用する方法
プラグインの使用であれば、初心者でも簡単に導入することができます。
しかし、ロゴが非表示にならなかったケースもあるそうで、実際僕もロゴが表示されたまま、原因を突き止めようにも初心者なので問題がどこにあるかもわからず・・・
結局断念しました。
他のプラグインとの相性もあるので、調整するまで時間がかかるかもです。
Google公式の方法
Googleが公式サイトで発表している方法です。原文は英文。
ですが、丁寧にその内容を確認すると意外と簡単であることがわかりました。
reCAPTCHAのシステム自体がすでにGoogleに譲渡されているので、本家のやり方を導入するのが一番です。
今回はGoogleの公式ページに記載されている簡単な方法を解説します。
設定前に使用環境をチェック
まずはreCAPTCHAのロゴを非表示に設定する前に、利用環境をチェックしましょう。
確認するのは以下の３つ。
- ワードプレスを使っている
- GoogleのreCAPTCHA V3を導入が完了している
- コンタクトフォーム７を使ってお問い合わせフォームを作成している
reCAPTCHAの導入の仕方が分からない方は、コチラの記事で詳細を解説しています。
＞＞【Google推奨】ワードプレスを迷惑メールから守る具体的手順
reCAPTCHAを非表示にする具体的方法
それでは次にreCAPTCHAのロゴを非表示にする方法を解説。
ざっくり４つの手順で完結します。
ワードプレスが苦手な初心者でも大丈夫です。
- htmlのコードをコピー
- コンタクトフォーム に貼り付け
- CSSにコードを追加
- ロゴが非表示になっているか確認
それではここからは、reCAPTCHAのロゴを非表示にする手順をスクショ画像を使って解説していきます。
step
1まずは事前準備をしよう
まずブラウザを２つ起動するか、タブを２つ準備しましょう。
一つには、自分のサイトやブログのワードプレスのダッシュボードを、もう一つには今見ているこのブログの記事を立ち上げておきましょう。
- ブラウザかタブを２つ立ち上げる
- １つ目にはワードプレスのダッシュボード
- ２つ目にはこの記事を開いておく
step
2GoogleサイトにアクセスしてHTMLコードをコピー
STEP２ではGoogle公式サイトにアクセスして、HTMLコードをコピーします。
コチラからGoogleのQ&Aサイトにアクセスします。
▼下記の個所を確認します。
「I'd like to hide the reCAPTCHA badge. What is allowed?」
「reCAPTCHAのロゴを非表示にするには何が必要ですか？」と言うことだと思います。
Googleの指示している文章をサイトに記載すれば、ロゴを非表示にしてもOKですよ、
とのことなので「Googleが記載を求めている文章」をコピーします。
▼下記のhtmlをお問い合わせフォームに記述するため、右上のアイコンをクリックしてコードをコピーします。
※この画面はまだ使うので、閉じないでください。
step
3コンタクトフォーム７にHTMLコードを記述します
Googleの公式サイトでコピーしたHTMLコードをコンタクトフォームに記述します。
まずは、ワードプレス のダッシュボードからコンタクトフォームにアクセス。
編集をクリックし、先ほどGoogleサイトでコピーしたHTMLコードを一番下に記述します。
「WordPressのダッシュボード」→メニューの「お問い合わせ」→「コンタクトフォーム」→「フォーム」のタブ
保存したら完了です。
これで、お問い合わせフォームにGoogleが指示している文言が表示されるようになりました。
あとは、reCAPTCHAのロゴを非表示にする手順です。
step
4CSSにreCAPTCHAのロゴを非表示にする設定
最後にreCAPTCHAのロゴを非表示する設定です。
▼先ほどアクセスしたGoogleのQ &Aサイトの下記の部分をコピーします。
▼コードをコピーしたらワードプレス のダッシュボードを開き「追加CSS」にアクセスします。
使用しているテーマによって違いますが、このブログのテーマ「JIN」（現在はAFFINGER）の場合だと、外観→カスタマイズ→追加CSSでアクセスできます。
▼CSSにコピーしたコードをペーストし保存すれば完了です。
step
5ロゴが非表示となっているか確認しましょう
ブログやサイトを開き、次の２つを確認してください。
- reCAPTCHAのロゴが消えているか
- お問い合わせフォームに下記の文言が追加されているか
▼以下の文章がreCAOTCHAのロゴの代わり表示されます。
This site is protected by reCAPTCHA and the Google
Privacy Policy and
Terms of Service apply.
この２つが確認できれば問題ありません。Google公式によるreCAPTCHAのロゴ非表示の方法は成功です。
それでは今回は以上です。最後までお読みいただきありがとうございました。