Mixed Content ってそもそも何？
SSL を有効化してサイトを https:// で表示できるようにしても、ブラウザのアドレスバーに「保護されていません」「一部のみ安全」みたいな警告が出ることがあります。
このときによく原因になっているのが Mixed Content（混在コンテンツ） です。
意味としてはとてもシンプルで、
ページ自体は https:// で配信されているのに
その中で読み込んでいる画像・CSS・JavaScript の一部が http:// のまま
という「https と http が混ざっている状態」のことを指します。
見た目は普通にページが表示されていても、ブラウザからすると、
「安全な https ページの中に、安全じゃない http のコンテンツが混ざってるよ」
という状態なので、警告の対象になります。
なぜ Mixed Content がセキュリティ的に問題なのか
「一部だけ平文」が思った以上に危ない
https の目的は、ブラウザとサーバーの通信を暗号化して「盗み見・改ざん」を防ぐことでした。
ところが、ページの中で http のスクリプトや画像を読み込んでしまうと、その部分だけは暗号化されていません。
特に危険なのは JavaScript です。
もし http:// で読み込んでいる JS ファイルが途中で改ざんされたら、
ログインフォームの入力内容を盗む
別のサイトに勝手にリダイレクトする
ページの中身を書き換える
といったことが、「https ページの中で」起きてしまいます。
つまり、
「ページ本体は https だから安全」
と思っていても、
「中に混ざっている http コンテンツ経由で攻撃される」
という抜け道が生まれてしまうわけです。
ブラウザがわざわざ警告する理由
最近のブラウザは、セキュリティにかなり敏感です。
Mixed Content があると、
アドレスバーの鍵マークが外れる
「このページは完全には保護されていません」と表示される
場合によっては、危険なコンテンツを自動でブロックする
といった挙動をします。
これは単なる「うるさい警告」ではなく、
「ユーザーの入力や表示内容が、完全には守られていない可能性がある」
という、かなり本質的な問題を示しています。
どんなときに Mixed Content が発生しやすいか
典型パターン1：画像やスクリプトの URL が http のまま
WordPress を http:// で運用していたサイトを、途中から https:// に切り替えたときに起こりがちです。
昔の記事の中で、画像をこう貼っていたとします。
<img src="http://example.com/wp-content/uploads/2024/01/sample.jpg">
サイト全体は https://example.com になったのに、
記事本文の中の画像 URL が http:// のままだと、これだけで Mixed Content です。
同じことが、テーマ内の CSS や JS の読み込みでも起こります。
<script src="http://example.com/wp-content/themes/mytheme/js/main.js"></script>
この 1 行があるだけで、ページは「混在コンテンツ扱い」になります。
典型パターン2：外部サービスのコードが http のまま
古い埋め込みコードやウィジェットも要注意です。
古いアナリティクスコード
外部バナー広告
外部の JS/CSS CDN
などが、http:// の URL のまま貼られていると、そこから Mixed Content が発生します。
例えば、
<script src="http://cdn.example.com/library.js"></script>
のようなコードがテーマやウィジェットに残っていると、
ページ全体の「完全な https 化」を邪魔します。
Mixed Content をどうやって見つけるか
ブラウザの開発者ツールで確認する
一番手軽なのは、ブラウザの開発者ツールを使う方法です。
https://でページを開く- 右クリック → 検証（または F12）で開発者ツールを開く
- Console（コンソール）タブを見る
Mixed Content がある場合、コンソールにこんな警告が出ます。
「Mixed Content: The page at ‘https://example.com/…’ was loaded over HTTPS, but requested an insecure image ‘http://…’. This content should also be served over HTTPS.」
ここに、どの URL が問題なのかが具体的に表示されます。
まずはこれを見ながら、
どのファイルが http のままなのか
それが記事本文なのか、テーマなのか、プラグインなのか
を切り分けていくイメージです。
ページのソースを直接見る
もう少し原始的な方法ですが、
ページのソースを表示http:// で検索
というやり方も有効です。
https:// にすべきなのに http:// のままになっている URL を、目視で見つけられます。
特に、
自分のドメイン（例：http://example.com/...）
外部サービスの古いコード
が見つかったら、そこが修正候補です。
Mixed Content の「修正」の考え方
自分のサイト内の http を https に直す
まず最優先は、「自分のドメインの http URL」をすべて https に直すことです。
記事本文の中の画像・リンク
テーマファイル内の CSS/JS の URL
ウィジェットやメニューに手書きしたリンク
これらが http://あなたのドメイン になっていたら、
基本的には https://あなたのドメイン に書き換えて問題ありません。
WordPress では、
データベース内の URL を一括置換する
プラグインを使って http → https をまとめて変換する
といった方法もありますが、
考え方としては「自分のサイトのリソースは全部 https で呼ぶ」が基本です。
外部サービスの http リソースは「https 版があるか」を確認する
外部の JS や CSS、画像などを http:// で読み込んでいる場合は、
そのサービスが https:// での配信に対応しているか
を確認します。
多くの CDN や外部サービスは、今どき https に対応しています。
例えば、
http://cdn.example.com/... → https://cdn.example.com/...
に変えるだけで Mixed Content が解消することも多いです。
もし https に対応していない外部リソースなら、
そもそもそのサービスの利用をやめる
自分のサーバーに安全な形でホストし直す
といった判断も必要になります。
例題：よくある Mixed Content とその修正イメージ
例1：記事内の画像が http のまま
記事本文にこんな HTML が残っているケースです。
<img src="http://example.com/wp-content/uploads/2024/01/photo.jpg">
修正方針はシンプルで、
http://example.com を https://example.com に書き換える
だけです。
エディタ上で画像を一度削除して、
メディアライブラリから再度挿入し直すと、
自動的に https:// で挿入されることも多いです。
例2：テーマの header.php にあるスクリプトが http
テーマの header.php に、こんなコードがあるとします。
<script src="http://example.com/wp-content/themes/mytheme/js/main.js"></script>
これも、
http://example.com → https://example.com
に書き換えるのが基本です。
もし //example.com/... のように「スキームレス（先頭の http/https を省略）」で書けるなら、
<script src="//example.com/wp-content/themes/mytheme/js/main.js"></script>
とすることで、
ページが https なら https で、http なら http で読み込まれるようにもできます。
ただし、今は「常に https 前提」で設計することが多いので、
素直に https:// に統一してしまうほうが分かりやすいです。
Mixed Content 修正を「セキュリティ」として捉える
これは「https をちゃんと“最後まで”やり切る作業」
SSL を有効化して https:// でサイトが開くようになっただけでは、
まだセキュリティ的には中途半端です。
Mixed Content を放置している状態は、
玄関の鍵は変えたけど
窓は開けっぱなし
みたいなものです。
Mixed Content の修正は、
ページ内のすべてのリソースを https に統一する
＝暗号化されていない経路を潰していく
という、「https 化を最後までやり切るための仕上げ」です。
「見た目の警告を消す」以上の意味がある
ブラウザの警告を消すことは、ユーザー体験としても大事です。
でも、それ以上に重要なのは、
http 経由のスクリプトや画像からの攻撃リスクを減らす
ユーザーの入力や表示内容が“途中でいじられにくい”状態にする
という、本質的なセキュリティ向上です。
プログラミングの感覚で言えば、
安全なプロトコルを使う
＋
安全でない呼び出し方をしている箇所を一つずつ潰す
という、設計とリファクタリングの両方に近い作業です。
まとめ：Mixed Content の修正は「https を本物の“安全な土台”にするための一手」
「Mixed Content の修正」というテーマの本質は、
https ページの中に紛れ込んだ http リソースを見つけ出し
画像・CSS・JS・外部サービスの URL を https に統一し
ページ全体を“本当に”暗号化された状態にする
ということです。
押さえておきたいポイントは、
Mixed Content は「一部だけ平文」の危険な状態
ブラウザの警告は、単なる見た目ではなく本質的なリスクのサイン
自分のドメインの http を https に直すことから始め、外部リソースも順番に見直す
という三つです。
一度、あなたのサイトを https:// で開いて、
開発者ツールのコンソールを覗いてみてください。
そこに出てくる Mixed Content の警告は、
「まだ直していない窓」のリストそのものです。
それを一つずつ潰していくことが、https を“本物のセキュリティ”に変えていくプロセスになります。
