httpsにしたがブラウザに鍵マークがでない場合

https鍵マークが出てこない

Webサイトに独自SSLを導入すると、正常に動作しているなら、ブラウザのURL入力欄の先頭にグリーンの鍵マークが表示されます。何らかの不具合があると表示されず、SSL化する前の状態で表示されます。独自SSLを導入したのに、エラーが出ていては意味がありません。気付かずにそのまま運営してしまう場合もあるでしょう。今回の記事では、「鍵マークが表示されない場合」と「問題の特定方法」について簡潔にまとめました。

現在、鍵マークが表示されず困っている方はぜひお役立てださい。下画像のようになっているはずです。
鍵マークのないURL

どのような場合に鍵マークが表示されないのか

  1. 対象のページが呼び出している自サイト内のリンク(.js、.css、画像(.jpg、.png、.svgなど)、他ページ)を絶対パスで呼び出しており、URLに「https://」と「http://」が混在している場合。
  2. ※特にWordPressなどのCMSを使っている場合は、意図せずプラグインなどが書き出していることがありますので、CMSを利用している方は注意が必要です。

  3. フレーム(frame)を使った構造のWebサイトの場合。
  4. 一般的な、Webサイトはフレームをそれほど使っていないと思いますので、原因がそちらの場合は他のサイトで対処方法を探してください。

  5. アフィリエイトのAPSがhttpsに対応していない場合。

鍵マークが出ない問題の特定方法

Google Chromeブラウザを立ち上げてください。メニューから、「表示」→「開発/管理」→「デベロッパーツール」をクリックするとデベロッパーツールが起動します。デベロッパーツール内のメニュー「Console」をクリックすると下の画像のように問題箇所が表示されます。

Mixed Content: The page at 〜 →  混合したコンテントです。:ページのここhttpsで読み込んでるのにhttpがあるよ。という意味です。http://で始まるURLが使われているのがわかります。

Chromeデベロッパーツールで問題を特定

ページ内のすべてのURLを修正することでエラーが解消され鍵マークが表示されるようになります。

httpsに対応した状態

WordPressなどのCMSの場合

今回のエラー箇所はWordPressで利用していたプラグインが原因となっておりました。特定のページのみSSLに対応されていない状態でした。当方では同じ機能を提供する他のプラグインを入れ替えることで、対応しました。CMSでは意図せずに、本体もしくは関連ソフトウェアがURLを書き出していることもありますので、注意が必要です。

アフィリエイトのタグがhttpsに対応しいない場合

アフィリエイトのタグをサイト内に貼り付けている場合もエラーとして表示されます。今のところ、解決方法はありません。各ASPの対応を待つしかありません。特にアマゾンのアフィリエイトタグを入れている場合エラーになります。このような原因があることも覚えておきましょう。

追記:アマゾンはhttpsに対応しました。(2016/10/27)

以上、「httpsにしたがブラウザに鍵マークでない場合」の解決方法でした。