最近、ChatGPTに相談しながらブログの表示速度改善や設定の見直しをしていたのですが、思わぬトラブルが発生しました💦
人気ブログランキング経由で「一番下のコメント欄の手書き風の文字が出てこなくて、コメントができません」というコメントをいただいたんです。自分の記事のコメント欄って、意外と管理者は触らないですよね…。実際に確認してみると、💻パソコンでは正常なのに、📱スマホでは「CAPTCHA」という文字だけが表示され、手書き風の文字が出ない状態でした。つまり、スマホからコメントできない状態になっていたのです😨 これはさすがに直さないと…！
出典：ChatGPT公式サイト
🔍 ホバー拡大のCSSが原因？
ちょうどその直前に、
画像をホバーで拡大するCSSを追加していたため、
「これが原因かな…？」
と疑いました。
img:hover {
transform: scale(1.2);
transition: transform 0.3s ease;
z-index: 10;
}でもChatGPTに確認したところ、
- スマホには「hover」の概念がほぼない
- このCSSがCAPTCHA画像を壊す可能性は低い
とのこと。
👉 ホバー拡大CSSは無関係でした！
せっかく実装したので、これはそのままでOKで一安心です😌
🔐 reCAPTCHA v3を入れた背景
2025年3月、エックスサーバーから
フォームを悪用したスパムメールが増えている
という注意喚起があり、
セキュリティ強化のため reCAPTCHA v3 を導入しました。
✅ reCAPTCHA v3の特徴
- チェック操作なし（非表示）
- 行動解析によるスコア判定
- ユーザー体験を邪魔しない
…はずなのに、
**コメント欄では「手書き風ひらがなCAPTCHA」**が表示されている。
ここで違和感が。
※この記事で問題になっていたのは「Google reCAPTCHA v3」ではなく、コメント欄で使われている「画像認証式（手書き風ひらがな）CAPTCHA」でした。
🛠️ トラブルシューティング
もし、reCAPTCHAに関連する問題が発生している場合、以下の点を確認してください：
- JavaScriptの有効化：ブラウザでJavaScriptが無効になっていると、reCAPTCHAが正しく動作しません。
- ブラウザの拡張機能：広告ブロッカーやセキュリティ関連の拡張機能がreCAPTCHAの動作を妨げている可能性があります。
- Cookieの設定：Cookieが無効になっていると、reCAPTCHAの認証がうまくいかないことがあります。
📷 実際に起きていた問題
- コメント欄の CAPTCHA画像が表示されない
- スマホだけ「CAPTCHA」という文字だけ出る
- 画像が壊れて読み込まれていない状態
これは Google reCAPTCHA v3 ではなく、
👉 画像生成型CAPTCHA（手書き風ひらがな）
でした。
❗ 問題の本質
このタイプのCAPTCHAは、
- PHPで画像を動的生成
<img>タグで表示- 入力文字と照合
という仕組み。
つまり、
画像が正しく生成 or 読み込まれないとアウト
です。
🔥 原因はWP Rocketだった
最近導入した WP Rocket。
表示速度は爆速になるけど、設定が強烈。
調べた結果、原因はここ👇
✅ WP RocketによってCAPTCHAが壊れる主な理由
- JavaScriptの遅延読み込み（Delay JavaScript Execution）
→ CAPTCHA関連のスクリプトが後から読み込まれて表示されないケースが多いです。 - CSS・JSの結合や縮小（Minify/Combine）
→ スクリプトやスタイルが壊れて画像が正しく表示されないことも。 - LazyLoad機能（画像の遅延読み込み）
→ CAPTCHA画像がimgタグの場合、これも対象になって読み込まれなくなることがあります。
特に
👉 Delay JavaScript Execution（JS遅延）
これが犯人でした。
🛠️ 解決方法｜最重要ポイント
① 「遅延読み込み」設定から除外する
【1】管理画面 → WP Rocket
【2】「ファイル最適化」を開く
【3】下へスクロール
「Delay JavaScript Execution」 を探す
【4】「遅延から除外するスクリプト」に追加👇
captcha
wpcf7_captcha
really-simple-captcha※すでに何か書いてあってもOK。
新しい行に追加してください。
② LazyLoad対象からCAPTCHA画像を除外（必要なら）
- WP Rocket → メディア → 「画像の遅延読み込みを無効化」にチェックを入れてテスト
もしくは該当のCAPTCHA画像だけHTML属性にdata-no-lazy="1"をつける。
【5】変更を保存
【6】キャッシュ削除（超重要）
管理バーの
👉 Clear and Preload Cache をクリック！
💡補足：Cocoonとの組み合わせ
CocoonテーマはHTML出力がしっかりしている分、WP Rocketの最適化が過剰だと不具合を起こすこともあります。reCAPTCHAなどフォーム関連のスクリプトは 「除外リスト」に入れるのが基本です。
必要であれば、**WP Rocketのおすすめ設定（Cocoon＋AdSense環境向け）**のテンプレートもお渡しできますよ。
確認ですが、コメントフォームのCAPTCHAは 画像認証式でしょうか？それとも **Google reCAPTCHA（v2やv3）**ですか？
✅ 現在のCAPTCHAは「画像認証式（手書き風ひらがな）」タイプです
これはおそらく、Really Simple CAPTCHA や Contact Form 7 CAPTCHA などの「画像生成型CAPTCHA」系プラグインによるものです。このタイプは、以下のような仕組みで動いています：
- PHPで画像を動的に生成（例：
wp-content/uploads/wpcf7_captcha/などに画像ファイルを生成） <img src="〜captcha〜.png">で表示- 入力された文字と照合
🔍 原因になりやすいもの（優先度順）
| 原因 | 内容 |
|---|---|
| 🧊 WP Rocketの遅延読み込みやキャッシュ圧縮 | CAPTCHA画像が読み込まれる前に壊れる |
| 📁 アップロードフォルダのパーミッション | CAPTCHA画像が正しく保存・読み込みできていない |
| 🔧 PHPのGDライブラリが無効 | 画像生成に必要なのにサーバーで無効な場合がある |
| 💥 プラグイン競合（reCAPTCHA v3と画像CAPTCHAの共存） | 片方がブロックされる・干渉するケースあり |
📖まとめ
コメント欄の手書き風文字が出ない（CAPTCHA画像が正しく保存・読み込みできていない）
原因はWP Rocketの設定だった
WP Rocketは全部英語で有料のプラグインですが強烈でスピードが早くなるようだったので思いきって購入したのですがやり方のビデオも付いているのですが・・・なんと言っても英語で・・・さっぱり分かりません😨ただ、ChatGPTに自分の（ブログなどで）使っているテーマやスキン、サーバー、プラグイン等を教えると結構最適な設定を教えてくれます。今1個ずつ設定をしようかな～というところです♪今回は Delay JavaScript Execution（JavaScriptの遅延読み込み）の遅延から除外するスクリプト（除外リスト）に
captcha
wpcf7_captcha
really-simple-captchaを追加したら、コメント欄の手書き風文字が出ない（CAPTCHA画像が正しく保存・読み込みできていない）は修正できました。どうやらWP Rocketは強烈なので不具合が出たら除外リストに追加するといいみたいです。私は詳しくないので、ChatGPTに教えてもらいながら設定していくようになると思います。
スマホだけコメントできない場合、WP Rocketの「JavaScript遅延」はまず疑うべきポイントです。
同じような表示トラブルを減らしたい方は、サーバーや高速化設定の見直しも一度チェックしてみてください。
【広告】
コメント