「https化したはずなのに鍵マークが出ない」「一部の画像が表示されない」——常時SSL化の作業後にこのような状態になることは珍しくありません。この問題の原因として多いのが「混在コンテンツ（Mixed Content）」です。この記事では、混在コンテンツとは何か、なぜ起きるのか、そして具体的な解消方法を解説します。

混在コンテンツとは

混在コンテンツ（Mixed Content） とは、httpsで表示されているページの中に、httpで参照されているリソース（画像・CSS・JavaScriptなど）が混在している状態のことです。

例えば、https://example.com/ というページの中に http://example.com/images/photo.jpg という画像が埋め込まれている場合、これが混在コンテンツになります。

警告が出る仕組みと影響

ブラウザはhttpsページをすべて安全な通信で提供することを前提としています。そのページ内にhttpのリソースが混在すると、通信の一部が暗号化されていないとみなされ、警告が発生します。

影響として代表的なものは以下の通りです。

  • 鍵マークが表示されない（アドレスバーに警告アイコンが出ることも）
  • 一部の画像やスタイルが表示されない（ブラウザが自動でブロックする場合がある）
  • ページ全体の見た目が崩れる（CSSやJSがブロックされた場合）
  • 訪問者の信頼感を損なう

SSL化をしているのに鍵マークが出ない場合、ほぼ確実に混在コンテンツが原因です。

原因：なぜ混在コンテンツが発生するか

混在コンテンツが発生する主な原因は、SSL化前にhttpで作成されたコンテンツがそのまま残っているためです。具体的には以下のケースが多いです。

  • 投稿・固定ページ内の画像やリンク: WordPressのビジュアルエディタで挿入した画像URLがhttpのまま
  • テーマ・プラグインのCSS/JS: テーマや古いプラグインがhttp参照を含んでいる
  • 外部サービスの埋め込みコード: YouTube・Googleマップ・SNSウィジェットなどで古いhttp形式の埋め込みコードを使っている
  • テーマのカスタマイザー設定: ロゴ画像や背景画像がhttpで保存されている

直し方：混在コンテンツを解消する手順

ステップ1：混在コンテンツを特定する

まず、どのページにどのhttpリソースがあるかを特定します。

ブラウザの開発者ツールを使う方法

  1. 問題のページを開き、キーボードの F12 キーを押して開発者ツールを開きます
  2. 「Console（コンソール）」タブを選択します
  3. 「Mixed Content:」または「insecure content」という赤や黄色のメッセージが表示されていれば、どのファイルがhttpで読み込まれているか確認できます

ブラウザ拡張機能を使う方法 「HTTPS Everywhere」「Why No Padlock?」などのツールを使うと、混在コンテンツを簡単に見つけられます。また、https://www.whynopadlock.com/ というWebサービスにURLを入力するだけで診断してくれます。

ステップ2：WordPressのデータベースを一括置換する

WordPressの場合、投稿内容はデータベースに保存されているため、一つひとつ手で直すのは非現実的です。「Better Search Replace」 プラグインを使った一括置換が有効です。

  1. プラグイン「Better Search Replace」をインストール・有効化します
  2. 「検索する文字列」に http://あなたのドメイン を入力します
  3. 「置換する文字列」に https://あなたのドメイン を入力します
  4. 「ドライラン（試行のみ）」にチェックを入れて影響範囲を確認します
  5. 問題なければドライランのチェックを外して本番実行します

注意: 作業前に必ずバックアップを取ってください。

参考: WordPressの常時SSL化（http→https）の手順

ステップ3：プラグインで自動修正する

「SSL Insecure Content Fixer」 というプラグインを使うと、WordPressが出力するhtmlの中のhttpをhttpsに自動で書き換えてくれます。テーマやプラグインが出力する箇所にも効果的です。

  1. プラグインをインストール・有効化します
  2. 設定画面（設定 > SSL Insecure Content）で「Simple」または「Content」を選択します
  3. 変更を保存して、問題が解消されているか確認します

ステップ4：外部埋め込みを確認する

YouTube動画やGoogleマップなどの埋め込みコードは、古い形式だとhttpになっている場合があります。最新の埋め込みコードを取り直して、http参照を含んでいないか確認しましょう。多くの場合、最新のコードはhttpsになっています。

ステップ5：テーマ・プラグインの設定を確認する

カスタマイザーで設定したロゴ・背景画像・ファビコンなどが、httpで保存されているケースがあります。外観 > カスタマイズ を開き、各項目を確認・再設定してください。

常時SSL化との関係

混在コンテンツは、常時SSL化（httpからhttpsへの移行）の際にセットで解消しておく必要があります。SSL化と一括置換を同時に行うことで、多くの混在コンテンツを一度に解消できます。

関連記事:

まとめ

混在コンテンツは、httpsに対応しているのに鍵マークが出ないときの代表的な原因です。ブラウザの開発者ツールやWhyNoPadlockで原因箇所を特定し、「データベースの一括置換」と「SSL Insecure Content Fixer」の組み合わせで多くのケースは解消できます。

作業が複雑に感じたり、解消後も鍵マークが出ない場合は、Web Gearにご相談ください。原因を調査して適切な対処をご提案します。

お問い合わせはこちら