ブログ初心者稼ぐ 楽天アフィリ

ワードプレス

reCAPTCHAのマークを消す方法!画面右下のロゴが邪魔なので非表示にしたいときの対処法

記事内に商品プロモーションを含む場合があります

スパム対策で『reCAPTCHA』を設定すると、画面右下にマークが表示されますよね。

「上へ戻る」などのボタンと被ってしまうので、非表示にすることができます。

 

お問い合わせフォームを作成するプラグイン『contact form7』を使用した方法をご紹介します。

『reCAPTCHA』マークを消す方法

『reCAPTCHA』マークを消す方法

画面右下の表示される『reCAPTCHA』マーク。

『reCAPTCHA』マークを消す方法

ボタンと重なってしまって、ちょっとボタンが押しづらいですよね。

 

これを非表示にする手順がこちらです。

  1. 「contact form7」にhtmlのコードを貼る
  2. 追加CSSにコードを貼り付ける

順番に解説しますね。

①contact form7にhtmlのコードを貼る

お問合せフォームを作成するプラグインの「contact form7」に、htmlのコードを貼り付けます。

まずは、Googleの公式ページへアクセスしてhtmlのコードをコピーしましょう。

Google公式

 

Googleの公式サイトへアクセスをしたら

 

I’d like to hide the reCAPTCHA badge. What is allowed?

と書かれたところまで、画面をスクロールします。

reCAPTCHAマークを消す方法,非表示

「This sute is〜」で始まる、htmlコードをコピーしてください。

 

続いて、ワードプレスの「お問い合せ」を開きます。

reCAPTCHAマークを消す方法,非表示

お問い合わせフォームの1番下に、コピーしたhtmlコードを貼り付けます。

マークは非表示だけどreCAPTCHAの設定はしてありますよということを表記しています

貼り付けができたら「保存」ボタンを押してください。

②追加CSSにコードを貼り付ける

もう一度、先ほどのGoogle公式ページに戻り「ロゴマークを非表示にするコード」をコピーします。

reCAPTCHAマークを消す方法,非表示

コピーをしたら、ワードプレスの「外観」→「カスタマイズ」→「追加CSS」の順に開きます。

reCAPTCHAマークを消す方法,非表示

(ワードプレステーマJINで解説しています。他のテーマの方は「CSSの追加方法」などで検索してくださいね)

reCAPTCHAマークを消す方法,非表示

「追加CSS」を開いて、先ほどコピーしたコードを貼り付けます。

既に別のコードが記載してある場合は、1行空けて貼り付けてください。

reCAPTCHAマークを消す方法,非表示

最後に「公開」(保存)ボタンをクリックして完了です。

reCAPTCHAのロゴマークが消えているかチェック

reCAPTCHAのロゴマークが消えているか、確認してみましょう。

消えていない場合は、更新ボタンを押してから再度確認してみてください。

それでも消えていない場合は、コードの貼り付け方が間違っている可能性があります。

 

また、お問い合わせフォームも確認してみましょう。

reCAPTCHAマークを消す方法,非表示

先ほど貼り付けた、文言が表示されてリンクが正しく設定されているかも確認してみてくださいね。

メルマガやってます♪