【サイトをHTTPS化②】安全な接続(緑の鍵マーク)に向けてコンテンツを修正

   2018/07/18   icon-clock-o読了時間:約4分42秒

前記事 【サイトをHTTPS化①】SSLサーバ証明書の登録(さくらインターネット) にて
サーバ証明書を発行してもらったので、無事に自サイトをHTTPSのURLでも開けるようになりました。

セキュリティの鍵マークに黄色の警告アイコンが付いている場合や
『 コンテンツに問題がある 』 とメッセージが出た場合に、考えられる修正点をご説明します。
別に黄色の警告アイコンが出ていても、証明書はきちんと発行されているので
セキュリティ上の問題は無い
のですが、閲覧ユーザーから見た感じの印象が宜しくないので、
出来るだけ緑の鍵マークと 『 安全な接続 』 『 保護されています 』という
メッセージが出るように頑張りましょう。


復元できるようにまずはバックアップを作る

色々削除したり直したりしてたら変なことになってしまった…!
という時にすぐに元に戻せるように、現状のファイルのコピーを作ってから
コンテンツの修正作業を行ってください。


絶対パスを相対パスに直す

コンテンツの問題として一番可能性が高いのが、リンクURLや
ファイルの呼び出しリンクURLを 『 http://~ 』 と絶対パスで記述している箇所です。

これを相対パスに書き直すか、URLにsを付け加えて 『 https://~ 』 に変更するか、
もしくはhttp、httpsの両方にアクセスできるように絶対URL『 //~ 』を記述してください。

絶対パスは【 https://pc-pier.com/mailform.html 】とフルで記述するURL、
相対パスは【 mailform.html 】のみ、ファイルの階層で記述するURL、
絶対URLは【 //pc-pier.com/mailform.html 】と記述するURLです。

まだhttpsに対応していないサイトもあるし、そういったサイトに
リンクを貼っている場合は絶対URLがオススメかもしれません。

CSSファイル内も忘れずに

HTMLファイルだけでなく、CSSファイルの中にも
絶対パスの記述が無いか確認しましょう。

テキストエディタの【検索】や【置換】が便利

TeraPadなどの無料テキストエディタでも
コード内の語句検索や置き換えが出来るので、
httpの記述を探して書き換えましょう。
HTTPを置換え
TeraPadなどのテキストエディタをインストールしていない方は
Webサイトを作ろう!【2】必要なソフトを準備する をご参照ください。

メタタグ内も忘れずに

サイトのhead内にメタタグを記述している場合は
そちらも合わせて忘れずに修正してください。

コード内を検索してHTTPになっている部分を探します。
HTTPを検索
HTTPSに記述を書き換える


スクリプトを外してみる

なぜかうちのサイトでは、
・Google+1ボタン
・Yahoo!ブックマークボタン
この2つがNGでした。

色々直したのにまだ鍵が緑にならない!という方は
これらのスクリプトの部分をごっそり削除してみてください。

また、どこが問題となっている混在コンテンツか不明な場合は
【サイトをHTTPS化⑥】混在コンテンツを探す をご覧いただいて、エラー箇所を検索してみてください。


コンテンツの修正が済んだら

コンテンツ内容を修正して、HTTPSのページでもちゃんと緑色の鍵マークが出るようになったら
いよいよリダイレクトの設定を行い、HTTPにアクセスした人を
HTTPSのページに連れてきてもらうように設定しましょう。
⇒次記事 【サイトをHTTPS化③】.htaccessファイルでHTTPからHTTPSにリダイレクト

関連記事

  【サイトをHTTPS化①】SSLサーバ証明書の登録(さくらインターネット)
  【サイトをHTTPS化②】安全な接続(緑の鍵マーク)に向けてコンテンツを修正(この記事です)
  【サイトをHTTPS化③】.htaccessファイルでHTTPからHTTPSにリダイレクト
  【サイトをHTTPS化④】リダイレクト後のエラー修正・階層下のWordPress設定
  【サイトをHTTPS化⑤】HTTPSサイトをSearch Consoleに登録
  【サイトをHTTPS化⑥】混在コンテンツを探す

 良かったら押してみてください♥

  • このエントリーをはてなブックマークに追加
  • Pocket