混在コンテンツ（mixed content）を見つけて直す｜鍵マークが出ない時の点検
「サイト全体をSSL化（https化）したはずなのに、この1ページだけ鍵マークが出ないんです…」 そう気づいた瞬間、ちょっと落ち着かない気持ちになりますよね。トップは大丈夫なのに、特定のページだけ「保護されていない通信」と出る。どこがおかしいのか見当がつかず、触るのが少し怖い——そんな状態かもしれません。
でも、身構えなくて大丈夫です。この症状の多くは「混在コンテンツ（mixed content）」と呼ばれるもので、ページ全体はhttpsなのに、中で読み込んでいる画像やファイルの一部だけが古いhttp://のまま残っている、という状態です。原因の場所さえ分かれば、直し方は決まっています。ブラウザの機能を使って、1ページずつ落ち着いて見つけていきましょう。
結論：やることは3つだけ。①鍵マークが出ないページで、ブラウザの検証ツール（デベロッパーツール）を開き「mixed content」の警告を出す → ②警告に出ているhttp://のURL（画像・CSS・JS・iframeなど）を特定する → ③その読み込み先をhttps://に直す（多くはhttp:をhttps:に変えるか、//始まりの相対指定にするだけ）。これで鍵マークが戻ります。
何が起きているのか
「混在コンテンツ」とは、httpsのページの中に、httpで読み込まれている部品が混ざっている状態のことです。ページの住所（URL）はhttps://でも、その中で呼び出している画像・スタイル（CSS）・スクリプト（JS）・埋め込み動画などがhttp://のままだと、ブラウザは「安全な通信と安全でない通信が混ざっている」と判断します。
なぜ問題かというと、httpsで守っているはずのページに、暗号化されていない通信の入り口が残ってしまうからです。ブラウザは利用者を守るために、こうした部品をブロックしたり、鍵マークを外して警告を出したりします。結果として、鍵マークが消える・画像が表示されない・レイアウトが崩れる、といった見た目のトラブルにつながることもあります。
混在コンテンツが残りやすいのは、たとえばこんな場面です。責めるような話ではなく、移行の過程でどうしても起きやすいものです。
- 後からSSL化したサイトで、記事本文に昔貼った画像リンクが
http://のまま残っている - ロゴやバナーの画像パスを、URLごと（
http://自社ドメイン/...）で直書きしている - 外部から読み込んでいる部品（地図・SNSの埋め込み・フォント・アクセス解析タグなど）が
http://指定になっている - CSSファイルの中で、背景画像などを
http://で指定している
つまり、「ページ自体は正しくhttpsになっているのに、中の部品の住所だけ更新し忘れている」というのが正体です。犯人の場所を1つずつ特定できれば、あとは住所を書き換えるだけです。
手順を小さく分ける
- 問題のページで警告を「見える化」する
- 鍵マークが出ないページを開き、ブラウザの検証ツール（デベロッパーツール）を開きます。多くのブラウザで、ページ上で右クリック →「検証」、またはキーボードの
F12で開けます。 - 上部のタブから「コンソール（Console）」を選びます。混在コンテンツがあると、
Mixed Content:で始まる黄色や赤の警告メッセージが並びます。ここに「どの部品が原因か」が書かれています。
http://の読み込み先を特定する
- 警告メッセージの中に、
http://…で始まるURLが表示されます。これがそのまま原因の場所です。末尾を見れば、画像（.jpg.png.webp）・スタイル（.css）・スクリプト（.js）・埋め込み（地図やSNS）などの見分けがつきます。 - 「ネットワーク（Network）」タブで、通信を
httpで絞り込むと一覧で見つけやすくなります（できる範囲で構いません）。まずはコンソールの警告を1つずつメモするだけで十分です。
- 読み込み先を
https://にそろえる
- 本文・記事内の画像なら、その記事を編集画面で開き、画像URLの
http://をhttps://に直します。自社ドメインの画像は、たいていhttps://でもそのまま表示されます。 - テンプレートやCSSの直書きなら、該当箇所（ヘッダー・フッター・テーマファイルなど）の
http://を探してhttps://に。どこを触るか不安なら、変更前に必ずバックアップを取ってからにしましょう。 - 外部の埋め込み（地図・SNS・フォントなど）は、提供元が用意している新しい
https://の埋め込みコードに貼り替えるのが安全です。古いコードをそのままhttpsに書き換えても動く場合もありますが、公式の最新コードに更新するのが確実です。 - 直したら、そのページを再読み込み（キャッシュを消して読み込み直す）して、コンソールの警告が消え、鍵マークが戻ったかを確認します。
まずは「1. コンソールで警告を見える化する」だけでも、犯人の場所がはっきりして、宙ぶらりんの不安がぐっと減ります。一度に全ページを直そうとせず、鍵マークが出ていないページから1枚ずつで大丈夫です。
具体例
たとえば、数年前に会社サイトをSSL化した後、「お知らせ」の1記事だけ鍵マークが出ない、というケース。
- 該当ページを開いて
F12でコンソールを見ると、Mixed Content:の警告にhttp://自社ドメイン/wp-content/uploads/2021/campaign.jpgと表示されていた。 - 原因は、その記事に昔貼ったキャンペーン画像のURLが
http://のままだったこと。記事を編集画面で開き、画像のURLのhttpをhttpsに1文字ぶん直して更新。 - ページを再読み込みしたら、警告が消えて鍵マークが復活。作業自体は5分ほど。
外部の地図を埋め込んでいたページで警告が出た別のケースでは、地図サービスの管理画面から現在の埋め込みコードをコピーし直して貼り替えるだけで解消しました。「自分で全部書き換える」より、提供元の最新コードに更新するほうが早くて安全なことも多いです。
あなたへの影響
- 原因が「中の部品の住所の書き忘れ」だと分かると、「サイト全体がおかしいのでは」という漠然とした不安がなくなります。
- 鍵マークが戻ると、訪問者が「保護されていない通信」の警告で不安になって離れる、という取りこぼしを防げます。
- 直し方の型（コンソールで見つけて
httpsにそろえる）を一度覚えれば、次に同じ症状が出ても、落ち着いて自分で対処できます。
明日やること
- 鍵マークが出ない・「保護されていない通信」と出るページを1つ開き、
F12でコンソールを確認する。 Mixed Content:の警告に出ているhttp://のURLを、原因の場所としてメモする。- その読み込み先を
https://に直す（本文画像なら記事編集、外部埋め込みなら最新コードに貼り替え）。触る前にバックアップを取る。
チェックリスト
1ページあたりの目安所要時間：5〜15分。上から順に進めれば大丈夫です。
- 見つける
- 鍵マークが出ない／警告が出るページを開き、検証ツールのコンソールを確認した
-
Mixed Content:の警告に出ているhttp://のURLを控えた - その部品の種類（画像・CSS・JS・埋め込みなど）を確認した
- 直す
- 変更前にバックアップを取った（テンプレートやCSSを触る場合は特に）
- 本文・記事内の画像URLの
http://をhttps://に直した - テンプレート／CSSに直書きされた
http://を確認し、必要ならhttps://にそろえた - 外部の埋め込み（地図・SNS・フォント等）は、提供元の最新の
httpsコードに貼り替えた - 確かめる
- 直したページを再読み込みし、コンソールの警告が消えたことを確認した
- 鍵マークが戻り、画像やレイアウトが崩れていないことを確認した
- 同じ症状が他ページにもないか、代表的なページをいくつか見て回った
混在コンテンツは、名前こそ難しそうですが、正体は「中の部品の住所の書き忘れ」です。コンソールで場所を見つけてhttpsにそろえる——この型を一度おぼえれば、次からは落ち着いて向き合えます。全ページを一気に完璧にしようと気負わなくて大丈夫。今日、気になっていた1ページの鍵マークをひとつ戻せたら、それでもう十分に前へ進んでいます。
自社サイトの構成に合わせて、原因になりやすい場所（記事本文・テンプレート・外部埋め込み）を書き足しながらメモを育ててください。「うちの場合、どこを直せば？」と迷ったら、お問い合わせからいつでも声をかけてくださいね。