「https」なのになぜ？「このサイトへの接続は保護されていません」表示の解決方法

この記事はエックスサーバーでWordpressサイトを作成している筆者の解決した内容をあげています。
プラグインは使用しない方法です。

ブログ運営を開始したばかりのブログ初心者のななえです。

ここ数日ずっと気になっていたことがありました。

自分のサイトを表示したときに画面上のウェブアドレスの横に出てくるマークが
他のサイトは下の画像の黒いカバンのようなマークなのに私のサイトは○の中にiと書かれたマークだったのです。

ウェブサイト横のマークはそのサイトが安全か確認する為のマーク

インターネット上のアクセスしたサイトが安全かどうか確認するためにchromeでは、サイトが安全ではない場合やプライバシーが保護されない場合に警告が表示されるようになっています。

出典：Google

○iマークは保護されていない通信とグーグルに記載があり
私のサイトって危険なの？読んでくれてる人に不安をもたらしてない？と急に不安になってきました。

http://とhttps://の違い

サイトによってはhttp://を消してhttps://と入力すればより安全なバージョンにアクセスできますと記載がありました

http://とhttps://の違いは通信が暗号化されていないか暗号化されているかの違いで、https://が暗号化されているということらしいです。

私のサイトのURLはどっちだろう？と見てみると…
https://でした。

暗号化されて保護されてるんじゃないの？じゃあなんで○iマークなのだろう？

頭の中は謎だらけ

ググっていくとただhttps://になってるだけでは駄目でssl証明書なるものが必要とのこと
今時は契約してるサーバー会社が代わりに取得してくれることもあると書いてありました。
私はエックスサーバーなのでとりあえずエックスサーバーにログインしてみました。

ご利用中のssl証明書はありませんの表示に混乱

アカウントにログインするとご利用中のssl証明書はありませんとの表示がありました。
自分で取得するのかなあ？と色々見てみますが料金が年間で安くても1000円かかるとか出てきて、でもエックスサーバーで調べたら無料のssl証明書があるとも出てきて悩みました。

分からなすぎてサーバー会社に直接問い合わせ

初心者の自分には意味が分からなさ過ぎて、エックスサーバーさんにメールで問い合わせしてみることにしました。
問い合わせの際、アカウントにログインしてから問い合わせボタンを押したほうがアカウントIDなどの入力の手間が省け楽でした。

↓実際のメールのやり取りです
(青文字がななえ
黄文字がエックスサーバーの担当者さん)

自分のサイトnanaemon.comについて無料のssl証明書の発行をしたいのですがどういう手続きをすればいいでしょうか？

すでに設定されている？
メールしてから何もいじってはいないから最初からssl証明書は付いているのかな？
よく分からないからもう担当直入で聞いちゃえと再度問い合わせました。

私のサイトを開くと
「このサイトは完全には保護されていません」と表示が出るのですがssl証明書の部分は問題はなく他の問題点があるということでしょうか？

SSL証明書自体は、設定が完了しております。
「このサイトは完全には保護されていません」と表示されるとの
ことでございますが、こちらは「https://～」へリダイレクトする
常時SSL化の設定を行えば解決するかと存じます。
設定方法の詳細については、以下のページをご参照ください。
(下記の常時ssl化設定をしてみるに続きます)

このサイトへの接続は保護されていません表示の解決方法

それでは具体的に私が行った3つの解決法をご紹介します。

常時ssl化設定をしてみる(エックスサーバーの場合)

▼エックスサーバーマニュアル：Webサイトの常時SSL化
https://www.xserver.ne.jp/manual/man_server_fullssl.php

教えてもらったマニュアルをご紹介します

１．上記のReから始まる文章をhtaccess編集で追加
すでに別の文章が記入されていてどこに挿入すればいいかわかりませんでしたが挿入するときは一番上に挿入すればいいと教えてもらいました。

２．Wordpress管理画面にログインして設定＞一般にあるWordpressURLとサイトアドレスURLをhttp://からhttps://に変更する

設定は以上でした。
手取り足取り教えてくれたエックスサーバーの方には本当に感謝感謝です。
レスポンスも迅速で本当に助かりました。

レンタルサーバー エックスサーバー

いわれたことは全てやったのでよし、チェックしてみようと意気込んでスマホを確認したもののマークはまだ変わってませんでした。。

自分のサイト内にhttp://接続が使用されている場合はhttps://へと変更する

下記の画像の通りなんですが自分のブログの画像に不備があるのかと思い投稿一覧編集を確認したら
添付した画像がhttp://表示になっていたため全てhttps://に変更しました
まだ13記事だったので手作業で全て直しました

これが最後の砦よ…と挑んだのですが

スマホで確認した所まだ直ってません(涙)

プラグインで一括で直す方法もあるらしいのですがなぜか気が進まなくて
もう一旦諦めて放置しようかな。。と思いだしました

Chromeアプリの更新をしてみる

ふと夫のスマホから自分のブログを確認してみました。

すると、マークが変わっていて
ちゃんとセキュリティが守られてるマークになってました！

今度は長女のスマホでも確認
こっちもきちんと変わっている！

私の携帯がおかしいのか？
Chromeのクッキー全削除しましたが変わりません。

諦めきれずChromeをいじってると
アプリの最新版がありますとの表示が。

アプリの更新をしたら私のスマホからも鍵マークに変わりました。

これにて無事にhttps://に変更が出来たのでした。

なんとも言えない達成感がありましたがそれよりも一日使った疲れのほうが勝って
嬉しいんだけどテンションは上がらない
でも満足感もあるという不思議な気持ちになりました。

何してもマークが変わらない!とお困りの方はChromeの更新というのもお試しください。

助けを求めググったら正解に辿り着く世界
本当にすごい世界だなあと思います。
私に知恵をくれる方々本当にありがとうございます。

またこれからも一歩一歩学んでいきブログ運営頑張っていこうと思います。