【Chrome】デベロッパーツールを使い混合コンテンツを発見する方法

こういった疑問に答えます！

この記事を読むことで
WordPressでよくある「混合コンテンツ」問題について
手動で修正する方法がわかります。

混合コンテンツを放置すると
サイト表示がうまくいかないことがあるので
はやめに対処しておきましょう！

 混合コンテンツを見つけるための手順5つ

1.デベロッパーツールを開く

まず、Google Chromeの場合はウェブベージの上で右クリックし
「検証(Inspect)」を選びます。これでデベロッパーツールが開きます。
Firefoxの場合も同様に、右クリックをして「要素を調査」を選択します。

2.「Console」タブを選択する

デベロッパーツールが開いたら、上部にある「Console」タブをクリックします。
このタブでは、ウェブページが読み込まれた際の
エラーメッセージや警告が表示されます。

3.混合コンテンツの警告を確認する

「Console」タブを見てみると、ページ内に混合コンテンツが含まれている場合
ブラウザが警告メッセージを表示します。
例えば、

Mixed Content:The page at ‘https//yourwebsite.com’ was loaded over
TTPS, but requested an insecure resource ‘http://example.com!

といったメッセージが出ます。

4.問題のあるリソースを特定する

メッセージに表示されている「http://」から始まるURLが混合コンテンツの原因です。
このURLがどこで使われているのかを確認し、
そのURLを「https://」に変更する必要があります。

5.ソースコードを確認する

混合コンテンツのURLがどこにあるか確認するために
「Elements」タブを使ってベージのソースコードをチェックすることもできます。
問題のあるURLがどの部分に埋め込まれているかを見つけることで
具体的な修正ができます！

 混合コンテンツを手動で修正する方法

1.WordPressダッシュボードにログイン

WordPressダッシュボードにログインし、問題のある投稿やページを開きます。

2.投稿やページを編集する

エディターを開き、先ほどのデベロッパーツールで特定した
「http://」で始まるURLを探します。これを「https://」に修正します。

3.画像やメディアファイルを確認

投稿内の画像やメディアファイルも同様に
「http://」で始まるものがないか確認し、修正します。
メディアライブラリにアップロードされた画像が問題の場合は
メディアライブラリからも修正が必要です。

4.テーマやウィジェットもチェック

テーマやウィジェットの設定でも
混合コンテンツの原因となるURLが使用されていないか確認し
必要に応じて修正します。

 リンクの修正と保存

1.リンクの確認

外部リンクも含め、すべてのリンクを確認して
「http://」のものを「https://」に変更します。

もし外部サイトがまだ「http://」でしか対応していない場合は、
混合コンテンツの警告を防ぐため、
そのリンクの取り扱いを慎重に検討してください。

2.変更と保存

修正が終わったら、必ず「保存」ボタンを押して
変更を反映させましょう。

3.再度ブラウザで確認

最後に、修正したページをブラウザで読み込んで
混合コンテンツのエラーが解消されたか確認します。

 混合コンテンツが解決しない場合はプラグインを使用

もし、手動での修正が難しい・解決しない場合は
WordPressのプラグインを使用して
混合コンテンツを自動的に修正することもできます。

Really Simple SSL

このプラグインを使えば、サイト全体のURLを自動的に
「https://」へ変換してくれます。

 最後に

混合コンテンツの修正は、少し手間がかかるかもですが
ブログの安全性と信頼性を保つために
とても大切です。

手動で修正することで、混合コンテンツの問題を解決し
安心してブログ運営を続けていきましょう！