NO IMAGE

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

 

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

 

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

 

 

 

たけちん
こんにちは。
たけちんです。

 

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

 

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

 

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

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

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

 

 実施内容

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

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

 

 

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

 

 

Google reCAPTCHAの機能

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

 

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

 

 

この記事の信頼性

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

 

当サイトの運営環境

 

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

【YouTube動画】

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

 

 

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

 

この記事の手順

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

 

 

①:カスタマイズを開く

 

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

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

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

 

ご利用中のWordPressテーマに【カスタマイズ】が無い場合は、FAQ(よくある質問)をご覧ください。

 

 

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

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

 

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

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

 

 

②:CSSコードの記述

 

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

 【コピペでOK!】

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

 

 

 ソースコードを拡大

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

 

 CSSコード

/*reCAPTCHA ロゴ位置変更*/
.grecaptcha-badge {
  bottom: 59px !important;
}

 

 

 

たけちん
上記のソースコードをコピペしたら、
下記のように、自分のサイトに合わせて位置を修正しましょう。

 

 

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

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

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

 

 

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

 

 

③:『Google reCAPTCHA』ロゴの表示位置の確認

 

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

 

 PCサイト画面

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

 

 

 モバイルサイト画面

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

 

 

 

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

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

 

 

 

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

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

 

 

FAQ(よくある質問)

 

使っているワードプレスのテーマに【カスタマイズ】が無いんですけど、どこにCSSコードをコピペしたらいいですか?
ワードプレスの【外観】→【テーマエディター】から「子テーマ」を選び、スタイルシート(style.css)へコピペします。
ザ・トールの場合は、「style-user.css」に記述します。テーマによって違いがありますので、確認してください。

 

Google reCAPTCHA サイト→【FAQ(よくある質問)】

 

 


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

関連記事

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

ContactForm7のインストール&基本設定の手順-アイキャッチ

 

NO IMAGE
最新情報をチェックしよう!
>最高のコスパ「ロリポップ!サーバー」

最高のコスパ「ロリポップ!サーバー」

当サイトで実際に導入し、運用中。
【安さ】【使い易さ】【信頼性】【知名度】を総合的に判断、不満なし。
迷ったらロリポップ!で失敗なし。
当サイトは「サイト・ブログの開設、運営」をサポートします。
→ お問い合わせはコチラから
→ サイト・ブログの開設手順はコチラから

CTR IMG