アドレスバーの「保護されていない通信」の原因と直す方法

SSL漫画Cocoon
スポンサーリンク
るんぴあ
るんぴあ

自分のサイトを見てみたんだけど…URLについてる、この「保護されていない通信」って何?なんかヤバいやつ?(←語彙・笑)

URL部分
コップ先生
コップ先生

それは、おぬしのサイトのアドレスがhttpsになっていないからGoogle Chrome(グーグルクローム)が警告を出しておるんじゃよ。SSL設定すれば「保護された状態」になるぞ。

るんぴあ
るんぴあ

ちょ…ちょっと待て…!httpてなんじゃ、SSLってなんじゃぁぁ!(言葉自体は聞いたことある気がするけど…)

コップ先生
コップ先生

SSLの意味とその設定法について、一緒に見ていくとするかのぉ!

この記事を読んで分かる事

SSLとは何か

SSL設定の確認法

WordPress(ワードプレス)でのSSL設定方法

上手く直らなかった時の原因のチェック方法

WordPress(ワードプレス):「保護されていない通信」が出ていたらSSL有効化をしよう

SSL絵

SSL(Secure Sockets Layer)とは、インターネット上の通信を暗号化して送受信する仕組みのことをいいます。

インターネット上でやり取りされる個人情報やクレジットカード情報、ログインのIDやパスワードなどの情報を第三者から守るために必要な仕組みです。

SSLを導入することで悪意のある第三者からの盗聴やデータの改ざんなどを防げます。



SSL導入したサイトとしてないサイトの違いは一目瞭然で、ウエブサイト画面のURL表示欄に鍵マークがついていればSSLを導入しているサイト、「!」マークもしくは「警告」が出ていればSSL導入されていない状態です。

るんぴあ
るんぴあ

あ、そういえばエックスサーバー設定の時【SSL設定】とやらをした気がするんだけど…

コップ先生
コップ先生

おお、思い出したか!(笑)そうそう、それじゃ。一番最初のSSL設定はエックスサーバー(前準備)でやっておるんじゃよ!

るんぴあ
るんぴあ

え!SSL設定したのに、「保護されていない通信」ってどういうこと?サーバーの方でちゃんと設定できてなかったということなの?

コップ先生
コップ先生

落ち着くんじゃ~!実は、サーバーでSSL設定を行ったら、Wordpress(ワードプレス)側でも設定をしないといけないのだよ!ちゃんと保護の鍵マークがつくように、これから一緒に設定していこう!!

1.SSL設定の確認

自分のウエブサイト(ワードプレス)のドメインがSSL設定されているか確認する。

URLから確認する(Google Chrome)

ブラウザURL表示部分の『警告アイコン』をダブルクリックすると以下のような情報が見れます。

SSL証明
証明書の横に(有効)と表示されていれば、そのドメインにSSL証明書が発行された状態(サーバーで設定完了している)です。(無効)である場合は、エックスサーバーでSSL設定が必要です。

※エックスサーバーでのSSL設定⇒こちら

エックスサーバーで確認する

エックスサーバーでSSL設定ができているか確認する手順は以下の通り。

※未設定であれば『エックスサーバー無料独自SSL設定』をしましょう。

XサーバーSSL


①Xserverアカウントにログインして、『ご契約一覧』のサーバ部分の【サーバー管理】をクリック

②Xserverのサーバーパネルが開くので、『ドメイン』の項目内にある【SSL設定】をクリック

確認Xサーバー


③『ドメイン選択画面』がひらくので調べたいドメインの【選択する】をクリック

④【独自SSL設定追加】をクリックして画面を確認する。

(設定済み)のコメントが入っていたら、SSL設定はできています。
(設定済み)のコメントがなく、右下に【確認画面に進む】アイコンがでていたら、それをクリックして、SSL設定を進めてください。
コップ先生
コップ先生

『サーバーでドメインのSSL設定ができている』のを確認できたら、Wordpress(ワードプレス)でSSL対応の処理をしていくぞ!

2.Wordpress(ワードプレス)でSSL対応を有効化する

WordPress(ワードプレス)のダッシュボード【設定】>【一般】から『Wordpressアドレス(URL)』と『サイトアドレス(URL)』を変更してSSL対応を有効化する。
SSL設定

①ダッシュボード【設定】>【一般】を開く

②Wordpressアドレス(URL)とサイトアドレス(URL)にあるアドレスの
『http:』を『https:』に書き換える


③【変更を保存】をクリック


④Wordpressのログイン画面になるので、ログインしなおして完了

3.Cocoonテーマ設定でSSL対応を有効化する

Cocoon(コクーン)テーマのSSL対応を【Cocoon設定】>【その他】からSSL対応の有効化する。
SSL有効化
 
①ダッシュボード【Cocoon設定】をクリック
 
②【その他】をクリック
 
③【内部URLをSSL対応(簡易版)】の□に✔をつける
 
④【変更を保存】をクリック
 
 

4.エックスサーバーで【.htaccess】を変更する

エックスサーバーアカウント画面にある『サーバー』>【ファイル管理】から『.htaccess』を変更する。

間違えて『.htaccess』内のデータを消すとエラーでサイトが使用できなくなるので、あらかじめコピーを取っておきましょう。

ファイル管理
 
①Xserverアカウントページにログイン>『サーバー』の【ファイル管理】をクリック
 
②Xserver WebFTPが開くので、【SSL対応したい対象のドメイン名】をクリック
 
 
ファイル編集
 
③『public_html』をクリックする
 
④『.htaccss』の□に✔をして、右にある『ファイル操作』の【編集】をクリック
 
⑤開いたhtaccessファイルのコードをあらかじめメモ帳などにコピーアンドペーストして保存しておく
 
⑥ファイルの一番下に【このコード↓】をコピーアンドペーストして入れ込む
 
⑦【保存】をクリックして完了
 
コップ先生
コップ先生

以上でSSLの有効化は終了じゃ。おつかれさま!

5.SSL対応できたか確認する

最後にブラウザのURL記入欄にSSL有効化したURLを入力し、鍵マークがついているか確認しましょう。

 

URL欄に【https://〇〇〇.〇〇(あなたのサイトのURLアドレス)】と入力して鍵マークつきのあなたのウエブページが出てきたら、SSLが有効化された証です。

SSL設定でも「保護されていない通信」になる場合の原因チェック方法と対処法

SSL設定を見直しても直らない!!!そんな時は、以下の原因が考えられます。

一つづつチェックしてみてください。

「保護されていない通信」になる原因(例)

すべてのページで「保護されていない通信」になる場合

・SSL設定を再度見直す⇒「サーバー」、「Wordpress」両方

・プラグインをすべて無効にしてみる⇒再度有効化にすると直る事もある

・すべてのページに使用している画像やASPが原因の場合がある

一部のページで「保護されていない通信」になる場合

・サーバーやWordpressのSSL設定は問題なさそう

・「保護されていない通信」のページで使っている画像やASPの確認を行う

「保護されていない通信」の原因を確かめよう

Google Chromeでの確認方法です。

①「保護されていない通信」になるページ上で右クリックする


②「検証」をクリック

③画面右にでてくる小さい画面の「Console」をクリック


④コードの中にhttpというコードがあればそれが原因なので、それをクリック
※コードはいじらない=あくまで確認のために開ける


⑤原因の画像などが見れる

画像に原因があったあった場合は、ダッシュボード【メディア】>【ライブラリ】から画像のリンクアドレスを確認、httpをhttpsに変更する

※httpになっている画像を使用している場所(アイコン、ヘッダー、アイキャッチなど)すべての設定か所を確認する(使用しているもののリンクアドレスは自動で変わらない)

仮にASPの画像がhttpだった場合は変更が出来ない(※現在では多くのASPがHTTP化している)

その場合はテキストタイプに差し替える…などで対応、もしくはそのままで運用する

【WordpressでのSSL設定方法】まとめ

まとめ
るんぴあ
るんぴあ

コップ先生のセクシー秘書リムが、当記事のまとめをご案内します!

セクシー秘書
セクシー秘書

お任せください。では参ります。

WordPress(ワードプレス)でのSSL有効化作業は…

契約のサーバーでドメインのSSL証明書を発行してある場合は、WordpressでのSSL有効化作業が必要です

SSLとはウエブページ上で行われるやり取りを暗号化により悪意のある第三者のアクセスを防ぐ仕組みです

WordPress(ワードプレス)⇒Cocconテーマ⇒エックスサーバーの順でSSL有効化のための作業を行います ※事前にSSL証明書の有無を確認してください

WordPress(ワードプレス)のダッシュボード【設定】>【一般】を開く
   ↓
WordPressアドレス(URL)とサイトアドレス(URL)にあるアドレスの『http』を『https』に書き換える
   ↓
【変更を保存】をクリック
   ↓
WordPressのログイン画面になるので、ログインしなおす
   ↓
ダッシュボード【Cocoon設定】をクリック
   ↓
【その他】をクリック
   ↓
【内部URLをSSL対応(簡易版)】の□に✔をつける
   ↓
【変更を保存】をクリック
   ↓
Xserverアカウントページにログイン>『サーバー』の【ファイル管理】をクリック
   ↓
Xserver WebFTPが開くので、【SSL対応したい対象のドメイン名】をクリック
   ↓
『public_html』をクリックする
   ↓
『.htaccss』の□に✔をして、右にある『ファイル操作』の【編集】をクリック
   ↓
開いたhtaccessファイルのコードをあらかじめメモ帳などにコピーアンドペーストして保存しておく
   ↓
ファイルの一番下に【指定のコード】をコピーアンドペーストして入れ込む

   ↓

【保存】をクリックて完了
セクシー秘書
セクシー秘書

お疲れさまでした。SSLをしっかり有効化して安全なサイト管理、しましょうね♡

タイトルとURLをコピーしました