ワードプレスで「保護されていない通信」と表示されてしまう時の対処法

ワードプレスのSSL対応したのに鍵マークがつかない対処法ワードプレス
この記事は約8分で読めます。

ワードプレスでサイトをSSLの設定をしたのに、URLの横に「保護されていない通信」と表示されてしまう時の対処方法を紹介します。

SSL化されていない場合

SSLに対応していないとブラウザのURL表示の欄に「保護されていない通信」と表示されてしまう。

サーバやワードプレスのサイトアドレスを「http」から「https」に変えたのに、以下のような症状が出てしまう場合の対応方法です。

  • ブラウザのURL表示の横に「保護されていない通信」と表示される
  • URLの隣に鍵マークがつかない

こちらに当てはまる場合は紹介する方法で解決する可能性が高いです。

Wordpressで作業をする場合、念のためバックアップをとることをおすすめします。もし作業後、エラーが出るようでしたら、バックアップファイルを元に復元してください。

スポンサーリンク

SSL設定をしたのに「保護されていない通信」と表示される時の対処方法

ワードプレスでSSLの設定をしたのにサイトを表示したら「保護されていない通信」と表示されてしまったら、Google Chromeの検証モードを使うと原因がわかる可能性が高いです。

Chromeの検証モードはパソコンのみですので、スマホでは確認できないので注意。

Macなどで普段SafariなどGoogle Chromeを使っていない場合は、先にGoogle Chromeをダウンロードしておきます。

ダウンロード Google Chromeのダウンロード

手順1:Google Chromeの検証モードで状況を確認

まずGoogle Chromeで自分のサイトを表示させたら、右クリックをします。

写真のようなメニューがでてきたら下の方にある「検証」を押します。

自分のサイト>右クリック>検証をクリック

検証を押したら何やらプログラマーの方などが使いそうな画面が出てきますので、真ん中のメニューから「Security」を選びます。

検証モードの「Security」をクリック

サイトが正常にSSL設定できていれば、写真のように全て緑色の表示になります。

サイトが正常にSSL化している場合

サイトが正常にSSL設定できていないようであれば、写真のようにSSLで設定できていない部分が赤字で表示されます。

サイトのコンテンツが一部SSLに対応していないと赤字で表示される

ここまで確認したら一旦検証モードは閉じます。

手順2:ソースコードから「http」になっているコンテンツを探す

次にソースコードを表示させ、サイトのどのコンテンツがhttpになっているか、をhtmlのコードから検索を行い確認します。

ソースコードって何…という方でも表示させて検索するだけなので、難しい知識は必要ありません。

ブラウザで自分のサイトを表示させた状態から、また右クリックをします。

自分のサイトを開いて「右クリック>ページのソースを表示」をクリック

表示されたメニューに「ページのソースを表示」の項目がありますので、こちらをクリックします。

「ページのソースを表示」をクリックした後の画面

写真のような画面が出てくると不安になる方もいらっしゃいますが、なにかコードを書くことはしませんのでご安心ください。

ここからページのブラウザの一番上のメニューから「編集>検索>検索」をクリックします。

Google Chromeの編集>検索>検索を選びます。

検索窓が出てきますのでそこに「http://自分のURL」を打ち込みます。

検索をすると右側の「/」のところに該当の部分があると「今選択している箇所/全体の検索ヒット数」で表示されます。

例えば「1/261」であれば261箇所中の1つ目、という意味ですね。

該当の部分はオレンジか黄色でハイライトされます。

手順3:httpsになっていないコンテンツを再度アップロードして再設定

ここで「http」になっている自分のサイトのコンテンツでファイル名を確認して、設定しているところを確認します。

ハイライトされたURLを確認して、最後の方に「.png」「.jpg」などがあれば画像ファイルという意味です。

「.png」「.jpg」などの前の部分がアップロードしたファイル名なので、SSLにする前にアップロードしているコンテンツがあれば、該当のものをアップロードし直す&新しくアップロードした画像に入れ替えます。

もしhttpでも自分のサイト以外のURLであれば関係はありませんので、無視して大丈夫です。

設定が終わった後は新しいブラウザを開いてURLを打ち込んでみてください。URLの隣に鍵マークがつけば全てhttpsに対応するはずです。

SSL化されている場合のブラウザ表示

ここで鍵マークつかない場合は他にも残っている可能性があるので、同じ手順で公開しているページを1つずつ調べないといけないかもしれません。

スポンサーリンク

ワードプレスでSSL設定後に保護されていない通信と表示される理由

ワードプレスでサイトをhttpsで始まるSSL設定をしたけど、ブラウザに「保護されていない通信」と表示されてしまうのは、一部のコンテンツがSSL(https)に対応していない可能性が高いです。

通常ならワードプレスでサイトが正常にSSL化されている場合、自分のサイトをみるとブラウザのURLの左側に鍵マークが表示されます。

SSLの設定がうまく行っている時の表示

SSLに対応していれば鍵マークが表示される

ところがサイトの中のコンテンツ全てがSSLに対応できていないと、URLには「保護されていない通信」と表示されてしまうのです。

保護されていない通信と表示されているURL

ここでのコンテンツというのは、投稿・固定ページ・画像・動画のことを指しています。

スポンサーリンク

ワードプレスでSSLと非SSLのコンテンツが混在する理由

ワードプレスでサーバーもサイトアドレスなどもSSL化したのにも関わらず「保護されていない通信」と表示されてしまうのは、ワードプレスでロゴやタイトル画像を設定した後にSSLの設定をした場合です。

記事をある程度書いてしまった後であればSSLにした時に「Search Regex」と言ったプラグインで、記事の中にある「http」という記述を「https」に変換することができます。

「Search Regex」の使い方についてはこちらのサイトを参考にされてください。
参考サイトWordPressサイトをhttpからhttpsにSSL化する方法 – creive
ただ少し注意しなければいけないのが以下の2つ。
  • ロゴ画像
  • タイトル画像

「Search Regex」などの一括変更ツールでは、テーマやワードプレスのカスタマイズにある画像はhttpからhttpsへ変換されないようです。

今使っているアフィンガー5/WING、cocoonでもこの2つをSSL設定より前にすると「保護されていない通信」と表示されてしまいました。※2020年4月現在

アフィンガー5(Wing)を使っている場合

アフィンガー5(Wing)の場合は、ロゴ画像をSSLの設定の前に行うと「保護されていない通信」と表示されてしまいました。

設定場所は「外観>カスタマイズ>ロゴ画像」です。

アフィンガー5(Wing)>カスタマイズ>ロゴ画像

Cocoonを使っている場合

Cocoonの場合はCocoon設定の中にあるAMPロゴという項目に入っている画像が、SSLに対応しない可能性が高いです。

設定する場所は「Cocoon設定>AMP>AMPロゴ」です。

Cocoon設定>AMP>AMPロゴ

スポンサーリンク

まとめ

ワードプレスでSSL化、httpsに対応したけどブラウザでみたら「保護されていない通信」もしくは鍵マークが表示されない時の対処法をご紹介しました。

1つのドメイン(URL)にhttpとhttpsの両方のコンテンツが混ざっていると、完全にSSLにはならないので注意が必要です。

特にある程度デザインのカスタマイズなどを終えた後にすると、画像だけhttpsに対応せず、対応していないコンテンツを探すのに時間がかかることもあります。

またSSL化はサイトアドレスの設定を変えたりするので、理想はワードプレスのインストールの後にすぐにやった方がトラブルが少ないです。

SSLに対応しているけどうまくhttpsにならない、と言った場合はこちらの対処方法を試してみてください。

管理人
あきむら

IT女子/Webディレクター/Webライター
ITの修士号を持つリケジョで中学校1年生でホームページを作ってからサイト運営は20年ほど。2年間のフリーランス生活でITの知識を活かしてワードプレスのサポート60件以上。現在は会社員・フリーでWebディレクターやってます。

あきむらをフォローする
ワードプレス
IT女子のWordpress保健室
タイトルとURLをコピーしました