【ブログ】reCAPTCHAロゴが重なってしまうのを防ぐ方法について!!

ヨナン
ヨナン

 reCAPTCHAを導入してみたけど、右下のマークがちょっと邪魔なんだよね!

 なんとかならないかな?

本日のお悩み!!

①reCAPTCHA(リキャプチャ)とは?

②reCAPTCHAマークが「トップへ戻るボタン」と重なってしまう!?

お悩みの解決!!

① reCAPTCHA(リキャプチャ)とは?

 Webサイトなどに登録する際、悪質なアクセスからWebサイトを防御するためのシステムです!

② reCAPTCHAマークが「トップへ戻るボタン」と重なってしまう!?

方法①

「WPFront Scroll Top」プラグインの導入!!

方法②

 「functions.php」 を修正!!

1. reCAPTCHA(リキャプチャ)とは?

 あなたは、reCAPTCHA(リキャプチャ)を知っていますか?

 reCAPTCHAとは、Webサイトなどに登録する際、悪質なアクセスからWebサイトを防御するためのシステムです!

 あなたも、「私はロボットではありません」というチェックボックスを見た経験が一度はあるのではないでしょうか?

 reCAPTCHAはバージョンアップを行い、V3まで公開されています!

 (ちなみに、チェックボックスはバージョン:V2です!)

 ヨナンブログでも、導入しています!(画面右下に、矢印3つで輪を形成しているマークが、reCAPTCHAのロゴです!)

2.reCAPTCHAマークが「トップへ戻るボタン」と重なってしまう!?

 さて、問題は、reCAPTCHA v3 を導入すると、「ロゴ」と「トップへ戻るボタン」が重なってしまうことです!!

 ヨナンブログでも、気になっていましたが、手が回らず放置していました(泣)

 しかし、reCAPTCHA 導入後、数ヶ月経ってようやく改善しました!

 その方法をご紹介します!!

3.修正方法!!

 修正方法を2つご紹介します!!

 ただし、reCAPTCHAのロゴマークは、Google利用規約により隠したりすることはできません!!

いかなるブランド表示、ロゴ、法的通知も、削除したり、隠したり、改ざんしたりしてはなりません。

「Googleポリシーと規約-(Google サービス内のコンテンツより抜粋)」https://policies.google.com/terms

3-1 「WPFront Scroll Top」プラグインの導入!

 現在の「トップへ戻るボタンの表示」を削除します!

(テーマ「SANGO」の方法になります)

①WordPressメニューの「外観」から

②「カスタマイズ」の

③「SANGOオリジナル機能」の

④「トップへ戻るボタン」をクリック!!

⑤「トップへ戻るボタンの表示する」のチェックを外す!

⑥「公開」をクリック!!

「WPFront Scroll Top」をインストール

①「プラグイン」→「新規追加」から

②「WPFront Scroll Top」を検索

「インストール」及び「有効化」する!

「WPFront Scroll Top」の設定!

① 「Enabled」にチェック!

② 「Location」の「Margin X」、「Margin Y」を調整する!

 ここは、自由に調整可能です!

 ヨナンブログでは、「X=80」・「Y=6」に設定しています!!!

③「Image Button」からボタンを選択!

④「変更を保存」をクリック!!

動作確認!!

 最後に自分のホームページを確認しましょう!!(step3-②で調節可能です!!)

 (WPFront Scroll Topの設定欄を日本語にすると、、、)

 ちなみに、設定する箇所は英語のため「何を設定しているのか」わかりません。

 そのため、簡易日本語訳を載せておきます!

設定欄の日本語訳
Enabled
(有効化)
プラグインを有効にする
Margin X
(横方向)
右端からの横方向の位置
Margin Y
(縦方向)
下部からの縦方向の位置

3-2 「functions.php」の修正!!

 「functions.php」 を修正するようです。

 ヨナンは、勉強不足なため、あきらめました(笑)

 詳しくは、下記をご覧ください!!

4.まとめ

 最後に、もう一度今回の記事を振り返ります!

お悩みの解決!!

① reCAPTCHA(リキャプチャ)とは?

 Webサイトなどに登録する際、悪質なアクセスからWebサイトを防御するためのシステムです!

② reCAPTCHAマークが「トップへ戻るボタン」と重なってしまう!?

方法①

「WPFront Scroll Top」プラグインの導入!!

方法②

 「functions.php」 を修正!!

 この記事が、あなたの参考になりますように!