BLOG WordPress

【Google推奨】reCAPTCHAのロゴを非表示にする方法【画像で解説】

2020年1月19日

ワードプレスでreCAPTCHAを非表示にする方法
reCAPTCHAのロゴマークが邪魔、このロゴマークを非表示にする方法はないの!?

 

  • reCAPTCHA V3のロゴを非表示にしたい
  • サイトが重くなるプラグインは使いたくない
  • 初心者でも簡単に設定できる方法を知りたい

 

このような悩みを解決します。

 

reCAPTCHAとは次のような表示で、このロゴがサイトの右下に表示され邪魔になってしまうケースがあります。

 

reCAPTCHAのGIF動画

 

上記のreCAPTCHA V3のロゴマークを非表示にするならGoogle公認の方法がおすすめです。

 

本記事ではreCAPTCHのロゴを非表示にする方法を解説します。

 

こんな方におすすめ

  • reCAPTCHA V3を導入した人
  • reCAPTCHAのロゴを非表示にしたい人
  • ブログやサイトの運営初心者

この記事は約分で読むことができるボリュームの少ない記事です。

手順も初心者でもわかるように画像多めで作成していますので、最後までお読みいただければと思います。

reCAPTCHAを非表示にするならGoogleの指示に従いましょう

reCAPTCHAを非表示にする方法は大体この3つです。

  1. 直接functions.phpにコードを追加する方法
  2. プラグインを使用する方法
  3. Google公認の方法【本記事で解説】

 

本記事で解説するのは、3番のGoogle公認の方法です。

 

functions.phpにコードを追加

初心者向けとは言えないので却下。

 

プラグインを使用

プラグインの仕様であれば、初心者でも簡単に導入することができます。

しかし、ロゴが非表示にならなかったケースもあるそうです。

実際僕もロゴが表示されたまま、原因を突き止めようにも初心者なので問題がどこにあるかもわからず・・・

結局断念しました。

 

Google公式の方法

Googleが公式で発表していますが英文なので一見難しいそうです。

ですが、丁寧にその内容を確認すると意外と簡単であることがわかりました。

reCAPTCHAのシステム自体がすでにGoogleに譲渡されているので、本家のやり方を導入するのが一番ではないかと思います。

 

今回はGoogleの公式ページに記載されている簡単な方法を解説します。

 

 

設定前に使用環境をチェック

まずはロゴの非表示を設定する前に、環境をチェックしましょう。

確認するのは以下の3つの点です。

  1. ワードプレスを使っている
  2. GoogleのreCAPTCHA V3を導入が完了している
  3. コンタクトフォーム7を使ってお問い合わせフォームを作成している

 

reCAPTCHAの導入の仕方が分からない方は、コチラの記事で詳細を解説しています。

>>【Google推奨】ワードプレスを迷惑メールから守る具体的手順

 

 

 

reCAPTCHAを非表示にする具体的方法

それでは次にreCAPTCHAのロゴを非表示にする方法を解説します。

ざっくりですが、4つの手順で完結します。

ワードプレスが苦手な初心者でも大丈夫です。

  1. htmlのコードをコピー
  2. コンタクトフォーム に貼り付け
  3. CSSにコードを追加
  4. ロゴが非表示になっているか確認

 

それではここからは、reCAPTCHAのロゴを非表示にする手順をスクショ画像を使って解説していきます。

 

step
1
まずは事前準備をしよう

まずブラウザを2つ起動するか、タブを2つ準備しましょう。

一つにはワードプレス のダッシュボードを、もう一つには今見ているこのブログの記事を立ち上げておきましょう。

  • ブラウザかタブを2つ立ち上げる
  • 1つにはワードプレスのダッシュボード
  • 2つ目にはこの記事を開いておく

 

 

step
2
GoogleサイトにアクセスしてHTMLコードをコピー

コチラからGoogleのQ&Aサイトにアクセスします。

>>Google公式ページ

▼下記の個所を確認します。

Google公式サイトreCAPTCHAを非表示にする方法

 

「I'd like to hide the reCAPTCHA badge. What is allowed?」

「reCAPTCHAのロゴを非表示にするには何が必要ですか?」と言うことだと思います。

 

Googleの指示している文章を記載すれば、ロゴを非表示にしてもOKですよ、とのことなので、その文章をコピーします。

 

▼下記のhtmlをお問い合わせフォームに記述するため、右上のアイコンをクリックしてコードをコピーします。

reCAPTCHAのロゴを非表示にする方法1

この画面はまだ使うので、閉じないでください。

 

step
3
コンタクトフォーム7にHTMLコードを記述します

ワードプレス のダッシュボードからコンタクトフォームにアクセスします。

編集をクリックし、先ほどGoogleサイトでコピーしたHTMLコードを一番下に記述します。

 

reCAPTCHAのロゴを非表示にする方法2

保存したら完了です。

これで、お問い合わせフォームにGoogleが指示している文言が表示されるようになりました。

 

あとは、reCAPTCHAのロゴを非表示にする手順です。

 

step
4
CSSにreCAPTCHAのロゴを非表示にする設定

▼先ほどアクセスしたGoogleのQ &Aサイトの下記の部分をコピーします。

reCAPTCHAのロゴを非表示にする方法3

 

▼コードをコピーしたらワードプレス のダッシュボードを開き「追加CSS」にアクセスします。

reCAPTCHAのロゴを非表示にする方法4

 

使用しているテーマによって違いますが、このブログのテーマ「JIN」の場合だと、外観→カスタマイズ→追加CSSでアクセスできます。

 

▼CSSにコピーしたコードをペーストし保存すれば完了です。

reCAPTCHAのロゴを非表示にする方法5

 

step
5
ロゴが非表示となっているか確認しましょう

ブログやサイトを開き、次の2つを確認してください。

  • reCAPTCHAのロゴが消えているか
  • お問い合わせフォームに下記の文言が追加されているか

 

▼以下がお問い合わせフォームに、reCAOTCHAのロゴに代わり記載される文章

This site is protected by reCAPTCHA and the Google
Privacy Policy and
Terms of Service apply.

 

この2つが確認できれば問題ありません。Google公式によるreCAPTCHAのロゴ非表示の方法は成功です。

 

それでは今回は以上です。最後までお読みいただきありがとうございました。

-BLOG, WordPress
-, ,

© 2020 JIKORICH