NO IMAGE

【Google reCAPTCHA】ロゴの表示位置を調整する手順『動画解説あり』

悩む人のイラスト
「Google reCAPTCHA」のロゴが邪魔!
上にずらしたいなぁ。
どうしたらいいの?

 そのお悩みを解決いたします。

たけちん
こんにちは。

今回は、ワードプレスのセキュリティー対策です。

WordPressのスパム対策『Google reCAPTCHA』のbadge(バッジ・ロゴ)を、上下にずらして微調整する手順を解説しています。

この記事の内容を実施すると、下画像のようにロゴをずらす事が出来ます。

reCAPTCHAのバッジの位置をカスタマイズする手順06
【タップ・クリックで画像拡大】

この記事の内容は、当サイトで実証済みです。

 実施内容

ワードプレスのCSSファイルに「CSSコード」をコピペし、少し修正するだけ。

初心者の方でも簡単に出来るようにしています。

たけちん
当サイトと同じテーマ(THE THOR)をご利用の方なら更に簡単です(^_^)

THE THORのインストール方法』を動画と画像で分かりやすく解説しています。

記事執筆に集中したい方で、もしWordPressテーマに迷っている方は、ぜひ検討してみて下さい!


Google reCAPTCHAの機能

ログインフォームやお問い合わせフォームなど、悪質なbot等による不正アクセスからWebサイトを守ります。

『Google reCAPTCHA』の「サイトキー」と「シークレットキー」を発行する手順はコチラ!

 この記事の信頼性

システムエンジニアが実際に試した(体験した)内容を記述し、重要な部分を含めて解説しています!

★プロフィール★

 当サイトの運営環境

【Google reCAPTCHA】ロゴの表示位置を調整する手順

【YouTube動画】

Google reCAPTCHAのロゴを上にずらして表示する手順

たけちん
手順は以下の通りです。
所要時間「5分」
サクッと終わらせましょう!

 この記事の手順

  1. カスタマイズを開く
  2. CSSコードの記述
  3. 『Google reCAPTCHA』ロゴの表示位置の確認

1.カスタマイズを開く

❶ ワードプレスの【カスタマイズ】をクリックします。

(または【外観】→【カスタマイズ】をクリック)

reCAPTCHAのバッジの位置をカスタマイズする手順01
【タップ・クリックで画像拡大】

❷ 【追加CSS】をクリックします。

reCAPTCHAのバッジの位置をカスタマイズする手順02

追加CSSの入力エリアが表示されます。

reCAPTCHAのバッジの位置をカスタマイズする手順03

2.CSSコードの記述

❶ 『追加CSS』に下記のCSSコードをコピペして修正、最後に【公開】をクリックします。

 【コピペでOK!】

reCAPTCHAのバッジの位置をカスタマイズする手順04

ソースコードを拡大

reCAPTCHAのバッジの位置をカスタマイズする手順05

 CSSコード

コード表示
(ここをクリックorタップ)
Copy
/*reCAPTCHA ロゴ位置変更*/
.grecaptcha-badge {
  bottom: 59px !important;
}
たけちん
上記のソースコードをコピペしたら、
下記のように、自分のサイトに合わせて位置を修正しましょう。

 コピペした後、各自で修正する箇所

【ロゴを表示させる位置】

上記ソースコードの数値『59』の部分を書き換えます。
【例】
ロゴを上へずらす→数値を増やす
ロゴを下へずらす→数値を減らす

たけちん
修正が終わったら
公開】をクリックします!

【公開】をクリックしてもエラーで書き込めない時は、レンタルサーバーの『WAF』を無効にしてみて下さい。

ロリポップ!サーバー『WAFの設定方法』はコチラの記事

3.『Google reCAPTCHA』ロゴの表示位置の確認

たけちん
PCサイトとモバイルサイトの『お問い合わせページ』を確認してみましょう!

 PCサイト画面

reCAPTCHAのバッジの位置をカスタマイズする手順06

 モバイルサイト画面

reCAPTCHAのバッジの位置をカスタマイズする手順07

たけちん
当サイトでは『59px』に設定しています。
自分のサイトに合わせてベストな位置を設定してくださいね!

THE THOR(ザ・トール)をご利用の方は、『59px』がいいと思います。

次は、ロゴを『お問い合わせページ』だけに表示してみましょう!>>

【Google reCAPTCHA】のロゴを特定のページだけに表示する手順
『動画解説あり』


『Google reCAPTCHA』のロゴを、サイトの全ページで非表示にしたい時はコチラの記事

ロゴを非表示にする方法

「Google reCAPTCHA」のロゴが邪魔! 消したいなぁ。 どうしたらいいの?  そのお悩みを解決いたします。 たけちん こんにちは。 たけちんです。 今回は、ワード[…]

IMG

Contact Form 7』のインストール手順はコチラの記事で詳しく解説しています。

関連記事

  Google AdSenseに合格したいので「お問い合わせページ」を作りたい。 時間がないから簡単に作りたいなぁ。 どうやって作ればいいの?   そのお悩みを解決します。  […]

ContactForm7のインストール&基本設定の手順-アイキャッチ
NO IMAGE
最新情報をチェックしよう!
>大切なデータが突然消えた...( ̄O ̄;)

大切なデータが突然消えた...( ̄O ̄;)

えっ...
二週間かけて作ったデータが消えた...
何が起こったのか理解出来ず、しばし呆然。
私の時間を返してくれ!
【時を巻き戻す術はなし】

そういう経験をした方は少なくないはず。

さぁ、ownCloudでデータを二重化しときましょう!
実際に0円で導入し、運用しています。
→ 無料お問い合わせはコチラから

TKCオフィス仙台は「ホームページ制作、運営」その他をサポートします。
→ Webサイト・ブログ開設の無料相談はコチラから

CTR IMG