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

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

MARBLE B&Bをスマホで見ると三角マークが付いている
アドレスバーに三角マーク(警告アイコン)が付いている

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

PCのアドレスバーは鍵アイコン
目次

スポンサーリンク

三角マークの原因

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

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

Google Chromeのデベロッパーツールで原因を調査する

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

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

MARBLE B&BのTOPページ
MARBLE B&Bで使用しているブログパーツ
ブログパーツに登録しているpng画像

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

MARBLE B&Bブログパーツのソースコード

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

スマホで確認してみる

直った! 一件落着。

MARBLE B&Bスマホ画面
アドレスバーの三角マークが鍵アイコンになった

スポンサーリンク

Please share if you like
目次