こんにちは、セイタです！
今回のテーマは「ＳＳＬ化したのに、アドレスの左にあるマークが鍵にならない時の対処」です。
１０時間かけてようやく解決できたので、解決した方法とその他の改善策を共有したいと思います。
あなたが同じ問題で困っていたら良い解決策になると思うので、参考にしてみてくださいね！
ＳＳＬ化の際に発生する、混在コンテンツとは
「混在コンテンツ」なんて聞くとすごく小難しく聞こえますが、簡単に言うとＳＳＬ化したらサイト内のＵＲＬは全て「htps://」からスタートしなければいけないのに、まだ「http;//」のままの部分がありますよー！という意味です。
「え？でも普通にＳＳＬにしたら他のも「https://」 に変わるんじゃないの？」
って思いますよね。
自動で全て変換されればとても楽なんですが、実際そうならないものも結構あります。
WordPress をＳＳＬ化させようとした人で苦労した経験を持ている人は、結構いるんじゃないでしょうか。
ＳＳＬ化で保護されない通信になる場合の考えられる原因
多くの場合は「画像ファイル」が原因になっていることが多いです。
僕も画像ファイルが原因でＳＳＬ化できていませんでした・・・
他にはアフィリエイトのリンクだったり、引用テキストだったり、投稿に使用されているものが原因になっている場合もあるようです。
でも僕の場合は、原因が画像ファイルではあったんですけど、ネットで調べても出てこない事例だったので、どのような手順で解決したのか次の項目から解説していきたいと思います。
ＳＳＬ化したのに鍵にならない場合の原因を探す方法
主に原因を探す方法としては Google Chrome と FireFox２つを使用します。
２つのブラウザ（インターネットを利用するもの）でそれぞれチェックを行うと、原因箇所の特定が早くなるので両刀使いでいきます。
混在コンテンツの原因を探る方法① GoogleChrome のデベロッパーツールを使用する
Google Chrome のデベロッパーツールとは、インターネットの画面でどのような仕組みが組まれているかというＨＴＭＬコードを見るためのものです。
このデベロッパーツールを使用して、原因を特定していきます。
デベロッパーツールの開き方
キーボードの「Ｆ１２」
するとこのような画面が表示されます。
この画面の中で「Console」をクリックするとエラーが発生しているＵＲＬを探すことができます。
修正を加えてしまっているので、ＵＲＬが見えない状態になっていますが見ていくと「http://」から始まっている画像ファイルなどを確認することができます。
この「http://」は人によってエラー内容が変わるので、リンクだったり画像だったりする場合がありますので、ご確認下さい。
画像ファイルだった場合、デベロッパーツールに表示されている「http://」から始まる部分をドラッグして「Ctrl + C」でコピー。
アドレスバーに貼り付けて検索をすると、対象となる画像ファイルを確認できます。
混在コンテンツの原因を探る方法② FireFox のデベロッパーツールを使用する
FireFox でもGoogle Chrome と同じく「Ｆ１２」でデベロッパーツールを開く事ができます。
少し見た目が違いますが、FireFox のほうが見やすい印象があるので、FireFox のデベロッパーツールで先に探すと原因探しは早いかもしれませんね！
混在コンテンツの原因を探る方法③ FireFox のサイトセキュリティ詳細表示を使用する
アドレスバーの隣りにある「！」をクリックした後、接続の右側の「>」をクリックします。
すると下の方に、「詳細を表示」という文字が表示されるので、クリックして下さい。
このような画面が表示されるので、「メディア（M）」をクリックすると、画面に表示されている画像ファイルとプレビューが表示されるので、こちらでも「http;//」から始まる画像を確認することができます。
混在コンテンツの具体的な改善方法
それでは具体的な改善方法を解説します。
混在コンテンツの改善方法① 画像ファイルの「http」を修正
「http;//」で始まる画像を見つけたら、その画像ファイルがどこにあるかわかるはずなので、その画像が使用されている記事などの編優画面を確認して「http;//」を「https;//」に書き換えてください。
混在コンテンツの改善方法② 貼り付けリンクの「http」を修正
こちらも画像同様で貼り付けたリンクのＵＲＬを「http;//」から「https;//」に変更していきます。
ただ、ここでひとつ問題があるのは何故か「https;//」にするとリンク切れを起こすＵＲＬなどが存在するので、闇雲に書き換えるのではなく最初はエラーが出ているリンクＵＲＬのみを書き換えるようにして下さい。
混在コンテンツの改善方法③ サーバー内のコードを確認（少し難しい）
これは少し難しいのですが、サーバーにある WordPress ファイルのコードを確認して変な記述が無いかどうかを確認する方法です。
「index.php」「style.css」などのファイルでエラーを起こしやすいようなので、エラーが起きている場合はサーバーのデータ管理画面か、FFFTP を使用していればエラー内容のＵＲＬにファイルのパスが書いてあるはずなので、そちらを参考に対象のファイルまで到達してください。
ここでの注意はWindows の場合、メモ帳は絶対使用しないようにして下さい。
余計な空白が入って別のエラーが出たり、最悪管理画面が真っ白になったりする可能性があるので、「TeraPad」などのテキストエディターをしっかりと使って書き込むように注意です。
混在コンテンツの改善方法④ 「Search Regex」を使用して「http」を一括変換
■プラグイン有効後の設定方法
- 「Search pattern」➜「http;//」と入力
- 「Replace pattern」➜「//」と入力
- 「Search」をクリックし、対象を確認
- 「Replace & Save」 で置換完了
このプラグインを使用することによって、エラーを起こしている「http://」を一括で「https://」に変換してくれます。
「え、じゃあ最初からこれ使えば良いんじゃないの？」
と思われるかもしれませんが、このプラグインだけではまかなえない部分があるようで、一括変換をしても「保護されていない接続の扱い」になる場合があります。
なので、このプラグインは有効に使えますが過信はしないようしたほうがベターです。
混在コンテンツの改善方法⑤ 「Really Simple SSL」を使用する
このプラグインを使用すると、カンタンにエラーを起こすことなくあなたのサイトをＳＳＬに対応するようにしてくれます。
いや、待ってくださいね？
これも使用しないほうがいい理由があるんです。
以前 Google の Page Speed Insight の記事を上げた時に、ページ表示の速度はＳＥＯ上大切ですよというお話をしました。
-
【BLOG】速度が2倍に？PageSpeedInsightsでモバイルだけ遅い人の改善策
続きを見る
確かにこのプラグインを使用すれば容易にＳＳＬ化させることが出来るのですが、Google の Pege Speed Insights でスピード計測をした時にスコアが著しく落ちる傾向にあるんです。
僕もＳＳＬがうまく行かなくてしばらく Really Simple SSL を利用していたのですが、ページ表示速度が落ちるとなってはＳＥＯ的に良くないので、解除することにしました。
恐らくエックスサーバーでのＳＳＬ化と Really Simple SSL ダブルで使用していた事で、処理を圧迫しページの表示速度を落としていたのだと思います。
最終手段で Really Simple SSL を使用することを推奨しているブログは他にもありますが、二重で使用するとページ速度が落ちる可能性があることを記載していません。
そのため、あえてこのブログで注意喚起も含めてお伝えさせていただきました。
もし、使用する場合はサーバーサービスのＳＳＬ化サービスを無効にしてから使用するように注意して下さい。
混在コンテンツの改善方法⑥ エラーを起こしている画像の再アップロード
僕が最終的に解決できた方法はアップロードのし直しでした。
WordPress サイドバーのメディアで該当の画像を完全に削除してアップロードを再度行うと改善されました。
画像を再度アップロードすることによって「https://」にＵＲＬが書き換えられ、正常な状態としてインポートされるようです。
しかし、ぼくの事例としてはエラーを起こしている場所が、ダッシュボードの右上に表示されているプロフィールのアイコン画像でした。
エラー場所も「index.php」のプロフィール画像ということしか書いておらず、サイトのTOPページはＳＳＬ化できているのに、ダッシュボードはできていないという不思議な状況で苦労しました（汗）
同じ境遇だった場合は、画像の再アップロードを是非試してみて下さい。
■補足事項
今回僕が解決した方法は「画像の再アップロード」でしたが、
ここに至るまで紹介した方法をすべて試した上での再アップロードです。
Search Regex を使用しても感知されず、サーバー上で画像を消してみても
特に変化はなくエラーが出続ける状態でした。
WordPress のプラグインは優秀なものがとても多く、僕たちのブログ更新や
サイトの構築などに大きく力添えしてくれるものですが、過信しすぎると
問題を解決するために必要な「広い視野」が狭くなってしまうので、
その点を考慮しながら利用したほうが、何かトラブルがあった際にすばやく対処
出来るようになるかと思います。
ＳＳＬ化は早ければ早いほど苦労しなくていい
以上、今回のテーマは「【解決！】WordPressのSSL化での混在コンテンツの直し方！」でした！
無事にＳＳＬ化はできましたか？
今回解決するために冒頭にも書きましたが、１０時間ほどかかりました。
ドメインの評価にも影響してくるＳＳＬの設定なので、できれば WordPress を挿入した時点で済ませておけばよかったですね・・・
サイトを作ってから時間が経過すればするほど、めんどうな作業が増えるので、早いうちに済ませておいたほうが良さそうです！
１０時間もパソコンの作業に手を取られて、他の作業が全くできない状況にイライラされる場合もあると思うので、このページで少しでも早期改善の力になれたなら幸いに思います！