【初心者向け】ContactForm7でreCAPTCHAのロゴを非表示にする方法

ContactForm7のスパム対策にreCAPTCHA(リキャプチャ)を導入すると、サイトの全ページに固定でロゴが表示されますが邪魔なので、reCAPTCHAの効力はそのままでロゴを非表示にする方法の紹介です。

なお、この方法はreCAPTCHAを提供しているGoogleも公認で、手順もGoogleが案内してくれています。

こちらがそのGoogleによる案内のページなのですが
Frequently Asked Questions
なにぶん英語なので、この記事では初心者のかたでもコピペで実装できるようにご案内します。

手順1.ロゴの代わりに記載が必要な文言を作成する

ロゴを非表示にする代わりに”このサイトはreCAPTCHAで守られているよ”ということをサイト内で名言する必要があります。

その文言を作成する方法の紹介から。

まず、こちらの文字を全部、まるっとコピーします。

そしてWordPressの管理画面を開き、左メニュー内の「お問い合わせ」→「コンタクトフォーム」をクリック

サイト内で使っているコンタクトフォームの「編集」をクリック

フォームの入力欄を設定する画面が開くと思いますので、送信ボタンの下に先ほどコピーした文字を貼り付けて「保存」をクリック

終わったら、実際のサイトの画面を見てみます。

先ほど貼り付けた文字列が、文章として表示されているの分かります。

この英文は”このサイトはreCAPTCHAによって保護されており、Googleのプライバシーポリシーと利用規約が適用されます”ということが書いてあり、これを明記しておけばreCAPTCHAのロゴは非表示にしちゃって良いよ、というのがGoogleに認められています。

なお、上記の日本語で書いても大丈夫です。

手順2.reCAPTCHAのロゴを非表示にする

それではいよいよ、reCAPTCHAのロゴを非表示にしましょう。

またWordPress管理画面から左メニュー「テーマ」→「カスタマイズ」をクリック

開いた画面の左メニュー内「追加CSS」をクリック

切り替わった画面内の下図赤枠で囲った欄内に、CSSと呼ばれるサイトの見た目を変更する指示文を書き込みます。

記述するのはこちら↓
コピーして貼り付けてください。

.grecaptcha-badge { visibility: hidden; }

このようになります。

これでロゴを見えなくすることができました。

注意点〜追加CSSはテーマを変えると無効になる

追加CSSに書いた内容は、現在のテーマにのみ適用されます。

”そのテーマに対しての追加CSSを書く”ということですね。

そのためテーマを変更すると、変更後のテーマに対しても追加CSSを書く必要があります。