THE THORWordPress

【THE THOR】reCAPTCHA バッジ表示のカスタマイズ

アイキャッチ画像 THE THOR(ザ・トール)
スポンサーリンク

WordPressテーマ THE THOR

別ブログのZMASAa.blogは、WordPressテーマ THE THOR(ザ・トール)を使って構築しています。

The main blog of masaa powered by WordPress.
スマホ、ガジェット、食玩などの記事をWordPressブログに毎日更新中!中の人はこれでもパパ。

プラグイン「Invisible reCaptcha」を導入したときの「reCAPTCHA バッジ」表示に関するカスタマイズについてまとめてみました。

Invisible reCaptcha

プラグイン「Invisible reCaptcha」とは、Googleが提供する第三世代のスパムボット防止対策のサイト認証システムです。

Googleが提供する第三世代のスパムボット防止対策のサイト認証システムは、過去の端末操作やサイトアクセス履歴などから人かロボットかを自動判別する機能を備えており、ユーザー側に操作を要求することがありません。

WordPressテーマ THE THORのreCAPTCHA バッジ表示

このプラグイン「Invisible reCaptcha」を導入すると、「reCAPTCHA バッジ」がコメント欄に表示されるようになります。

WordPressテーマ THE THOR(ザ・トール)でプラグイン「Invisible reCaptcha」を導入すると、「reCAPTCHA バッジ」は次の様に表示されます。

【THE THOR】reCAPTCHA バッジ表示のカスタマイズ

reCAPTCHA バッジ表示のカスタマイズ

「reCAPTCHA バッジ」の上下には空白が無く、窮屈そうに感じられます。

そこで「reCAPTCHA バッジ」の上下に空白を設けるカスタマイズを行います。

カスタマイズ内容

「フッターの背景色」のカスタマイズは、下記の通りです。

このカスタマイズ内容を「スタイルシート(style-user.css)」に追記します。

/************************************
** ■プラグインInvisible reCaptchaのreCAPTCHAバッジ表示
************************************/
.form-submit {
	margin-bottom:20px; /*reCAPTCHA バッジ上空白 */
}
.inv-recaptcha-holder {
	margin-bottom:20px; /*reCAPTCHA バッジ下空白 */
}

カスタマイズ後のreCAPTCHA バッジ表示

今回のカスタマイズによって、WordPressテーマ THE THOR(ザ・トール)の「reCAPTCHA バッジ」は次の様に表示されるようになりました。

【THE THOR】reCAPTCHA バッジ表示のカスタマイズ

最後に

細かいところなので必要無いと言えば必要の無いカスタマイズですが、これにより「reCAPTCHA バッジ」が見やすくなり、より一層スパムボット防止対策済みサイトとして認識されやすいのではないでしょうか。

コメント