クエスト15：設定を保守して、安心して運営できる状態にしよう！
jinlab
JIN:Rクエスト
クエスト12：reCAPTCHAとContact Form7の設定でサイトを鉄壁に！
jinlab
記事内に商品プロモーションを含む場合があります
あなたのブログにお問い合わせフォームはありますか？
読者からの質問や仕事の依頼を受け取るためには欠かせないものです。
でも、フォームを置くだけだとスパムメールが大量に届いてしまう危険も…。
- スパムやボットを強力にブロックする 「Advanced Google reCAPTCHA」
- 簡単にお問い合わせフォームを作れる 「Contact Form7」
この2つをセットで導入して、あなたのサイトをしっかり守れるようにしていきます。
これができれば、安心してお問い合わせを受け取れる“鉄壁のブログ”の完成です！
さっそく始めましょう。
目次
今日のゴール
今回のクエストで目指すのは、この3つです。
今日のクエストの目的は？
- サイト全体をreCAPTCHAで守る
→ Advanced Google reCAPTCHAプラグインを使って、ログインやコメント欄を保護する - フォームにもreCAPTCHAを連携する
→ Contact Form 7とreCAPTCHAをインテグレーションして、お問い合わせフォームにスパム対策を反映する - バッジ表示を整える
→ 不要なページではreCAPTCHAバッジを非表示にして、見た目をすっきりさせる
この3つを達成して、ブログを安全で信頼できる場所にレベルアップさせましょう！
そもそもスパムって何？
スパムとは、「受け取りたくない迷惑なメッセージやコメント」のことです。
ブログやホームページを運営していると、
- コメント欄に広告を大量に書き込まれる
- お問い合わせフォームから怪しい営業メールが届く
- ログインを狙う不正プログラムが動く
こうした自動的に送られる不要な投稿やメールがどんどん増えていきます。
これがいわゆる「スパム」。
読者やお客さんからの本当のメッセージを見落としてしまう原因にもなります。
だからこそ、reCAPTCHA（リキャプチャ）を使ってロボットによる自動送信をシャットアウトし、大事なサイトを守る必要があるんです。
1. Advanced Google reCAPTCHAを設定しよう
どんなプラグイン？
一言でいうと
「サイトをスパムやロボットから守るためのセキュリティプラグイン」です。
具体的には…
- ログイン画面に「私はロボットではありません」のチェックを付けて、不正ログインを防ぐ
- コメント欄へのスパム投稿をシャットアウト
- お問い合わせフォームへの迷惑な自動送信をブロック
こうした「自動ツール（ボット）による攻撃」を防いで、
あなたのサイトを安心・安全にしてくれる役割があります。
プラグインをインストール
WordPress管理画面の左メニューから
「プラグイン」 ＞ 「プラグインを追加」をクリックする。
検索する
右上の検索窓に、「Advanced Google reCAPTCHA」と入力。
今すぐインストール
「今すぐインストール」をクリックする。
有効化
インストールが終わったら、そのまま「有効化」をクリックする。
GoogleでreCAPTCHAを登録してキーを作る
次に、GoogleのreCAPTCHAページにアクセスします。
ここで、あなたのサイトを「Googleに登録」して、キー（鍵）を発行してもらいます。
サイトの情報を入力する
画面にフォームが表示されるので、次のように入力してください。
- ラベル
「ブログ名」を入力する - reCAPTCHAタイプ
初心者には「reCAPTCHA v3（スコアベース）」がおすすめです。 - ドメイン
「あなたのサイトのURL」を入力します。
（example.comのように、https:// は付けずに書きます。） - 「利用規約への同意」にチェックを入れます。
- 「送信」をクリックする。
キーが発行される
ここで自分のサイトを登録すると、
- サイトキー
- シークレットキー
という2つのキーが表示されます。
設定画面を開く
WordPress管理画面の左メニューから
「設定」 ＞ 「Advanced Google reCAPTCHA」をクリックする。
設定画面にポップアップ広告が表示される
「Advanced Google reCAPTCHA」の設定画面を開くと、
英語のポップアップ広告が表示される場合があります。
画面の外側（黒の部分など）を1回クリックすると、広告は消えます。
Google reCAPTCHA「v3」を選ぼう
Googleでサイト登録するときに「reCAPTCHAのタイプ」を選ぶ画面があります。
Googleで選んだ reCAPTCHAタイプと同じものを選びます。
ここでは「Google reCAPTCHA v3」を選びましょう。
Googleでサイト登録（Step5）をしたときに、次のどちらかを選んだはずです：
- reCAPTCHA v3（スコアベース／右下にバッジが出る）
- reCAPTCHA v2（チェックボックス形式）
WordPressの「Advanced Google reCAPTCHA」の設定画面にも、
どのタイプを使うかを選ぶ項目があります。
ここで、Googleで登録したタイプと同じものを選んでください。
サイトキーとシークレットキーをコピー＆貼り付け
この2つを、WordPressの「Advanced Google reCAPTCHA」設定画面にある入力欄にそれぞれ貼り付けましょう。
Step6(キーが発行される)で発行されたキーをコピーして、貼り付ける。
コピー時に「前後の空白」や「全角スペース」が入らないように注意！
正しく貼り付けないと認証エラーになります。
「Verify Captcha」をクリックして確認
2つのキーを貼り付けたら、すぐ下にある
「Verify Captcha」をクリックします。
そして「Submit Captcha」クリックします。
このボタンを押すと、Googleとの連携が正しくできているかをチェックしてくれます。
成功すると下記の画像が表示されるます。
「OK」をクリックする。
「変更内容を保存」をクリックして設定完了！
最後に、画面下にある「変更内容を保存」をクリックします。
どこにreCAPTCHAを表示するか選ぼう
設定画面の中にある「Where To Show」のタブをクリックします。
ここでは、reCAPTCHAをどの画面に表示するかを選びます。
以下の4か所すべてにチェックを入れてください。
チェックを入れる場所（4つ）
- Login Form（ログイン画面）
→ 自分がログインするときの画面 - Registration Form（ユーザー登録画面）
→ サイトに登録機能がある場合は、ここを守ります - Lost Password Form（パスワード再発行画面）
→ パスワードを忘れたときに再発行するページ - Comment Form（コメント投稿フォーム）
→ 読者が記事にコメントする場所。スパムが来やすいので必須！
最後に「変更内容を保存」をクリック！
すべてチェックを入れたら、画面下にある
「変更内容を保存」をクリックして設定を完了させましょう。
reCAPTCHAが表示される！
試しにログアウトして「ログイン画面」を見てみると、reCAPTCHAが表示されていることが確認できます。
これで、ログイン・パスワード再発行・コメントの場面にreCAPTCHAが表示され、自動投稿や不正アクセスをしっかり防いでくれるようになります！
2. Contact Form 7 に reCAPTCHA を連携する
「Advanced Google reCAPTCHA」を設定しても、
お問い合わせフォーム（Contact Form7）は自動では守られません。
そのため、Contact Form 7 側でも reCAPTCHAのインテグレーション設定が必要です。
「インテグレーション」ってなに？
インテグレーション（Integration）とは、
「連携」や「つなげること」を意味する言葉です。
インテグレーション画面を開く
WordPress管理画面の左メニューから
「お問い合わせ」＞「インテグレーション」を選びます。
reCAPTCHAセクション
その中にある 「reCAPTCHA」セクションで
「インテグレーションのセットアップ」をクリックします。
キーを入力して保存する
事前にGoogleで発行した
- サイトキー（Site Key）
- シークレットキー（Secret Key）
を、対応する入力欄にコピー＆ペーストします。
Googleで「キー」を確認する方法
まず、以下のリンクを開きます
👉 Google reCAPTCHA 管理ページ
その右にある「設定（歯車マーク）」をクリック
「reCAPTCHAのキー」をクリックする
キーの詳細画面が表示されます。
「変更を保存」をクリック！
すべてチェックを入れたら、画面下にある
「変更を保存」をクリックして設定を完了させましょう。
reCAPTCHAが有効になっているか確認
設定が完了すると、
固定ページや投稿ページなどの右下に、
reCAPTCHAのバッジ（小さなロゴマーク）が表示されます。
これが表示されていれば、連携は正常に機能しています。
あなたが作ったお問い合わせフォームが、スパムボットから保護されるようになりました！
3. お問い合わせページ以外ではバッジを非表示にしよう
Google reCAPTCHAを導入すると、
すべてのページの右下にバッジ（小さなマーク）が表示されます。
でも、実際にreCAPTCHAを使うのは「お問い合わせフォーム」だけという場合がほとんど。
そんなときは、バッジを“お問い合わせページだけ”に表示して、それ以外のページでは隠すように設定することができます。
ここではそのやり方を、ステップに分けて詳しく説明します。
お問い合わせページの「ID」を調べる
CSSで「このページだけ表示したい」と指定するには、
WordPressの中で使われているページID（数字）を知る必要があります。
- WordPress管理画面の左側メニューで「固定ページ」＞「すべてのページ」をクリック
→ クエスト5の「お問い合わせページを作ろう」で作成した - 「お問い合わせページ」を探します
WordPress管理画面で「カスタマイズ」を開く
管理画面で「外観」>「カスタマイズ」を開く
「追加CSS」をクリックする
カスタマイザー画面の左側にある項目から、
下のほうにある「追加CSS」というメニューをクリックします。
「CSS」とは？
サイトの見た目を調整するためのスタイルのことです。
ここに設定を書き加えることで、reCAPTCHAバッジの表示をコントロールできます。
CSSコードを入力する
表示された入力欄に、以下のCSSコードを貼り付けます。
/お問い合わせページ以外のreCAPTCHAバッジを非表示にする/
/注：数字を、固定ページ一覧の「お問い合わせページID」に書き換えてください/
body:not(.page-id-147) .grecaptcha-badge { visibility: hidden; }
/reCAPTCHAバッジを上方向にずらすCSS/
.grecaptcha-badge { bottom: 100px!important; }
「page-id-99」の数字を自分のページIDに変更する
上記コードの中にある
「page-id-99」という部分を、
Step.1で調べた自分の「お問い合わせページのID」に変更してください。
例：ページIDが「147」の場合
body:not(.page-id-147) .grecaptcha-badge {
visibility: hidden;
}
「公開」をクリックして保存
コードを入力し終えたら、
画面上の「公開」をクリックする。
動作確認しよう！
- お問い合わせページ → reCAPTCHAバッジが表示されている
- その他のページ → バッジが表示されていない
お問い合わせページ
それ以外のページ
この状態であれば、設定は成功です！
これでバッジの表示がスマートに！
無駄なバッジ表示が消えることで、
サイトの見た目がすっきりし、読者にとってもストレスの少ないデザインになります。
よくあるミスと対処法
- Contact Form 7 のショートコードを貼り忘れる
-
お問い合わせページを開いてもフォームが表示されない場合、
固定ページにショートコードが正しく貼られていない可能性があります。【対処法】
- Contact Form 7 の編集画面で、ショートコード（例：
エラー: コンタクトフォームが見つかりません。
- 固定ページの本文エリアに貼り付けて保存しましょう
- Contact Form 7 の編集画面で、ショートコード（例：
Q
- reCAPTCHAキーを間違える・保存し忘れる
-
Googleで発行された
- サイトキー（Site Key）
- シークレットキー（Secret Key）
を 間違った欄に入力したり、保存ボタンを押し忘れると認証が機能しません。
【対処法】
- コピペする際は、前後にスペースや改行が入っていないかを確認
- 入力後は必ず「変更内容を保存」ボタンをクリック！
Q
- reCAPTCHAの動作確認をしていない
-
設定後、実際にフォームがちゃんと動くかを確認せずに放置すると、
「送信できない」「バッジが出ない」といったトラブルに気づけないままになります。【対処法】
- お問い合わせページを開いて、フォームが正しく表示されているか確認
- テストでフォームに入力し、「送信」ボタンを押して正常に動作するか試しましょう
- 右下にreCAPTCHAのバッジが表示されていれば、保護されています
Q
まとめ｜成果を振り返ろう
これで今日のクエストもクリア！
成果を振り返ろう！
- サイト全体をreCAPTCHAで守れるようになった
→ Advanced Google reCAPTCHAを設定し、ログイン画面・コメント欄・登録フォームなどにスパム対策を導入できた - フォームにもreCAPTCHAを連携できた
→ Contact Form 7とのインテグレーションを行い、お問い合わせフォームも安全に使えるようになった - バッジの表示を必要なページだけに調整できた
→ お問い合わせページ以外ではreCAPTCHAバッジを非表示にして、サイトの見た目をスッキリ整えられた
このクエストをクリアしたあなたのサイトは、セキュリティもデザインもワンランクアップ！
安心してお問い合わせを受け取れる体制が整いました。
ABOUT ME
デザイン初心者でも、おしゃれなブログやホームページは作れます！
JIN:Rを使ったWeb制作の手順や、見た目を整えるコツを発信中。
難しい操作や専門用語はできるだけかみくだいて解説。
「自分でサイトを作りたい」と思ったあなたの最初の一歩を応援します。
