ブログ運営

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

ワードプレスでreCAPTCHAを非表示にする方法
reCAPTCHAのロゴマークが邪魔、このロゴマークを非表示にする方法はないの!?
  • reCAPTCHA V3のロゴを非表示にしたい
  • サイトが重くなるプラグインは使いたくない
  • 初心者でも簡単に設定できる方法を知りたい

 

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

reCAPTCHAとは次のような表示のことです。

reCAPTCHAのGIF動画

 

このロゴが、サイトの右下に表示されアイコンの邪魔になってしまうケースがあります。

 

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

 

その理由を詳しく解説していきます。

 

 

この記事がおススメの人

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

 

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

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

 

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

 

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

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

 

functions.phpにコードを追加

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

 

プラグインを使用

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

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

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

結局断念しました。

 

Google公式の方法

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

でも、詳しくやり方を確認すると意外と簡単であることがわかりました。

 

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

 

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

 

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

 

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

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

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

 

※ reCAPTCHAの導入の仕方についてはコチラの記事をご参考にしてください。

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

ワードプレスのロゴ
【スパム対策】WordPressを迷惑メールから守るおススメの方法と具体的手順ブログに海外から大量の迷惑メールがくる。そんな時はGoogleが推奨している"reCAPTCHA"を導入するのがおすすめ。キャプチャ画像を使って導入手順を解説します。...

 

 

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

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

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

初心者でも安心です。

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

 

初心者でも大丈夫です

ざっくり説明すると、お問い合わせフォームにreCAPTCHAのロゴに代わる「文章」を記載する必要があります。

そのフォームがGoogleのサイトにあるのでコピーします。

コピーした文章をお問い合わせフォームに記述し、あとはロゴが表示されないようにCSSにコードを記述します。

これで完了です。

コード?CSS?と難しそうですが、基本的にコピペで完了するので初心者の方でも心配ありません。

作業自体は5分程度で済みます。

 

 

手順0 事前準備

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

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

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

 

手順1 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

 

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

 

 

 

手順2 コンタクトフォーム7にhtmlコードを記述します

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

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

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

 

保存したら完了です。

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

 

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

 

 

手順3 CSSにreCAPTCHAのロゴを非表示にする設定

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

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

 

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

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

 

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

 

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

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

 

手順4 有効になっているか確認する

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

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

 

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

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

 

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

 

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