ブログ記事の途中で記事のトップに戻りたい時がある。スマホの表示では、画面の下のメニューバーに『↑トップ』のメニューボタンが表示されるので、ここをタップすれば記事のトップに移動する。PC表示では画面を下にスクロールすると、画面の右下に記事のトップに戻るためのボタンが表示される。
一方で、Googleのスパム対策ツールのreCAPTCHA v3を用いている場合は、reCAPTCHA v3のバッジ（矢印３つが時計回りに円を描くようなデザイン。当ブログでは左下に表示）が画面右下に表示されて、トップに戻るボタンと重なってしまう（PCの場合）。
reCAPTCHA v3のバッジを画面左下に移動させる方法と、トップに戻るボタンのデザインをよりビジュアルに分かりやすくするための変更（PC用）についての備忘録を以下に記す。
reCAPTCHA v3のバッジ移動について
Googleのスパム対策ツールreCAPTCHA v3とは
Googleが無料で提供しているreCAPTCHAは、Contact Form7などを使用してお問い合わせフォームなどをブログサイトに設置する場合や、会員用のログイン画面を設置する場合に、botによる攻撃を阻止するために、人なのかbotなのかを判断してブロックしてくれるツールだ（*botとは一定のタスクや処理を自動化するアプリケーションやプログラム）
かつては歪んだ文字を読み取ってユーザーに入力させる方法や、同じ画像を選択して「私はロボットではありません」にチェックさせる方法などが用いられていた。最新版のreCAPTCHA v3では、設置したページでの人間の動作を機械学習して、人間かbotかを自動で判断してくれる仕様になり、ユーザーのアクションが不要になった。
設置の目的の第１はスパム防止。スパムのほとんどは特定サイトへの誘導やウイルス感染が目的であり、機械的に送られてきたものかどうかを自動判断する。第２の目的は不正ログインの防止。ロボットによる総当たり的な攻撃を検知して阻止する。第３にはWebフォーム経由の不正・大量アカウント作成を防止しサーバーへの悪影響を阻止する等の目的がある。
reCAPTCHA v3のバッジとトップへ戻るボタンの表示位置について
ワードプレスへのreCAPTCHA v3のインストールに関しては、プラグインの「Invisible reCAPTCHA」を用いた。reCAPTCHA v3のバッジはデフォルトでPC画面の右下に表示される。同じく画面の右下には、トップへ戻るボタンが表示されており、２つが重なってしまう（PCの場合）。
このバッティングを解消する方法としては、①reCAPTCHA v3のバッジを非表示にする、②reCAPTCHA v3のバッジを左下に移動する、③トップへ戻るボタンを左下に移動する、の３通りがある。右利きの人がマウスを操作する場合、カーソル移動の観点からトップへ戻るボタンが左下にあるより右下にあった方が操作しやすいので、③の方法は優先度が下がる。
reCAPTCHA v3のバッジを非表示にする①については、非表示にしても機能的には支障ないのだが、表示することで悪意のある人に対する牽制になるので、できればどこかに表示しておきたい。というわけで、②のreCAPTCHA v3のバッジを左下に移動する案で対応することにした。バッジをマウスで操作することはないので、画面の左下にあっても支障ない。
reCAPTCHA v3のバッジの表示位置変更方法
Invisible reCAPTCHAの場合、「ワードプレスのメニューバーで『設定』を選択 → 表示項目の中の『Invisible reCAPTCHA』を選択 → 上から４番目『バッジ位置』の『左下』を選択 → 画面左下の『変更を保存』をクリック」の手順で表示位置を左下に変更できる仕様になっている。ところが左下を選択しても位置は変わらず、右下に表示され続けて変更できなかった（理由は不明）。
色々調べた結果『バッジの位置』の選択で、すぐ下のボックスに以下の青枠内のCSSをコピペすることで左下に表示位置を変更できることが分かった。バッジ位置の選択は『インライン』ではなく『左下』のままにしておけばよい。
/*reCAPTCHA v3 バッジを左下に移動*/
.grecaptcha-badge {
width: 70px !important;
overflow: hidden !important;
transition: all 0.3s ease !important;
left: 4px !important;
}
.grecaptcha-badge:hover {
width: 256px !important;
}
１行目の /*reCAPTCHA v3 バッジを左下に移動*/ は何のためのCSSかの説明文なので、コピペに含めても含めなくても影響ない。
上記の方法以外に、「追加 CSS」へ加筆／コピペする方法もある。「ワードプレスのダッシュボードのメニューから『外観』を選択 → 上から二番目の『カスタマイズ』をクリック → 表示された画面左のメニューの一番下の『追加 CSS』を選択 → 上の青枠内のCSSを加筆またはコピペして追加する（既存のCSSコードの一番下に加筆／コピペすれば良い。何もない場合は一番上に加筆／コピペ）」
トップへ戻るボタンの変更（PCの場合）
トップへ戻るボタンの変更については、ネットで多くの方法が紹介されている。CSSやjQueryなどを使用してデザイン、大きさ、戻るスピードなど、細かい設定が工夫されている。そこまで仕様に拘らなければ、COCOONなどのテーマでは以下に示すように、標準でトップへ戻るボタンを設定したりデザインを変更できるようになっている。
デフォルトのトップへ戻るボタンを変更する手順（COCOON使用の場合）
「ワードプレスのメニューから『COCOON』を選択 → 上部に並ぶメニューバーから『ボタン』を選択」
「トップへ戻るボタン設定」の画面が表示される。一番上の『プレビュー』にその時点で選択しているボタンが表示される。そもそもトップボタンの表示が不要な場合は、２番目の『トップへ戻るボタンの表示』のレ点をクリックして外せばよい。表示する場合はそのままレ点を残す。３番目の『ボタンのアイコンフォント』から好みのボタンを選択し、４番目の『ボタン色』で背景色と文字色を設定する。画面左下の『変更をまとめて保存』をクリックすれば、ボタンの表示を変更できる。
カスタマイズのボタンを設定する方法（COCOON使用の場合）
デフォルトで用意されているPC表示のボタンは、慣れている人にはすぐに意味が分かるが、そうでない人にはトップへ戻るためのボタンであるとすぐに認識できないかもしれない。そこで当記事の右下にあるようなボタンを自作して設定した。
パワーポイントなどを用いてデザインし、jpeg方式で保存する。５番目（一番下）の『ボタン画像』で『選択』をクリックし、保存した画像をアップロードする。ネットで調べるといろんなトップへ戻るボタンが紹介されており、jpeg形式でダウンロードできるものも少なくない。好みのボタンが見つかれば、そのjpeg画像をアップロードすればよい。最後に、画面左下の『変更をまとめて保存』をクリックすれば、カスタマイズのボタン表示へ変更できる。