SSL導入後のmixed contentエラーを修正する方法【原因と対処法】

by | May 7, 2026 | Uncategorized

mixed contentエラーとは？SSL導入後に起こる厄介な問題

SSL証明書をインストールし、サイトをHTTPS化したのに、ブラウザのアドレスバーに鍵マークが表示されない。コンソールには見慣れないエラーが出ている。これがmixed content（混合コンテンツ）エラーです。

HTTPSで保護されたページ内に、HTTPで読み込まれるリソース（画像、CSS、JavaScript、フォント、iframeなど）が混在している状態を指します。せっかくSSLを導入しても、このエラーを放置するとセキュリティ上の警告が表示され、ユーザーの信頼を損なう原因になります。

この記事では、mixed contentエラーの原因を正確に理解し、WordPress・静的サイトそれぞれの環境で確実にエラーを修正する手順をステップバイステップで解説します。

mixed contentエラーが発生する原因

エラーの根本的な原因は「HTTPS化したページの中に、HTTPのままのリソース参照が残っている」ことです。具体的には以下のようなケースで発生します。

  • 画像のURLがhttp://のまま – 記事内やテーマに埋め込まれた画像パスが旧URLのまま残っている
  • 外部CSSやJavaScriptがhttp://で読み込まれている – テーマやプラグインが古いプロトコルで外部リソースを参照している
  • データベース内のURLが未更新 – WordPressの場合、投稿本文やウィジェット内のURLがhttp://で格納されたまま
  • 外部サービスの埋め込みコードがHTTP – Google Maps、SNSウィジェット、広告タグなどの埋め込みコードが古い
  • CSSファイル内のbackground-imageなどがhttp:// – スタイルシート内部のURL指定が更新されていない
  • フォントファイルやアイコンフォントの読み込みがHTTP – Google FontsやFont Awesomeの古い読み込みコードを使用している

mixed contentの2つのタイプを理解する

ブラウザはmixed contentを2つのカテゴリに分類して扱います。対処の優先度を判断するためにも、この違いを把握しておきましょう。

タイプ 対象リソース ブラウザの挙動 危険度
Mixed Active Content JavaScript、CSS、iframe、XMLHttpRequestなど 完全にブロックされる 高い
Mixed Passive Content 画像、動画、音声ファイルなど 警告表示（最新ブラウザではブロックされる場合あり） 中程度

2026年現在、主要なブラウザ（Chrome、Firefox、Edge、Safari）はどちらのタイプもブロックする方向に進んでいます。Chromeは段階的にすべてのmixed contentをブロック強化しており、passive contentであっても表示されないケースが増えています。つまり、どちらのタイプも放置は許されません。

ステップ1：ブラウザの開発者ツールでエラー箇所を特定する

修正の第一歩は、どのリソースがmixed contentエラーを引き起こしているかを正確に特定することです。Google Chromeの開発者ツール（DevTools）を使った方法を紹介します。

Consoleタブで確認する方法

  1. 対象のページをChromeで開く
  2. キーボードでF12を押す（またはページ上で右クリックして「検証」を選択）
  3. Consoleタブをクリック
  4. 「Mixed Content」というキーワードを含むエラーメッセージや警告を探す

エラーメッセージの例：

Mixed Content: The page at 'https://example.com/page/' was loaded over HTTPS, but requested an insecure image 'http://example.com/images/photo.jpg'. This content should also be served over HTTPS.

このメッセージから、どのページで、どの種類のリソースが、どのURLで問題を起こしているかが分かります。

Securityタブで全体を俯瞰する方法

  1. DevToolsを開いた状態でSecurityタブをクリック
  2. ページのセキュリティ概要が表示される
  3. 「Mixed content」の警告がある場合、詳細リンクをクリックして該当リソースを確認

Networkタブでフィルタリングする方法

  1. DevToolsのNetworkタブを開く
  2. ページを再読み込み（Ctrl+Shift+R）
  3. フィルタ欄に「mixed-content」や「scheme:http」と入力して絞り込む
  4. HTTPで読み込まれているリソースが一覧表示される

この段階で特定したURLをリストアップしておきましょう。修正作業の効率が格段に上がります。

ステップ2：WordPressサイトでのmixed contentエラー修正方法

WordPressサイトでは、mixed contentエラーの原因が複数箇所に分散していることが多いです。以下の手順で順番に対処していきます。

2-1. WordPressのサイトURLをHTTPSに変更する

  1. WordPress管理画面にログイン
  2. 設定 > 一般に移動
  3. 「WordPress アドレス (URL)」と「サイトアドレス (URL)」の両方をhttps://に変更
  4. 「変更を保存」をクリック

この設定がhttp://のままだと、WordPress全体でHTTPベースのURLが生成され続けます。まずここを確認してください。

2-2. データベース内のURLを一括置換する

過去に投稿した記事やページの本文中には、http://で始まる画像URLやリンクが大量に含まれている可能性があります。これらを手作業で1つずつ修正するのは現実的ではありません。

方法A：Better Search Replaceプラグインを使う

  1. WordPress管理画面からプラグイン > 新規追加で「Better Search Replace」を検索しインストール
  2. プラグインを有効化
  3. ツール > Better Search Replaceに移動
  4. 「検索」欄に http://あなたのドメイン.com と入力
  5. 「置換」欄に https://あなたのドメイン.com と入力
  6. 対象テーブルをすべて選択
  7. まず「テスト実行」にチェックを入れて実行し、置換対象件数を確認
  8. 問題がなければチェックを外して本番実行

注意：データベースの一括置換は取り返しのつかない変更です。必ず事前にデータベースのバックアップを取得してください。

方法B：WP-CLIを使う（上級者向け）

サーバーにSSHアクセスできる環境であれば、WP-CLIの search-replace コマンドが最も高速です。

wp search-replace 'http://example.com' 'https://example.com' --all-tables --dry-run

--dry-run オプションで事前に置換件数を確認し、問題がなければオプションを外して実行します。

2-3. テーマファイル内のハードコードされたURLを修正する

テーマのテンプレートファイル（header.php、footer.php、functions.phpなど）に直接書かれたhttp://のURLも修正が必要です。

  1. WordPress管理画面の外観 > テーマファイルエディター、またはFTP/ファイルマネージャーでテーマファイルにアクセス
  2. 各ファイル内で http:// を検索
  3. 自サイトドメインへの参照があれば https:// に変更
  4. 外部リソースの読み込み（CDNやフォントなど）も同様にHTTPSに変更、またはプロトコル相対URL（ //example.com/resource.js ）に変更

2-4. プラグインの設定を確認する

一部のプラグインは独自にURLを保存しています。以下のプラグイン設定を確認しましょう。

  • スライダー系プラグイン（画像URLがHTTPになっていないか）
  • ページビルダー系プラグイン（Elementor、WPBakeryなど）
  • 広告管理プラグイン
  • SNS共有プラグイン
  • カスタムCSS/JS挿入プラグイン

2-5. Really Simple Securityプラグインで補完する

上記の手順を行った上で、まだ残るmixed contentエラーに対してはReally Simple Security（旧 Really Simple SSL）プラグインが役立ちます。

  1. 「Really Simple Security」をインストール・有効化
  2. プラグインの指示に従ってSSLを有効化
  3. プラグインが自動的にHTTPリクエストをHTTPSにリダイレクトする処理を追加

ただし、このプラグインはあくまで「補完」として使うことを推奨します。根本的な原因（データベース内やテーマ内のHTTP URL）は上記の手順で修正しておくべきです。プラグインに依存しすぎると、プラグインを無効化した途端にエラーが再発します。

ステップ3：静的サイト（HTML/CSS）でのmixed contentエラー修正方法

WordPressを使っていない静的なHTML/CSSサイトの場合は、ファイルを直接編集して修正します。

3-1. HTMLファイル内の参照パスを修正する

以下のタグ内のURLを重点的にチェックします。

対象 タグ/属性の例
画像 <img src="http://...">
CSS <link rel="stylesheet" href="http://...">
JavaScript <script src="http://...">
iframe <iframe src="http://...">
動画/音声 <video src="http://...">、<audio src="http://...">
フォント <link href="http://fonts.googleapis.com/...">

修正方法は3つのパターンがあります。

  1. https://に書き換える（対象のリソースがHTTPS対応している場合）
  2. プロトコル相対URLに変更する（ //example.com/path/file.js のように先頭のhttp:を省略）
  3. リソースを自サーバーにホストする（外部リソースがHTTPS未対応の場合）

3-2. CSSファイル内のURL参照を修正する

CSSファイル内にもURLが含まれていることがあります。

/* 修正前 */
.hero-section {
  background-image: url('http://example.com/images/hero-bg.jpg');
}

/* 修正後 */
.hero-section {
  background-image: url('https://example.com/images/hero-bg.jpg');
}

テキストエディタの一括検索・置換機能を使えば、すべてのCSSファイル内の http:// を効率的に https:// に変更できます。

3-3. 一括置換ツールを活用する

ファイル数が多い場合は、以下のようなツールで一括置換すると効率的です。

  • Visual Studio Code：Ctrl+Shift+H でプロジェクト全体の検索・置換が可能
  • grep/sed コマンド（Linux/Mac）：ターミナルから一括置換
# Linuxでの一括置換例
find . -name "*.html" -exec sed -i 's|http://example.com|https://example.com|g' {} +
find . -name "*.css" -exec sed -i 's|http://example.com|https://example.com|g' {} +

ステップ4：.htaccessでHTTPからHTTPSへのリダイレクトを設定する

mixed contentエラーの修正と合わせて、サイト全体のHTTP→HTTPSリダイレクトを設定しておくことも重要です。Apacheサーバーの場合、.htaccessに以下を追記します。

RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

Nginxの場合は、サーバー設定ファイルに以下を追加します。

server {
    listen 80;
    server_name example.com www.example.com;
    return 301 https://$host$request_uri;
}

この設定により、HTTPでアクセスしてきたユーザーや検索エンジンのクローラーが自動的にHTTPSへ転送されます。

ステップ5：修正後の確認方法

すべての修正が完了したら、エラーが解消されたかどうかを確認しましょう。

ブラウザの開発者ツールで再確認

  1. ブラウザのキャッシュをクリアする（Ctrl+Shift+Delete）
  2. 対象ページにアクセス
  3. DevToolsのConsoleタブで「Mixed Content」の警告が消えているか確認
  4. Securityタブで「This page is secure」と表示されているか確認
  5. アドレスバーに鍵マークが正しく表示されているか確認

オンラインツールで一括チェック

ページ数が多いサイトの場合、以下のオンラインツールを使うとサイト全体を効率的にスキャンできます。

ツール名 特徴 URL
Why No Padlock? ページ単位でmixed contentを検出 whynopadlock.com
JitBit SSL Checker サイトをクロールしてHTTPリソースを発見 jitbit.com/sslcheck/
SSL Labs Server Test SSL設定全般の診断 ssllabs.com/ssltest/

mixed contentエラー修正時のよくある落とし穴

修正作業中に見落としがちなポイントをまとめます。

外部リソースがHTTPS未対応のケース

参照している外部サイトのリソースがそもそもHTTPSに対応していない場合があります。その場合の対処法は以下の通りです。

  • リソースファイルをダウンロードして自サーバーにアップロードし、httpsで参照する
  • HTTPS対応の代替サービスに切り替える
  • そのリソースの使用自体をやめる

CDN経由のリソース

CDN（コンテンツデリバリネットワーク）を利用している場合、CDN側の設定もHTTPSに切り替える必要があります。多くのCDNサービス（Cloudflare、AWS CloudFrontなど）はHTTPSに対応していますので、CDNの管理画面からSSL設定を確認してください。

キャッシュの影響

修正後もエラーが消えない場合、ブラウザキャッシュやサーバーキャッシュ（WordPressのキャッシュプラグイン含む）が原因であることが多いです。以下をすべてクリアしてから確認しましょう。

  • ブラウザのキャッシュ
  • WordPressキャッシュプラグインのキャッシュ
  • サーバー側のキャッシュ（Varnishなど）
  • CDNのキャッシュ

mixed contentエラー修正のチェックリスト

最後に、修正作業の全体像をチェックリストとしてまとめます。

  1. データベースのバックアップを取得
  2. ブラウザの開発者ツールでエラー箇所を特定・リストアップ
  3. WordPressのサイトURL設定をHTTPSに変更
  4. データベース内のURL一括置換を実行
  5. テーマファイル内のHTTP URLを修正
  6. プラグイン設定内のURLを確認・修正
  7. CSSファイル内のURL参照を修正
  8. 外部リソースの読み込みURLをHTTPSに変更
  9. .htaccessまたはサーバー設定でHTTP→HTTPSリダイレクトを設定
  10. すべてのキャッシュをクリア
  11. 開発者ツールとオンラインツールで最終確認

まとめ

mixed contentエラーは、SSL証明書の導入だけでは解決しません。サイト内に残っているHTTPのリソース参照をすべてHTTPSに書き換えることで、はじめてブラウザに安全なサイトとして認識されます。

対処の流れは「エラー箇所の特定 → URLの修正・置換 → リダイレクト設定 → 確認」というシンプルなものです。WordPressであればプラグインやWP-CLIを活用し、静的サイトであればテキストエディタの一括置換を使えば、効率的に作業を進められます。

もしご自身での対応が難しい場合や、大規模サイトで修正箇所が多すぎる場合は、SSL導入やサイトのHTTPS化に豊富な実績を持つozasahayashi.comにお気軽にご相談ください。

よくある質問（FAQ）

Q. mixed contentエラーはSEOに影響しますか？

はい、影響します。Googleはサイトの安全性をランキング要因の一つとしています。mixed contentエラーがあると、ブラウザが「安全ではない」と判定し、ユーザー体験にも悪影響を与えます。結果としてSEO評価にマイナスとなる可能性があります。

Q. mixed contentエラーを放置するとどうなりますか？

2026年現在、主要ブラウザはmixed contentを積極的にブロックします。つまり、画像が表示されない、CSSが適用されない、JavaScriptが動作しないなど、サイトの見た目や機能が壊れる可能性があります。

Q. Really Simple Securityプラグインだけで解決できますか？

一時的な対処としては有効ですが、根本的な解決にはなりません。プラグインを無効化するとエラーが再発します。データベース内やテーマファイル内のURLを実際に書き換えることを推奨します。

Q. プロトコル相対URL（//example.com/…）を使うべきですか？

かつてはよく使われた手法ですが、現在はHTTPSへの完全移行が標準です。新規にURLを書く場合は明示的に https:// を使うことを推奨します。

Q. 画像URLを変更したら既存のSNSシェア数に影響しますか？

URLが変わること自体がシェアカウントに影響する場合があります。ただし、HTTP→HTTPSの変更であれば301リダイレクトを設定していれば、多くのSNSプラットフォームで引き継がれます。mixed contentエラーの放置によるリスクの方がはるかに大きいため、修正を優先すべきです。

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

について

オザサハヤシは、日本の国境を越えて、世界中の素晴らしい中堅アーティストを紹介するエキサイティングな現代アートギャラリーです。私たちの使命は、これらの才能あるアーティストに作品を展示する場を提供し、より多くの観客にアプローチすることです。

カテゴリー