HTTPS化にならないエラーの原因はHTTPリソースの混在!?簡単な確認方法と修正方法。シンプルに好きなこと。失業したらすることおすすめ転職サイトブログ運営ブログのことエックスサーバーWordPressテーマ・ストークお問い合わせプライバシーポリシープロフィールサイトマップブログの歩みCLOSEキーワードで記事を検索CLOSEこのブログの運営者ってどんな人?プロフィールはこちらからHOMEブログ運営ブログのことHTTPS化にならないエラーの原因はHTTPリソースの混在!?簡単な確認方法と修正方法。ちHTTPS化にならないエラーの原因はHTTPリソースの混在!?簡単な確認方法と修正方法。ち(@simplelike0112)です。いつものようにブログ記事をリライトしていると・・・1つのページだけHTTPS「保護された通信」になってませんでした。「サイト全体はすでにHTTPS化してるのになんでやろ?」って思い調べてみました。すると、HTTPリソース混在が原因だと判明しました。今回の記事は、HTTPS化を妨げるHTTPリソース混在についてと、HTTPS化にならない場合の対処方法を解説します!この記事の目次です1.1つのページだけHTTPSになっていない2.HTTPS化されているか確認する方法3.HTTPS化されないエラー原因はHTTPリソース混在4.なぜ「https://」になってないのか?何が原因で?5.HTTPS化されてないサイトへのリンクはエラーにならない6.ページ内にあるリソースのリンク先を1つずつ確認する6-1.内部リンクを確認する方法6-2.画像ファイルのリンク先を確認する6-3.外部リンクを確認する方法6-4.外部から読み込んでいる、画像ファイルを確認する7.ページ内にあるリソースを一気に確認する方法8.HTTPリソースを見つけたら修正しよう!まとめ1.1つのページだけHTTPSになっていないてっちなんでこのページだけHTTPSにならないんやろ・・・サイト全体をHTTPS化してから1年経ちますが、今まで問題なく運用できていました。HTTPS化にならなかったページは、ボールペンだけじゃない!PILOTのこすると消えるフリクション。商品の多彩なラインナップまとめたよ!!です。PILOTのフリクションペンの種類をまとめたページで、Amazon、楽天市場、Yahoo!ショッピングへのリンクをたくさん張ってます。※現在はちゃんとHTTPS化されていますよ!!スポンサードリンク2.HTTPS化されているか確認する方法HTTPS化されてるかの確認方法はアドレスバーを見ます。Cromeを使っていて下記のような表示になります。HTTPS化されていないときは「iマーク」が表示されます。「iマーク」をクリックしてみてください。“このサイトへの接続は完全には保護されていません“と表示されます。次に、HTTPS化されているときは「鍵マークと保護された通信」が表示されます。こちらが正常ですね!!「鍵マークと保護された通信」をクリックしてみてください。“この接続は保護されています“と表示され、HTTPS化されているのが分かります!スポンサードリンク3.HTTPS化されないエラー原因はHTTPリソース混在HTTPS化されないときの原因はHTTPリソース混在です。HTTPリソースとはページ内に読み込まれるJavaScriptやCSS、画像ファイルや各種ファイルなどのことを指します。そのリソースのリンク先(アドレス)が「http://」になっていて、「https://」になってないからです。このような状態のことを「HTTPリソースがページ内に混在している」といいます。ブログでよく使われるのは、画像ファイルやアフィリエイトリンクなどのリソースでしょう。その他にグーグルマップやユーチューブの埋め込みもリソースになります。HTTPS化されているサイトだと、読み込まれるリソースのリンクを全てHTTPSにしなければなりません。画像が読み込まれているページがあるとします。その画像のコードを見るとリンク先が「src=”http://」とhttpに「s」が付いていないとHTTPリソース混在になります。正常な場合「src=”https://」というふうに、httpに「s」が付いていますよ。スポンサードリンク4.なぜ「https://」になってないのか?何が原因で?リソースが原因ということが分かりました。内部リンクが原因HTTPS化する前に張り付けた内部リンクHTTPS化するの画像ファイルのアドレスブログをはじめてすぐにHTTPS化した方は、内部リンクやアップロードして貼り付けた画像は問題なく「https://」になってます。気にせずに大丈夫です!しかし、HTTPS化にする前に長い間ブログしてた方は気を付けないといけません。ページのどこかに「http://」のままのリンクが残っていて、エラーの原因となってるかもしれないからです。外部のリソースを読み込んでいて、リンク先が「https://」になっていない張り付けているアフィリエイトサイトがHTTPS化されていないアフィリエイトサイトがHTTPS化する前に張り付けたリンクアフィリエイトをやっているブログでは、アフィリエイトサイトへのリンクも外部リソースにあたります。アフィリエイトリンクを貼り付けた場合、リンク先(バナー用の画像のアドレスも含む)が全てが「https://」でないといけません。コードをよく読んで確認しなければなりません。以上のように内部リンクと外部リンクの2通りの原因があります。2通りの原因から考えると、外部から読み込んでいるリソースがエラーの原因になってそうです。外部から呼んでいる・・・そう、アフィリエイト関連のリンクが怪しい感じがしてきました。スポンサードリンク5.HTTPS化されてないサイトへのリンクはエラーにならない外部リンクがエラーの原因の1つでありますが、あくまでリソースに関してだけです。HTTPS化されていない、サイトやブログへのリンクはエラーにはなりません。参考のために、HTTPS化されていなサイトのリンクを張り付けました。参考サイトとほほのWWW入門ちびむすドリル【小学生】ヤサシイエンゲイすべてHTTPS化されてませんが、このページはちゃんと「保護された通信」になってますね。リソースに関してだけということを覚えておきましょう。スポンサードリンク6.ページ内にあるリソースのリンク先を1つずつ確認するではさっそく、ページ内にHTTPリソースがあるか探してみましょう!1つずつ確認する方法を紹介しますが、「確認箇所が多過ぎてやってられない」って方は、一気に確認する方法もあります。次の見出しまでスキップしてくださいね。HTTPリソースとはページ内に呼び込まれるJavaScriptやCSS、画像ファイルや各種ファイルなどのことでしたね。ブログの場合、画像ファイルとアフィリエイトのリンクが主なリソースです。内部リンクにマウスのポイントをあてると、リンク先アドレスがブラウザの左下に表示されます。「https://」になっているか確認しましょう。外部リンク(ここではアフィリエイトサイトへのリンクのこと)を確認しましょう。外部リンクにマウスのポイントをあてると、リンク先アドレスがブラウザの左下に表示されます。「https://」になっているか確認しましょう。6-4.外部から読み込んでいる、画像ファイルを確認するアフィリエイトリンクの画像は、すべて外部から読み込まれています。アフィリエイトリンクのコードを見て「https://」となっているか確認しましょう。カエレバを使っている場合、カエレバのコードすべてを確認します。下記画像は、カエレバのコード一部分だけです。「http://」と「s」の付いてない箇所があればエラー要因となっているかもしれません。「ページにリンクあり過ぎて一つずつ確認できない」って方は、一気に確認する方法があります。この方法は早くて確実ですよ!!HTTP化されていない「iマーク」が表示されているページに行きます。キーボードのファンクションキー「F12」キーを押しましょう。すると、ブラウザの画面が半分に割れて、左側にページ、右側にWeb開発に使う開発者(デベロッパー)ツールが表示されます。開発者ツールのメニューから「Security」を探してクリックしましょう。複合コンテンツ」で、HTTPリソースが混在していることを表しています。resources.”を訳すと、”このページにはHTTPリソースが含まれています。page”と書かれているので、ファンクションキー「F5」を押してページを再読み込みしましょう。再読み込みが終わると、青文字で書かれたリンクが表示されます。Panel”をクリックしましょう。一覧表が表示され、1つの画像ファイル(この場合jpegファイル)が出てきました。画像ファイルをクリックしましょう。プレビュー画面が表示され、画像ファイルのプレビューが出てきました。この画像が、HTTPリソースなんですよ!!※HTTPリソースがたくさんある場合は、全て表示されます。先ほどプレビューされた画像を探しましょう。ありました!!カエレバで使われているサムネイル画像です。カエレバのコードを確認します。すると・・・サムネイル画像のリンク先が「src=”http:」になっていて、「s」が付いていません!!これが原因でページがHTTPS化されなかったんですね。8.HTTPリソースを見つけたら修正しよう!僕の場合は、カエレバのコードにHTTPリソースが混在していたのが原因でした。再度商品をカエレバを使って、ブログパーツを作り直してみました。新しく作り直されたサムネイル画像のリンク先コードはきちんと「src=”https//」となっていました。コードを張り替えたら無事にHTTPS化されましたよ~!!補足Amazon、楽天市場、Yahoo!ショッピングのサイトはHTTPS化されているので、エラーが見つかっても、ブログパーツを作り直して貼り替えれば解決します。その他アフィリエイトリンクに関しては、アフィリエイトサイト自体がHTTPS化されていないと、作り直してもエラーが出てしまいます。その時は、アフィリエイトサイトがHTTPS化されるまで待つしかないです。これで作業は完了です!!合わせて読みたいボールペンだけじゃない!PILOTのこすると消えるフリクション。商品の多彩なラインナップまとめたよ!!開発者ツールの「Security」で確認してみましょう。正常にHTTPS化されている場合は、■が縦に3つ並びますよ~!まとめ今回の記事は、1つのページだけHTTPS化されない場合の対処方法を解説しました。これからますますサイト全体のHTTPS化が標準になっていくでしよう。ブログ運営者にとっても気になるところですね。大切なことは、HTTPS化するにはページ内に存在するリソースのリンクをすべて「https://」にすることです。AdSenseは設置場所と同じ名前の広告ユニットを作成しよう!どの場所が収益あるか分析できるよ。ブログ記事のタイトルとアイキャッチ画像更新したのにTwitterに反映されない時の対処方法!!スポンサードリンクブログのことこの記事が気に入ったらいいねしよう!最新記事をお届けします。Chromeブラウザで「F12キー」を押すだけ色鉛筆単色を【送料無料】で買う方法!!三菱880とトンボ1500がバラ売りで買えるRECOMMENDこちらの記事も人気です。AdSenseは設置場所と同じ名前の広告ユニットを作成しよ...ブログのこと2017.8.17ブログはじめて7ヶ月たった感想と今後目標を書きました。はじめた理由も書き...ブログのこと2017.8.18ブログをはじめてインプットがとても多いことに気が付きました。Chromeブラウザ...おすすめ転職サイト2018.8.2介護情報は【きらッコノート・きらケア】で決まり!!きらッコノートに当ブロ...ブログのこと2018.1.8ブログ記事のタイトルとアイキャッチ画像更新したのにTwitterに反映さ...ABOUTこの記事をかいた人てっちマイペースブロガー/妻と娘と息子の4人家族/大阪府在住/雑記ブログ「シンプルに好きなこと。葛木神社と樹氷が美しい!!てっちのプロフィールマイペースブロガー/妻と娘と息子の4人家族/大阪府在住/雑記ブログ「シンプルに好きなこと。シンプルに好きなこと。