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