Topics インフォコネクト最新情報

混合コンテンツが原因！WordPressテーマLightningでブラウザによってスライドショーの画像が表示されない時の対処法

2021.03.31

Webの豆知識

WordPressの豆知識

この記事は公開から１年以上経過しています。

こんにちは、クリエイターのSHOJIです。

先日、個人アカウントのTwitterフォロワーさんから「作成したWordPressのサイトで、ブラウザによってスライドショーの画像が表示されたりされなかったりしていて困っています」とのご相談がありましたので、今回のWebの豆知識で共有してみたいと思います。

\\　目次　//
不具合状況の確認
サイト環境の確認
WordPressのテーマLightningで確認
対処法
混合コンテンツとは
混合コンテンツの危険性
最後に

不具合状況の確認

フォロワーさんによると、Internet Explorer（IE11）や Safariでは正常にスライドショーが表示されているものが、Chromeではスライドショーの画像が表示されないというものでした。

確認してみると、フォロワーさんの言われる通りChromeでは表示されていない状況でした。

サイト環境の確認

不具合のあるサイトのURLを共有していただき確認したところ、株式会社ベクターが開発提供している無料で利用可能なWordPressテーマ「Lightning」を使ってサイトを作成されていました。

実際にChromeで確認したところスライドショーが正常に表示されておらず、SafariやIE11では正常に表示されているようでしたので、テーマ自体のトラブルではなさそうです。

フォロワーさんのサイトは『https://～』というSSL化されたサイトであったため、ブラウザに左右されるSSL化されたサイトの不具合と言えば「混合コンテンツ」ではないかと推測できます。

WordPressのテーマLightningで確認

混合コンテンツが影響しているのではないかと推測できると対応は簡単！

Chromeのデベロッパーツールでスライドショーに使用されている画像への接続パスを確認してみると、やはり画像ファイルが『http://～』で読み込まれたHTTP接続コンテンツとなっていました。

いわゆる混合コンテンツと呼ばれるものです。

https接続で読み込まれた画像の接続パス

※https接続で読み込まれた画像の場合は正常に表示される参照：WordPressテーマLightning

http接続で読み込まれた画像の接続パス

※http接続で読み込まれた画像の場合は正常に表示されない参照：WordPressテーマLightning

対処法

混合コンテンツと聞くと何か難しそうに感じるかもしれませんが、対処法は簡単で『http://～』といったSSL化されていない絶対パスで読み込まれる画像ファイルを、『https://～』といったSSL化された絶対パスで画像ファイルを読み込んであげれば良いだけです。

ただし、テーマLightningのスライドショー内に設置する画像については、メディアライブラリ内の画像から選択する必要があるため、SSL化する以前にメディアライブラリにアップロードした画像では『http://～』となってしまいます。

したがって「Search Replace DB」などのツールを使い常時SSL化に伴うデータベースの置換を行う必要があるのですが、作成者の理解度によってはこの説明では難しすぎる場合があります。

そこで今回は、
①スライドショーに設置したい画像を、メディアライブラリにアップロードし直す
②あらたにアップロードした画像で、スライドショーの設定を再度行う
といった初歩的な対応で混合コンテンツが解消され、Chromeでも無事にスライドショーが表示されました。

混合コンテンツとは

暗号化（SSL/TLS）によってHTTPS接続で表示させるように設定（常時SSL化）されたサイト内で、暗号化されていないHTTP接続で画像や動画、スクリプトなどのコンテンツを読み込まれてしまうと、混合コンテンツが発生します。

Chromeでは、安全性をより強化するために、混合コンテンツをバージョンアップによって段階的にブロックしていくと、開発元であるGoogle社が2019年10月に発表しました。
参考：「No More Mixed Messages About HTTPS」

混合コンテンツの危険性

SSL化されていないサイトにアクセスした場合「暗号化されていない安全でないサイト」という理由から、ブラウザ側であらかじめ閲覧規制が掛かりますが、SSL化されたサイトの場合「暗号化されている安全なサイト」と判断されるため、閲覧や入力などの権限が許可されるようになっています。

安全であるはずのSSL化されたサイトの中に安全でないHTTP接続コンテンツが存在してしまうと、悪意のある第三者によって暗号化されていないHTTP接続コンテンツを介してサイト内に侵入され、データを盗みとられたりデータが改ざんされてしまうなどの危険性があるのです。

最後に

いかがだったでしょうか、今回のWebの豆知識。「WordPressテーマLightningでブラウザによってスライドショーの画像が表示されない時の対処法」というテーマでしたが、混合コンテンツという非常に重要で難しい内容にまで繋がったので、WordPress初心者の方々には少し分かりづらかったかもしれません。

ですが、万が一混合コンテンツがあった場合、そのコンテンツはブロックされて非表示になるためサイトが正しく表示されず、ユーザーの離脱や検索順位の下落を招く恐れがあり、SEOの観点でも良いことは全くありません。

単なる画像が表示されないといった不具合ひとつをとってみても、これだけの危険性を含む問題もありますので、Web制作初心者の方はこれからしっかりと学んでいってほしい部分だと思います。