JINカスタマイズ

独自SSLで鍵マークが表示されない!初心者がHTTPS化する際に失敗しがちな原因と解決方法

【ブログ】SSL化で失敗しがちな原因

この記事では、ご自身のサイトで《 独自SSL 》の対応をしたにもかかわらず、《 鍵マークが表示されない 》場合の原因と解決方法をご紹介します!

サイトやブログ運営の初心者さんがHTTPからHTTPSへ移行する際に失敗しがちな原因を探っていきます。

 

こんにちは!

あつみん(@lemonatumi)です。

 

先日、WordPress初心者さん向け!最初に知っておいてほしい3つの知識という記事でサイトの《 常時SSL化 》についてご紹介しました。

https://lemonatumi.com/wordpress-beginner/

 

しかし、レンタルサーバーで独自SSLの設定をしてみたは良いものの、「何だかうまくできない…」「エラーが出てしまった…」といった声を良く耳にします。

この記事では、ご自身のサイトで独自SSLの設定をしたにも関わらず、ブラウザのURL部分に鍵マークが表示されない原因と対処方法をご紹介します!

 

ブラウザに鍵マークが表示されない状態とは

WEBサイトで独自SSLを設定した場合、通常であればURL欄の先頭に鍵マークが表示されます。

しかし、独自SSLの設定をしたにもかかわらず、なぜか鍵マークが表示されないという不具合が起こる場合があります。

独自SSLを設定したのに鍵マークが表示されない場合、そのWebサイトでは何らかの不具合が起こっています。

このままでは常時SSL対応が完了しておらず、ブラウザによっては「このサイトは保護されていません」という表示が出てしまうので一刻も早く解決したいですよね。

 

 

鍵マークが表示されない原因は「混在コンテンツ」

独自SSLの設定をしたのに鍵マークが表示されない原因は「混在コンテンツ(Mixed Content)」です。

混在コンテンツとは、httpsから始まる「保護されている」ページの一部に、httpから始まる「保護されていない」コンテンツが混在している状態を指します。

この状態になると、ブラウザが「このページには安全でないコンテンツが一部含まれていますよ~!」とユーザーに警告するため、鍵マークが表示されない状態になります。

 

混在コンテンツの見つけ方

鍵マークを表示させるためには、Webサイトの中からhttpから始まっているコンテンツを探し出す必要があります。

こういったWebサイトのエラー解析には、Google Chromeのデベロッパーツールが便利です。

Chromeのデベロッパーツールでエラー箇所を調べる

(1) エラーが発生しているサイトをGoogle Chromeで開く

スマホやタブレットではなく、PCで開いてください。

(2) デベロッパーツールを起動する

Windowsの場合は、キーボードのファンクションキー[F12]を押します。

Macの場合のショートカットキーは、[Command] + [Option] + [I]を同時に押します。

(3) Consoleタブを開く

開いているページに混在コンテンツがある場合、Consoleタブに「警告マーク」とエラーの数、そして「Mixed Content」という文字が表示されます。

このエラーになっている部分を見れば、混在コンテンツの原因が何なのかがわかります!

スマホで見た時だけ鍵マークが表示されない場合

PCで見た時は鍵マークが正常に表示されるのに、スマホで見ると鍵マークが表示されないという場合は、スマホ用のコンテンツにhttpから始まるコンテンツが含まれています。

この原因も先ほどと同じ方法で調べることができます。

PCで上記の(1)~(3)を行った後、スマホ用の画面をPCで表示します。

Google Chromeを使えば、PC上でスマホの画面表示を見ることが可能です。

先ほどと同じように、Consoleタブで警告を確認しましょう。

 

 

独自SSLで鍵マークが表示されない場合の解決方法

httpから始まるコンテンツを修正する

エラーの原因(混在コンテンツ)が何なのかがわかったら、そのコンテンツを修正しましょう。

混在コンテンツによるエラーを解決するためには、httpから始まっているコンテンツをhttpsに変更する必要があります。

画像を一度削除して再度アップロードしてみる

エラー原因が画像(.jpgや.pngなど)の場合、画像を一度削除して再度アップロードすることで改善されるケースもあります。画像を削除する前にPCのデスクトップなどに画像のバックアップをとってから行ってくださいね。

あつみん
あつみん
初心者さんがやりがちな混在コンテンツエラーは『画像』が原因のことが多いです! 

キャッシュの削除

混在コンテンツを全て消したのに鍵マークが表示されない場合、ブラウザのキャッシュが影響している可能性もあります。

一度キャッシュを削除してから再読み込みしてみてください。

 

 

以上、独自SSLで鍵マークが表示されない場合の原因と解決法でした!

あつみん
あつみん
いろいろとファイルをイジる前に、バックアップは忘れずにお願いします。

 

▼未経験でもOK!在宅で稼ぐスキルを身につけよう




WEBデザインやプログラミングを未経験から勉強するなら【TECH::CAMP】がおすすめ!

まずは無料のオンライン説明会に参加して、講座の内容を見てみよう

\ 25分間の無料説明会 /
TECH::CAMPオンライン説明会

WEBライター
あつみん

2歳(男の子)子育て中の30代主婦です。

DWE中古教材を使った「こどものおうち英語教育」や「ママのための在宅ワーク」など育児に役立つ情報をブログで発信しています。

◆◇ 詳しいプロフィールはこちら ◇◆

\ Follow me /