ブログについての情報を中心に、ギター関連の上達法や転職情報など幅広く発信中。悩み解決に特化したHow toメディア。

Limitless.net

WordPress

WordPressのSSL化で起きる混在コンテンツの直し方

更新日:

WordPressのSSL化で起きる混在コンテンツの直し方

 

誠太

こんにちは、誠太です!

 

今回のテーマは「SSL化したのに、アドレスの左にあるマークが鍵にならない時の対処」です。

 

10時間かけてようやく解決できたので、解決した方法とその他の改善策を共有したいと思います。

 

あなたが同じ問題で困っていたら良い解決策になると思うので、参考にしてみてくださいね!

 

SSL化の際に発生する、混在コンテンツとは

 

SSL化の際に発生する、混在コンテンツとは

 

「混在コンテンツ」なんて聞くとすごく小難しく聞こえますが、簡単に言うとSSL化したらサイト内のURLは全て「htps://」からスタートしなければいけないのに、まだ「http;//」のままの部分がありますよー!という意味です。

 

「え?でも普通にSSLにしたら他のも「https://」 に変わるんじゃないの?」

 

って思いますよね。

 

自動で全て変換されればとても楽なんですが、実際そうならないものも結構あります。

 

WordPress をSSL化させようとした人で苦労した経験を持ている人は、結構いるんじゃないでしょうか。

 

SSL化で保護されない通信になる場合の考えられる原因

 

多くの場合は「画像ファイル」が原因になっていることが多いです。

 

僕も画像ファイルが原因でSSL化できていませんでした・・・

 

他にはアフィリエイトのリンクだったり、引用テキストだったり、投稿に使用されているものが原因になっている場合もあるようです。

 

でも僕の場合は、原因が画像ファイルではあったんですけど、ネットで調べても出てこない事例だったので、どのような手順で解決したのか次の項目から解説していきたいと思います。

 

SSL化したのに鍵にならない場合の原因を探す方法

 

主に原因を探す方法としては Google ChromeFireFox 2つを使用します。

 

2つのブラウザ(インターネットを利用するもの)でそれぞれチェックを行うと、原因箇所の特定が早くなるので両刀使いでいきます。

 

混在コンテンツの原因を探る方法① GoogleChrome のデベロッパーツールを使用する

 

Google Chrome のデベロッパーツールとは、インターネットの画面でどのような仕組みが組まれているかというHTMLコードを見るためのものです。

 

このデベロッパーツールを使用して、原因を特定していきます。

 

デベロッパーツールの開き方

キーボードの「F12」

 

するとこのような画面が表示されます。

 

GoogleChrome のデベロッパーツールを使用する

 

この画面の中で「Console」をクリックするとエラーが発生しているURLを探すことができます。

 

GoogleChrome のデベロッパーツールを使用する2

 

修正を加えてしまっているので、URLが見えない状態になっていますが見ていくと「http://」から始まっている画像ファイルなどを確認することができます。

 

この「http://」は人によってエラー内容が変わるので、リンクだったり画像だったりする場合がありますので、ご確認下さい。

 

画像ファイルだった場合、デベロッパーツールに表示されている「http://」から始まる部分をドラッグして「Ctrl + C」でコピー。

 

アドレスバーに貼り付けて検索をすると、対象となる画像ファイルを確認できます。

 

混在コンテンツの原因を探る方法② FireFox のデベロッパーツールを使用する

 

FireFox のデベロッパーツールを使用する

 

FireFox でもGoogle Chrome と同じく「F12」でデベロッパーツールを開く事ができます。

 

少し見た目が違いますが、FireFox のほうが見やすい印象があるので、FireFox のデベロッパーツールで先に探すと原因探しは早いかもしれませんね!

 

混在コンテンツの原因を探る方法③ FireFox のサイトセキュリティ詳細表示を使用する

 

アドレスバーの隣りにある「!」をクリックした後、接続の右側の「>」をクリックします。

 

FireFox のサイトセキュリティ詳細表示を使用する

 

すると下の方に、「詳細を表示」という文字が表示されるので、クリックして下さい。

 

FireFox のサイトセキュリティ詳細表示を使用する2

 

このような画面が表示されるので、「メディア(M)」をクリックすると、画面に表示されている画像ファイルとプレビューが表示されるので、こちらでも「http;//」から始まる画像を確認することができます。

 

混在コンテンツの具体的な改善方法

 

それでは具体的な改善方法を解説します。

 

混在コンテンツの改善方法① 画像ファイルの「http」を修正

 

「http;//」で始まる画像を見つけたら、その画像ファイルがどこにあるかわかるはずなので、その画像が使用されている記事などの編優画面を確認して「http;//」を「https;//」に書き換えてください。

 

混在コンテンツの改善方法② 貼り付けリンクの「http」を修正

 

こちらも画像同様で貼り付けたリンクのURLを「http;//」から「https;//」に変更していきます。

 

ただ、ここでひとつ問題があるのは何故か「https;//」にするとリンク切れを起こすURLなどが存在するので、闇雲に書き換えるのではなく最初はエラーが出ているリンクURLのみを書き換えるようにして下さい。

 

混在コンテンツの改善方法③ サーバー内のコードを確認(少し難しい)

 

これは少し難しいのですが、サーバーにある WordPress ファイルのコードを確認して変な記述が無いかどうかを確認する方法です。

 

「index.php」「style.css」などのファイルでエラーを起こしやすいようなので、エラーが起きている場合はサーバーのデータ管理画面か、FFFTP を使用していればエラー内容のURLにファイルのパスが書いてあるはずなので、そちらを参考に対象のファイルまで到達してください。

 

ここでの注意は Windows の場合、メモ帳は絶対使用しないようにして下さい。

 

余計な空白が入って別のエラーが出たり、最悪管理画面が真っ白になったりする可能性があるので、TeraPad」などのテキストエディターをしっかりと使って書き込むように注意です。

 

混在コンテンツの改善方法④ 「Search Regex」を使用して「http」を一括変換

 

Search Regex

 

プラグイン有効後の設定方法

  • 「Search pattern」➜「http;//」と入力
  • 「Replace pattern」➜「//」と入力
  • 「Search」をクリックし、対象を確認
  • 「Replace & Save」 で置換完了

 

このプラグインを使用することによって、エラーを起こしている「http://」を一括で「https://」に変換してくれます。

 

「え、じゃあ最初からこれ使えば良いんじゃないの?」

 

と思われるかもしれませんが、このプラグインだけではまかなえない部分があるようで、一括変換をしても「保護されていない接続の扱い」になる場合があります。

 

なので、このプラグインは有効に使えますが過信はしないようしたほうがベターです。

 

混在コンテンツの改善方法⑤ 「Really Simple SSL」を使用する

 

このプラグインを使用すると、カンタンにエラーを起こすことなくあなたのサイトをSSLに対応するようにしてくれます。

 

いや、待ってくださいね?

これも使用しないほうがいい理由があるんです。

 

以前 Google の Page Speed Insight の記事を上げた時に、ページ表示の速度はSEO上大切ですよというお話をしました。

 

コチラ
PageSpeed Insightsで速度が2倍上昇!モバイルだけ遅い人必見

続きを見る

 

確かにこのプラグインを使用すれば容易にSSL化させることが出来るのですが、Google の Pege Speed Insights でスピード計測をした時にスコアが著しく落ちる傾向にあるんです。

 

僕もSSLがうまく行かなくてしばらく Really Simple SSL を利用していたのですが、ページ表示速度が落ちるとなってはSEO的に良くないので、解除することにしました。

 

恐らくエックスサーバーでのSSL化と Really Simple SSL ダブルで使用していた事で、処理を圧迫しページの表示速度を落としていたのだと思います。

 

最終手段で Really Simple SSL を使用することを推奨しているブログは他にもありますが、二重で使用するとページ速度が落ちる可能性があることを記載していません。

 

そのため、あえてこのブログで注意喚起も含めてお伝えさせていただきました。

 

もし、使用する場合はサーバーサービスのSSL化サービスを無効にしてから使用するように注意して下さい。

 

混在コンテンツの改善方法⑥ エラーを起こしている画像の再アップロード

 

僕が最終的に解決できた方法はアップロードのし直しでした。

 

WordPress サイドバーのメディアで該当の画像を完全に削除してアップロードを再度行うと改善されました。

 

画像を再度アップロードすることによって「https://」にURLが書き換えられ、正常な状態としてインポートされるようです。

 

しかし、ぼくの事例としてはエラーを起こしている場所が、ダッシュボードの右上に表示されているプロフィールのアイコン画像でした。

 

エラー場所も「index.php」のプロフィール画像ということしか書いておらず、サイトのTOPページはSSL化できているのに、ダッシュボードはできていないという不思議な状況で苦労しました(汗)

 

同じ境遇だった場合は、画像の再アップロードを是非試してみて下さい。

 

■補足事項

今回僕が解決した方法は「画像の再アップロード」でしたが、
ここに至るまで紹介した方法をすべて試した上での再アップロードです。

 

Search Regex を使用しても感知されず、サーバー上で画像を消してみても
特に変化はなくエラーが出続ける状態でした。

 

WordPress のプラグインは優秀なものがとても多く、僕たちのブログ更新や
サイトの構築などに大きく力添えしてくれるものですが、過信しすぎると
問題を解決するために必要な「広い視野」が狭くなってしまうので、
その点を考慮しながら利用したほうが、何かトラブルがあった際にすばやく対処
出来るようになるかと思います。

 

SSL化は早ければ早いほど苦労しなくていい

 

SSL化は早ければ早いほど苦労しなくていい

 

以上、今回のテーマは「【解決!】WordPressのSSL化での混在コンテンツの直し方!」でした!

 

無事にSSL化はできましたか?

 

今回解決するために冒頭にも書きましたが、10時間ほどかかりました。

 

ドメインの評価にも影響してくるSSLの設定なので、できれば WordPress を挿入した時点で済ませておけばよかったですね・・・

 

サイトを作ってから時間が経過すればするほど、めんどうな作業が増えるので、早いうちに済ませておいたほうが良さそうです!

 

10時間もパソコンの作業に手を取られて、他の作業が全くできない状況にイライラされる場合もあると思うので、このページで少しでも早期改善の力になれたなら幸いに思います!

  • この記事を書いた人
  • 最新記事
誠太

誠太

接客業で年間1600万円の売上を達成した経験を活かして、リアル接客とWebマーケティングを融合。『事実と根拠を明確に、誠実な情報発信』をモットーにブログを毎日更新しています。

-WordPress
-

Copyright© Limitless.net , 2019 All Rights Reserved.