ロリポップCRチームの otomi です。現在ロリポップのCRチームは4名体制のため、四天王の一人と勝手に名乗っています。
インターネットのセキュリティの意識が高まっている昨今、Google Chromeなどの各ブラウザにおいて、SSL化されていないhttp://から始まるURLでサイトにアクセスした際に、安全でないページであるような警告が表示されるようになっています。
今回はそのSSLについての概要と、SSL設定後のサイトにアクセスした際に表示が崩れたり、ブラウザ上での警告が消えないという場合の対応方法についてご案内します。
SSLとは
SSLとはインターネット上でのデータのやりとりを暗号化し、第三者に情報をのぞかれたり盗まれたりしないようにする仕組みです。
ブラウザで警告を表示させず安心してサイトに訪問してもらうためには、https://から始まるURLでアクセスしてもらう必要があります。
初期状態ではhttps://から始まるURLでアクセスしても、通信が対応していないというエラーが発生するため、最初にSSLの設定が必要となります。
ロリポップでは無料でもSSLをご利用いただける独自SSLというサービスを提供しております。
詳しくは独自SSLについてをご覧ください。
独自SSLを設定後の注意点
独自SSLを設定して、https://から始まるURLでアクセスしたところサイトの表示が崩れていたり、ブラウザ上で警告が消えずがっかり…ということがあります。
そんな独自SSLを設定したときの注意点をご案内します。
なぜ起こるのか
原因はサイトの画像やCSSなどへのリンクが、http://から始まるURLで設定されているためである場合がほとんどです。
Mixed Content（混在コンテンツ）と言われる現象です。
せっかくSSL化しても、ページ内のリンクにhttp://から始まるURLが存在すると、完全に通信が暗号化されないためブラウザが安全でないと判断します。
そのためにブラウザ側で、「http://から始まるURLへのリンクをブロック」、「警告を表示」などを行うことがあります。
リンクがブロックされることによって画像やCSSが読み込めなくなり、その結果表示崩れが発生します。
解決策としてMixed Contentが発生しているかを確認し、リンクのURLを修正する必要があります。
以下にその方法をご案内します。
Mixed Contentの発生の確認と、修正の方法
※記事のボリュームの都合上、操作手順はMacのGoogle Chromeでの解説となっています。Windowsなどの他のOS、及びブラウザでの操作手順はそれぞれの提供元のサイトなどをご確認ください。
※ブラウザのバージョンによっては手順が異なる場合があります。詳細は手順についてはGoogle Chromeの公式サイトをご確認ください。
Mixed Contentの発生の確認
デベロッパーツールを立ち上げる
- 表示崩れや警告が発生しているページで、画面右上の点が縦に3つ並んでいる箇所をクリック
- その他のツール(L) → デベロッパーツール(D)と進んでクリック
発生の確認
- デベロッパーツールの画面上部の「Console」をクリック
- 「Mixed Content:」と書かれている箇所があるか確認
「Mixed Content:」と書かれている箇所があればMixed Contentが発生しています。以下の手順に従って修正します。
※「Mixed Content:」と書かれている箇所が無いにも関わらず、表示崩れやブラウザ上での警告が発生している場合はお問合せフォームからお問合せください。
修正の方法
- 「Mixed Content:」と書かれている箇所のうち、http://から始まる部分を確認
- ロリポップ！FTPなどで、ページ内のリンクのhttp://から始まる部分をhttps://のURLへ編集
- 最終的にページ内にhttp://から始まるリンクが存在しなくなれば修正は完了となります
※WordPressなどのCMSを利用されている場合は管理画面からの編集が必要です。
※ロリポップ！のドメインのURLをhttps://から始まるものに変更する場合、プランによっては共有SSLのURLをご利用いただく必要があります。詳しくは共有SSLの利用法をご確認ください。
まとめ
Google Chromeのデベロッパーツールを利用してのMixed Contentの修正方法をご案内しました。
この記事がSSL化後も今まで通りのサイト運営ができるお役に立てれば幸いです。
