スマホだけアドレスバーに三角の警告マークが出るようになった

自社サイト「MARBLE B&B」をスマホで見ていると、Google Chromeのアドレスバーに見慣れない三角マークが付いている。http:// からhttps:// に転送設定はしているし、SSLの設定もしてあるはず。原因は一体なんだろう。

PCで確認すると、鍵アイコンになっている。こちらは問題なさそうだ。なぜスマホだけ警告マークが出ているのか。

三角マークの原因

調べていくと、Mixed Contentsが原因かもしれないことがわかった。これはつまり、コードのどこかに http:// が含まれているということだ。ここでなければ、cssファイル内の可能性もある。

Chromeの「デベロッパーツール」から「コンソール」を確認すると、一発で原因がわかった。

http:// のコードを見つける

TOPページのスライドショーで、png形式のブログパーツを重ねて表示している。この画像のタグがhttp:// だった。

ブログパーツをコードエディターで確認すると、あった。問題はこれだ。

http://marble66.com/ を削除して、相対パスで更新する。

スマホで確認してみる

直った！ 一件落着。