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

サイトをSSL化

前記事 【サイトを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化⑥】混在コンテンツを探す

タイトルとURLをコピーしました