常時SSL化（https化）後に画像が表示されなくなった時の直し方

「サーバーの管理画面でSSLを有効にして、サイトのアドレスをhttpsに切り替えたら、トップページの画像が出なくなった」「記事の写真が一部だけ表示されず、アドレスバーの鍵マークにも注意マークが付いている」。常時SSL化はセキュリティのために欠かせない作業ですが、切り替えた直後にこうしたトラブルが起きることは珍しくありません。

結論から言うと、SSL化のあとに画像が表示されなくなる原因のほとんどは、「ページはhttpsになったのに、画像の読み込み先がhttpのまま残っている」ことです。これを「混在コンテンツ」と呼びます。画像のファイル自体が消えたわけではないので、読み込み先のアドレスを正しく直せば、元どおり表示されます。

この記事では、原因が混在コンテンツかどうかを見分ける方法、安全な直し方の順番、さらにSSL化を「やりっぱなし」にしないための設定までをまとめました。

まず確認：画像が出ない原因が「混在コンテンツ」かどうかを見分ける

作業に入る前に、本当に混在コンテンツが原因なのかを確認します。パソコンのブラウザ（Google Chrome）で、次の手順を試してください。

1. 画像が表示されないページを開きます。

2. アドレスバー左側のアイコンをクリックし、「この接続は保護されています」と表示されるか、注意の表示が出るかを確認します。

3. ページ上で右クリックして「検証」を選び、開いた画面の「Console（コンソール）」タブを見ます。

4. 「Mixed Content」という黄色や赤の警告が出ていれば、混在コンテンツが原因です。警告文の中に、httpのままになっている画像のアドレスが表示されます。

警告に出てくるアドレスが「自分のサイトの画像」なのか、「外部のサービスから読み込んでいる画像」なのかもメモしておくと、このあとの切り分けがスムーズになります。

なぜSSL化すると画像が表示されなくなるのか

WordPressは、記事に画像を入れたとき、その画像の場所を「完全なアドレス」として本文に保存します。SSL化する前に入れた画像は、httpから始まるアドレスのまま、データベースに残っています。

ページ全体がhttpsで表示されているのに、その中の画像だけがhttpで読み込まれようとすると、ブラウザは「安全な通信の中に、安全でない通信が混ざっている」と判断します。最近のブラウザは、httpの画像を自動的にhttpsで読み込み直そうとしますが、読み込み直しに失敗した画像や、デザインの背景として指定されている画像などはブロックされ、表示されなくなります。

httpのアドレスが残りやすい場所は、主に次のとおりです。

・SSL化より前に書いた記事や固定ページの本文

・テーマのカスタマイザーで設定したロゴ・背景画像・ヘッダー画像

・ウィジェットやフッターに直接書いたバナー画像

・ページビルダー系のプラグインで作ったページ

・外部のサービスから読み込んでいる画像やバナー

このほか、キャッシュ系のプラグインやサーバーのキャッシュに、SSL化前の古いページが残っていることもあります。

直し方①：まずWordPressの基本設定とテーマ側の画像を確認する

最初に、影響の少ない確認から順に進めます。

WordPressアドレスとサイトアドレスを確認する

管理画面の「設定」から「一般」を開き、「WordPressアドレス」と「サイトアドレス」の両方がhttpsから始まっているかを確認します。どちらかがhttpのままだと、画像だけでなくCSSやスクリプトも正しく読み込まれないことがあります。

なお、ここを書き換えるときは、サーバー側でSSLが正しく有効になっていることを先に確認してください。SSLが有効になっていない状態でhttpsに変えると、管理画面に入れなくなることがあります。

テーマのカスタマイザーとウィジェットを確認する

「外観」から「カスタマイズ」を開き、ロゴ・背景画像・ヘッダー画像を設定し直します。同じ画像を選び直して「公開」を押すだけで、アドレスがhttpsに更新されることが多いです。ウィジェットやフッターに画像のアドレスを直接書いている場合は、httpの部分をhttpsに書き換えます。

キャッシュを削除する

キャッシュ系のプラグインを使っている場合はキャッシュをすべて削除し、ブラウザのキャッシュも消してから表示を確認します。サーバーやCDNのキャッシュ機能を使っている場合は、そちらのキャッシュも削除してください。

直し方②：記事内の画像アドレスをまとめて置き換える

記事の数が多い場合、1記事ずつ画像を入れ直すのは現実的ではありません。そこで、データベースに保存されているhttpのアドレスを、httpsのアドレスへまとめて置き換えます。

作業の前に、必ずサイト全体とデータベースのバックアップを取ってください。置き換えは一度に多くのデータを書き換えるため、入力を間違えるとサイト全体の表示に影響します。

手順の流れは次のとおりです。

1. バックアップ用のプラグインやサーバーの機能で、ファイルとデータベースのバックアップを取ります。

2. 「Better Search Replace」などの置換用プラグインを入れます。

3. 置き換え前の文字列に「httpから始まる自分のサイトのアドレス」、置き換え後に「httpsから始まる同じアドレス」を入力します。wwwの有無も実際のアドレスに合わせます。

4. まず「ドライラン（テスト実行）」で、何件が置き換わる予定かを確認します。

5. 件数に問題がなければ本番の置き換えを実行し、画像が表示されるかを確認します。

ここで注意したいのが、データベースを直接開いて一括置換をするやり方です。ページビルダーやウィジェットの設定は、文字数の情報を含んだ特殊な形式で保存されていることがあり、単純に文字を置き換えると、文字数がずれて設定が読み込めなくなることがあります。置換用プラグインはこの形式に対応しているため、直接の書き換えよりも安全です。

直し方③：外部の画像やプラグインが原因の場合

置き換えをしても警告が消えない場合は、コンソールの警告に出ているアドレスをもう一度確認します。

・自分のサイト以外のアドレスであれば、外部のサービスから読み込んでいる画像やバナーが原因です。提供元がhttpsに対応していればアドレスをhttpsに変え、対応していなければ画像を自分のサイトにアップロードし直すか、掲載をやめることを検討します。

・テーマやプラグインのファイルの中に、httpのアドレスが直接書かれていることもあります。テーマやプラグインを最新版に更新し、それでも直らなければ、作者のサポート情報を確認します。

・SSL化を補助するプラグインを入れている場合は、その設定で混在コンテンツの自動修正が有効になっているかを確認します。ただし、プラグインで表示のたびに書き換える方法は応急処置なので、根本的にはデータベースのアドレスを直しておくのがおすすめです。

ここまで試しても画像が出ない場合や、データベースの置き換えを自分で行うのが不安な場合は、無理に作業を続けるより早めに相談していただくほうが安全です。SSL化した時期と、画像が出ないページを教えていただければ、原因の切り分けから対応します。

https://coconala.com/services/3421929

ついでにできる改善提案：SSL化を「やりっぱなし」にしないための設定

画像が表示されるようになったら、せっかくのSSL化をきちんと活かすために、次の設定もあわせて見直しておくことをおすすめします。

httpでのアクセスをhttpsへ自動で転送する

SSL化しても、httpのアドレスでもページが開ける状態のままだと、検索エンジンに同じページが2つあると判断されたり、古いリンクから来た人が保護されていないページを見てしまったりします。多くのレンタルサーバーには、httpでのアクセスをhttpsへ自動で転送する設定があります。サーバーの管理画面で有効にするか、サーバーの設定ファイルに恒久的な転送（301リダイレクト）の設定を追加します。

wwwあり・なしのアドレスをどちらかに統一する

wwwありとなしの両方でサイトが開ける場合は、どちらかに統一して転送しておきます。SSL証明書が片方にしか対応していないと、もう一方で開いたときに警告が出るため、証明書の対象もあわせて確認します。

Search Consoleにhttpsのサイトを登録し直す

Googleの検索状況を確認するSearch Consoleを使っている場合は、httpsのアドレスでサイトが登録されているかを確認します。サイトマップもhttpsのアドレスで送信し直しておくと、検索結果の切り替わりがスムーズになります。

SSL証明書の自動更新を確認する

無料のSSL証明書は有効期限が短く、通常はサーバーが自動で更新します。自動更新が止まっていると、ある日突然サイト全体に警告が出ることがあります。サーバーの管理画面で、自動更新が有効になっているかを一度確認しておくと安心です。

画像を入れるときはメディアライブラリから選ぶ

今後は、画像のアドレスを手で書くのではなく、メディアライブラリから選んで入れる習慣にしておくと、アドレスの書き間違いやhttpの混入を防げます。

これまでの対応について

私はWeb制作歴6年で、HP・LP・ECサイトの制作を100件以上手がけてきました。coconalaのWordPress修正サービスでは評価5.0をいただいています。SSL化のあとに画像が表示されなくなるトラブルは、原因の場所を一つずつ確認していけば、画像や記事を消さずに直せることがほとんどです。NDA対応・本人確認済みで、お預かりしたログイン情報やサーバー情報は作業後に削除します。平日日中は1時間以内の返信を目安に対応しています。

まとめ：画像は消えていない。読み込み先のアドレスを直せば戻る

常時SSL化のあとに画像が表示されなくなったら、まずブラウザのコンソールで「Mixed Content」の警告を確認しましょう。そのうえで、WordPressの基本設定、テーマやウィジェットの画像、キャッシュの順に確認し、記事が多い場合はバックアップを取ってから置換用プラグインでアドレスをまとめて置き換えれば、多くの場合は元どおりに表示されます。

「SSL化したばかりで、どこまで影響が出ているかわからない」「データベースの作業を自分で行うのは不安」という場合は、お気軽にご相談ください。症状を伺ったうえで、対応できるかどうかを正直にお伝えします。

https://coconala.com/services/3421929

内容が固まっていない段階のご相談は、プロフィールからどうぞ。

https://coconala.com/users/4536617