SSL化したのに「保護されていません」と表示される原因と解決方法

「せっかくSSL（https）を設定したのに、ブラウザのURL欄に鍵マークが出ない……」「警告が出てしまう」サイト運営者にとって、これは非常によくある『最後の一歩』のトラブルです。この状態を「混在コンテンツ（Mixed Content）」と呼びます。

1. 混在コンテンツ（Mixed Content）とは

ページ自体は「https://」で表示されていても、そのページ内で読み込まれている画像やCSS、JavaScriptなどのデータの一部が「http://」のままになっている状態のことです。

ブラウザはユーザーの安全を最優先するため、ページ内にたった1つでも「http」のデータが残っていると、SSL化が不完全であると判断し「保護されていません」という警告を表示します。

種類	内容	主な影響
パッシブ	画像・動画など	鍵マークが消える、または警告アイコンが出る。
アクティブ	スクリプト(JS)・CSSなど	ブラウザが読み込みを拒否し、デザイン崩れや機能不全が起きる。

やみくもにファイルを探す必要はありません。Google Chromeの「デベロッパーツール」を使えば、どのファイルが原因か一瞬で分かります。

そこに表示されているURLこそが、修正すべき「犯人」です。

特定したURLをすべて「https」へと書き換えます。修正すべきポイントは大きく分けて3つです。

過去の記事で貼り付けた画像のURLが「http」のままになっているケースが最も多いです。

<!-- 修正前 -->
<img src="http://example.com/photo.jpg">

<!-- 修正後 -->
<img src="https://example.com/photo.jpg">

外部のフォントやスクリプトを読み込む際に http を使っていると、ブラウザによって動作がブロックされるため、必ず https に統一します。

<link href="https://fonts.googleapis.com/..." rel="stylesheet">
<script src="https://example.com/js/main.js"></script>

修正箇所が大量にある場合は、一括置換が効率的です。

WordPressの場合：「Better Search Replace」などのプラグインを使い、データベース内の http://自ドメイン を https://自ドメイン に置換します。
HTMLファイルの場合：VS Codeなどのテキストエディタで、プロジェクト全体を対象に検索・置換を行います。

作業前の注意：一括置換を行う際は、念のため必ずバックアップを取ってから進めるようにしてください。また、外部サイトへのリンク（a href="http://..."）まで強引にhttpsに変えると、相手サイトが対応していない場合にリンク切れを起こすので注意が必要です。

「すべて書き換えたはずなのに、まだ警告が出る」という場合は、以下の盲点を確認してください。

混在コンテンツの解消は、SSL化における最後の仕上げです。デベロッパーツールを活用して原因を特定し、一つずつ「https」へ更新していけば、必ず安全な鍵マークが表示されます。