httpsなのに検索バーに謎の黒い三角ビックリマークの表示が出る・・原因はMixedcontent!鍵マークを表示させる方法

目次

検索バーに謎の黒い三角!マークが出現・・

こんにちは!兵庫県明石市でホームページ制作を行っているnafu-laboです。

wordpressでホームページを制作中、サイトの常時SSL化はしているのに、Chromeの検索バーに黒い三角のビックリマークが表示されたことはありませんか?

nafu-labo

本来なら鍵マークが表示されるのになぜ・・?

明らかに何か問題がありそうなこの表示・・安全な状態(=鍵マークが表示される状態)に解決する必要がありますね!

原因はMixed contentかも!Mixed contentって何?どうやって調べる?

原因はMixed content

調べてみるとMixed contentという状態の時に黒い三角のビックリマークが表示されているようです。

Mixed contentとは、SSL化されたhttpsページ内にhttp(非暗号化通信)で読み込んでいるファイルが存在(混在)している状態を指します。

SSL とは、ウェブサイト内のすべてのコンテンツを「https(暗号通信)」で通信することです。

「安全ではない」と判断されても読み込みされるファイルもあるので、必ずしも全てがブラウザに読み込みがブロックされてしまうわけではないですが、ブロックされたファイルがあるとデザインが崩れてしまったり機能的な不具合が発生する可能性もあります。

見た目ではすぐさま影響がない状態であったとしても、今後影響が出てしまう可能性はありますし、セキュリティの観点から暗号通信ができていない箇所があるのはよろしくない状態と言えますので早急に対応する必要があります。

セキュリティの観点でSSL化しているので、ちゃんと鍵マークになっていないとユーザーにとって安全でないサイトになってしまうのは困りますよね・・・

nafu-labo

どこがhttpになってしまっているのか確認してみましょう!

Mixed contentはどこだ?調べ方

  1. 問題となっているホームページ上で右クリックし「検証」(ディベロップメントツール)を開きます。
  2. consoleというところをクリックします。
  3. このconsole ボックス(赤い四角のなか)に、Mixed contentになっている対象のファイルが表示されます。

Mixed contentになっているファイル例

無事コンソールボックスから対象のファイルを見つけたら、対象のファイルをアップロードしているページを開きましょう。
下の画像はワードプレスの管理画面のメディア「ライブラリ」を開いています。

ファイルのURLをみると、確かにhttp://になっていることがわかります

nafu-labo

上記のケースは、https化する前に画像をいくつかアップロードしていたことが原因でした!

Mixed contentの修正方法

手入力で修正

該当ファイルのURLがhttp://~になっているので、手入力で直接https://に修正してあげればOKです!

プラグインで修正

該当ファイルが多い場合は、プラグインで一発対応できます。
ReallySimpleSSLというプラグインを使うと即座に解消することができ便利です。
ただ、プラグインを停止したり、削除するとまた元の状態に戻ってしまうのでその点は注意が必要です。

おすすめプラグイン
nafu-labo

プラグインもむやみに増やしたくないので、修正箇所が少ないなら手入力で修正してしまうのもアリですね!

番外編:ワードプレスのURLをhttps://に変更

番外編。私がやってしまっていたケースです。

サイト開設直後にSSL化したものの、wordpressのアドレスとサイトアドレスのURLをhttps://に変えていませんでした。
これのせいで自らMixed contentを発生させてしまったようです・・汗

nafu-labo

次回からはSSL化したらすぐに一般設定も変更します!!

ダッシュボードの一般設定から変更が可能です。

Mixed contentが解消!!

無事に、鍵マークが表示されるようになりました!!

Mixed contentを解消して、安全・安心・信頼の鍵マークを取り戻しましょう!!

よかったらシェアしてね!
  • URLをコピーしました!
目次