WordPress 混合コンテンツエラー
SSL化(https化)後に画像やCSS、JavaScriptが表示されない「混合コンテンツエラー」の原因と解決方法を詳しく解説します。「保護されていない通信」「安全でないコンテンツがブロックされました」などの警告にも対応します。
⚠️ このような症状が出ていませんか?
- SSL化(https化)したら画像が表示されなくなった
- CSSが読み込まれず、デザインが崩れている
- ブラウザのアドレスバーに「保護されていない通信」と表示される
- 鍵マークが表示されず「安全ではありません」と警告が出る
- ブラウザの開発者ツールに「Mixed Content」エラーが表示される
- 一部のコンテンツだけが表示されない
混合コンテンツエラーとは
混合コンテンツエラー(Mixed Content Error)とは、HTTPSページ(暗号化された安全なページ)の中に、HTTP(暗号化されていない)で読み込まれているコンテンツが含まれている状態です。
具体例
- ページのURL:
https://example.com/(安全) - 画像のURL:
http://example.com/image.jpg(安全でない)
この場合、ブラウザがセキュリティ上の理由で画像の読み込みをブロックします。
主な原因
1. データベース内のURLがhttpのまま
最も多い原因です。SSL化前に投稿した記事の画像URLなどが、データベース内でhttp://のまま保存されています。
2. テーマやプラグインのハードコード
テーマファイルやプラグイン内で、URLがhttp://で直接記述されている場合があります。
3. 外部コンテンツの読み込み
外部サイトからhttp://で画像やスクリプトを読み込んでいる場合です(例: Google Fontsの古いコード)。
4. WordPress設定のURL
WordPress管理画面の「設定」→「一般」のサイトアドレスがhttp://のままになっている場合です。
5. .htaccessのリダイレクト設定不足
httpでアクセスされた際にhttpsへリダイレクトする設定がない、または不完全な場合です。
混合コンテンツの確認方法
ブラウザの開発者ツールで確認:
- Chrome/Edgeの場合: F12キーを押す
- 「Console」タブを開く
- 「Mixed Content」という警告が表示される
- どのファイルがhttp://で読み込まれているか確認できる
- "Mixed Content: The page at 'https://...' was loaded over HTTPS, but requested an insecure image 'http://...'"
- "このページは安全でないリソースを読み込もうとしました"
解決方法(優先度順)
WordPress設定のURLをhttpsに変更
まず基本設定を確認します。
手順:
- WordPress管理画面にログイン
- 「設定」→「一般」を開く
- 「WordPressアドレス(URL)」と「サイトアドレス(URL)」を確認
- 両方とも
https://で始まっているか確認 - http://になっている場合は、https://に変更
- 「変更を保存」をクリック
データベース内のURLを一括置換
データベース内のhttp://をhttps://に一括変換します。
方法1: プラグインを使う(推奨)
- 「Better Search Replace」プラグインをインストール・有効化
- 「ツール」→「Better Search Replace」を開く
- 「検索」欄に:
http://あなたのドメイン - 「置換」欄に:
https://あなたのドメイン - すべてのテーブルを選択
- 「ドライラン」にチェックを入れて「検索/置換を実行」
- 問題なければ、「ドライラン」のチェックを外して本番実行
方法2: phpMyAdminで一括置換(上級者向け)
- phpMyAdminを開く
- 該当データベースを選択
- 「SQL」タブを開く
- 以下のSQLを実行:
UPDATE wp_posts SET post_content =
REPLACE(post_content, 'http://あなたのドメイン', 'https://あなたのドメイン');
UPDATE wp_postmeta SET meta_value =
REPLACE(meta_value, 'http://あなたのドメイン', 'https://あなたのドメイン');
.htaccessでhttpをhttpsにリダイレクト
httpでアクセスされても自動的にhttpsにリダイレクトします。
手順:
- FTPで .htaccess ファイルをダウンロード
- 以下のコードを一番上に追加:
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
- 保存してアップロード
- http://でアクセスして、自動的にhttps://にリダイレクトされるか確認
SSL対応プラグインを使用
プラグインで自動的に混合コンテンツを修正します。
推奨プラグイン:
- Really Simple SSL - 最も人気のあるSSL対応プラグイン
- SSL Insecure Content Fixer - 混合コンテンツを自動修正
Really Simple SSLの使い方:
- プラグインをインストール・有効化
- 自動的にSSL設定が検出される
- 「はい、SSL化を有効にします」をクリック
- 自動的に設定が完了
functions.phpでコンテンツを自動置換
テーマのfunctions.phpで、出力時に自動的にhttpをhttpsに変換します。
コード:
function fix_ssl_mixed_content($content) {
$content = str_replace('http://', 'https://', $content);
return $content;
}
add_filter('the_content', 'fix_ssl_mixed_content');
外部コンテンツのURLを修正
外部サイトから読み込んでいるコンテンツがhttpの場合、httpsに変更します。
よくある例:
- Google Fonts:
http://fonts.googleapis.com→https://fonts.googleapis.com - jQuery CDN:
http://code.jquery.com→https://code.jquery.com - 外部画像: 可能であればhttps版のURLを使用
確認場所:
- テーマのheader.php、footer.php
- プラグインの設定画面
- ウィジェット内のHTML
wp-config.phpで強制SSL
WordPressにSSLを強制的に使用させます。
コード:
define('FORCE_SSL_ADMIN', true);
if (isset($_SERVER['HTTP_X_FORWARDED_PROTO']) &&
$_SERVER['HTTP_X_FORWARDED_PROTO'] === 'https') {
$_SERVER['HTTPS'] = 'on';
}
wp-config.phpの「/* 編集が必要なのはここまでです ! 」の直前に追加します。
Content Security Policyを設定(上級者向け)
HTTPSでないコンテンツを自動的にHTTPSにアップグレードします。
.htaccessに追加:
Header always set Content-Security-Policy "upgrade-insecure-requests"
この設定により、httpで指定されたコンテンツが自動的にhttpsで読み込まれます。
SSL証明書の確認
そもそもSSL証明書が正しくインストールされているか確認しましょう。
確認方法:
- SSL Server Test にアクセス
- 自分のドメインを入力して「Submit」
- 「A」または「A+」評価なら問題なし
- それ以下の場合は、SSL証明書に問題がある可能性
予防策
1. 最初からhttpsでサイトを構築
- 新規サイトは最初からSSL化して構築
- 途中でSSL化すると混合コンテンツが発生しやすい
2. 相対URLを使用
- 画像などは
/wp-content/uploads/image.jpgのような相対パスで指定 http://やhttps://を含めない
3. 外部コンテンツはhttps対応のものを選ぶ
- CDNやAPIは必ずhttps対応のものを使用
- httpしかない場合は代替サービスを検討
4. 定期的にチェック
- Chrome DevToolsで定期的に混合コンテンツがないか確認
- 新しいコンテンツを追加した際は必ずチェック
よくある質問
Q1. SSL化したのに鍵マークが表示されません
A. 混合コンテンツが残っている可能性が高いです。ブラウザのDevToolsを開いて「Mixed Content」エラーがないか確認してください。
Q2. Really Simple SSLで解決しない場合は?
A. データベース内のURLを直接置換する必要があります。「Better Search Replace」プラグインを使って、http://をhttps://に一括変換してください。
Q3. 外部サイトの画像がhttpしかありません
A. 外部画像は自分のサーバーにダウンロードして使用するか、httpsに対応している別の画像サービスを使用してください。
Q4. SSL証明書は無料で取得できますか?
A. はい。Let's Encryptという無料のSSL証明書があり、多くのレンタルサーバーで簡単に導入できます。エックスサーバー、ConoHa、ロリポップなどは無料SSL証明書を提供しています。
Q5. .htaccessの設定を間違えるとどうなりますか?
A. サイトにアクセスできなくなる可能性があります。必ず編集前にバックアップを取ってください。問題が発生したら、バックアップから復元できます。
まとめ
混合コンテンツエラー解決のチェックリスト
- ✓ WordPress設定のURLがhttps://になっているか確認
- ✓ Better Search Replaceでデータベース内のURLを一括置換
- ✓ .htaccessでhttpからhttpsへのリダイレクトを設定
- ✓ Really Simple SSLプラグインをインストール
- ✓ ブラウザのDevToolsで混合コンテンツエラーがないか確認
- ✓ 外部コンテンツのURLをhttpsに変更
- ✓ SSL証明書が正しくインストールされているか確認
混合コンテンツエラーは、SSL化後によく発生するトラブルですが、データベース内のURLを正しく置換すれば解決できます。このページで紹介した方法を順番に試してみてください。