混在コンテンツ（Mixed Content）の原因と解消方法
ページ更新日：2026/04/23
HTTPSのサイトにSSL証明書をインストールしても、ページ内に「http://」のリソースが含まれていると鍵マークが表示されないことがあります。
この状態を「混在コンテンツ（Mixed Content）」と呼びます。SSL証明書自体に問題があるのではなく、ページのHTMLやCSSの修正で解消できます。
混在コンテンツとは
混在コンテンツとは、HTTPS（暗号化）のページ内に、HTTP（非暗号化）のリソースが含まれている状態です。
例えば、https://example.com/ のページが http://example.com/style.css や http://cdn.example.com/image.png を読み込んでいる場合が該当します。
ブラウザの警告・表示の違い
| 状態 | ブラウザの表示 |
| HTTPSのみ（混在なし） | 🔒 鍵マークが正常に表示される |
| 受動的混在コンテンツあり （画像・動画など） |
警告アイコンが表示される場合がある（Chromeは大半ブロック） |
| 能動的混在コンテンツあり （JS・CSSなど） |
ブロックされ、機能しない。「保護されていない通信」の警告表示 |
※ Chrome 80以降は受動的混在コンテンツ（画像等）も自動的にHTTPSへアップグレードするか、ブロックします。
混在コンテンツを見つける方法
1. ブラウザの開発者ツールで確認
Chromeの場合：ページを開いて F12（開発者ツール）→「Console」タブを開くと、Mixed Contentの警告が赤や黄色で表示されます。
「Network」タブでリソースを「http://」で絞り込む方法も有効です。
2. オンラインツールで確認
弊社SSL証明書インストールチェッカー や Qualys SSL Labs でも混在コンテンツの問題を確認できます。
混在コンテンツの解消方法
1. HTMLの src・href を https:// に書き換える
ページのHTMLを確認し、http:// で記述されている画像・CSS・JavaScriptのURLを https:// に変更します。
<!-- 修正前 --> <img src="http://example.com/image.png"> <link rel="stylesheet" href="http://example.com/style.css"> <!-- 修正後 --> <img src="https://example.com/image.png"> <link rel="stylesheet" href="https://example.com/style.css">
2. プロトコル相対URLを使用する
//example.com/image.png のように「スキームなし（//）」で記述すると、ページのプロトコル（HTTPSなら自動でhttps:）に合わせて読み込まれます。
3. CMSの設定を変更する
WordPressの場合、「設定 → 一般」のサイトURLが http:// になっていると古いURLが混在します。https:// に変更してください。
データベース内に残っているhttp://リンクは、「Search Replace DB」などのプラグインで一括置換する方法が有効です。
4. Content-Security-Policy ヘッダーの活用
サーバー設定で Content-Security-Policy: upgrade-insecure-requests ヘッダーを送信すると、ブラウザがhttp://リソースを自動的にhttps://へアップグレードします。
# Apacheの場合（.htaccessまたはhttpd.conf） Header always set Content-Security-Policy "upgrade-insecure-requests"
※ サードパーティのリソース（外部CDN・広告など）がhttpsに対応していない場合は根本的な解決にはなりません。