Webサイトに独自SSLを導入すると、正常に動作しているなら、ブラウザのURL入力欄の先頭にグリーンの鍵マークが表示されます。何らかの不具合があると表示されず、SSL化する前の状態で表示されます。独自SSLを導入したのに、エラーが出ていては意味がありません。気付かずにそのまま運営してしまう場合もあるでしょう。今回の記事では、「鍵マークが表示されない場合」と「問題の特定方法」について簡潔にまとめました。
現在、鍵マークが表示されず困っている方はぜひお役立てださい。下画像のようになっているはずです。
どのような場合に鍵マークが表示されないのか
- 対象のページが呼び出している自サイト内のリンク（.js、.css、画像（.jpg、.png、.svgなど）、他ページ）を絶対パスで呼び出しており、URLに「https://」と「http://」が混在している場合。
- フレーム（frame）を使った構造のWebサイトの場合。
- アフィリエイトのAPSがhttpsに対応していない場合。
※特にWordPressなどのCMSを使っている場合は、意図せずプラグインなどが書き出していることがありますので、CMSを利用している方は注意が必要です。
一般的な、Webサイトはフレームをそれほど使っていないと思いますので、原因がそちらの場合は他のサイトで対処方法を探してください。
鍵マークが出ない問題の特定方法
Google Chromeブラウザを立ち上げてください。メニューから、「表示」→「開発/管理」→「デベロッパーツール」をクリックするとデベロッパーツールが起動します。デベロッパーツール内のメニュー「Console」をクリックすると下の画像のように問題箇所が表示されます。
Mixed Content: The page at 〜 → 混合したコンテントです。：ページのここhttpsで読み込んでるのにhttpがあるよ。という意味です。http://で始まるURLが使われているのがわかります。
ページ内のすべてのURLを修正することでエラーが解消され鍵マークが表示されるようになります。
WordPressなどのCMSの場合
今回のエラー箇所はWordPressで利用していたプラグインが原因となっておりました。特定のページのみSSLに対応されていない状態でした。当方では同じ機能を提供する他のプラグインを入れ替えることで、対応しました。CMSでは意図せずに、本体もしくは関連ソフトウェアがURLを書き出していることもありますので、注意が必要です。
アフィリエイトのタグがhttpsに対応しいない場合
アフィリエイトのタグをサイト内に貼り付けている場合もエラーとして表示されます。今のところ、解決方法はありません。各ASPの対応を待つしかありません。特にアマゾンのアフィリエイトタグを入れている場合エラーになります。このような原因があることも覚えておきましょう。
追記：アマゾンはhttpsに対応しました。（2016/10/27）
以上、「httpsにしたがブラウザに鍵マークでない場合」の解決方法でした。
