【WordPress】reCAPTCHAマークを非表示にする方法

はじめに

初めまして、Wiseです。（私のプロフィールはこちら）

WordPressのWebサイトでお問い合わせフォームのスパム対策として「reCAPTCHA」を利用している方も多いかと思いますが、デザイン面でreCAPTCHAマークが邪魔に感じることもあるかと思います。

「上に戻る」ボタンと被ってしまう

この記事では、Google公式のやり方でWordPressのreCAPTCHAマークを非表示にする方法をご紹介します。

①カスタムCSSを使用する

1. WordPressのダッシュボードにログインします。
2. 「外観」メニューから「テーマのカスタマイズ」を選択します。
3. 「追加のCSS」セクションを見つけ、クリックします。
4. 以下のコードを追加して、reCAPTCHAマークを非表示にします。

/* reCAPTCHAマークを非表示 */
.grecaptcha-badge { 
visibility: hidden; 
}

②プラグインを使用する

1. WordPressのダッシュボードにログインします。
2. 「プラグイン」メニューから「新規追加」を選び、検索バーに「Simple Custom CSS and JS」を入力します。
3. プラグインをインストールして有効化します。
4. 「設定」メニューから「Custom CSS/JS」を選択します。
5. 「Custom CSS」タブに以下のコードを追加します。

/* reCAPTCHAマークを非表示 */
.grecaptcha-badge { 
visibility: hidden; 
}

③テーマの編集を使用する（注意が必要）

1. WordPressのダッシュボードにログインします。
2. 「外観」メニューから「テーマエディタ」を選択します。
3. 使用しているテーマの「style.css」ファイルを選択します。
4. 以下のコードを追加して、reCAPTCHAマークを非表示にします。

/* reCAPTCHAマークを非表示 */
.grecaptcha-badge { 
visibility: hidden; 
}

この方法はテーマのアップデート時に変更が上書きされる可能性があるため、注意が必要です。

お問い合わせフォームへの注記

お問合せフォームには、「マークは非表示だけどreCAPTCHAの設定はしてあります」ということを表記しておいた方が、安心してフォームを利用できます。

そこで、お問い合わせフォームの1番下に、次のhtmlコードを貼り付けましょう。（Google公式より引用）

This site is protected by reCAPTCHA and the Google
     <a href="https://policies.google.com/privacy">Privacy Policy</a> and
     <a href="https://policies.google.com/terms">Terms of Service</a> apply.

まとめ

今回の記事では、「reCAPTCHA」マークを非表示にする方法をお伝えしました。

「上へ戻る」ボタンだけが表示される状態に

以上の方法を試して、自分のWebサイトを見やすく改善していただければ幸いです。