WordPressサイトをhttps化して「保護されていな通信」を消す方法【Xサーバー】

https://hoshizuki-design.com/wp-content/uploads/2020/06/aicon003.png
勉強中

サイトURLの欄に「保護されていな通信」と出ているのでどうにかしたい・・


https://hoshizuki-design.com/wp-content/uploads/2020/04/aicon001.jpg
aiko

これはSSL化という設定が行われていない時に表示される現象です。
すぐに対応した方がいいですね。
簡単に設定できるので安心して下さい!

こんな悩みを持った方向けの記事です

  • 自分のサイトを確認するとアドレスバーに「保護されていない通信・・」と表示があるので消したい
  • エックスサーバーを利用しているけど、消す方法があるなら知りたい

この記事でわかること

  • エックスサーバーで無料独自SSL化に設定する方法
  • 「保護されていない通信」を消す方法
  • 常時SSL化にする方法

この辺りを順に解決していきます。

そもそもなぜこのような「保護されていない通信・・」の表示が出るかというと・・

2017年8月頃にGoogleより、警告があったのですが、その内容というのは簡単にいうと、
サイトURLの冒頭にある「http://・・・」を「https://・・・」にしてねというものです。

私が運営している「自閉症サイト」を例にあげると・・
<改善前>

<改善後>

この対応はしなくてもサイト運営は問題なく行えるのですが、ユーザーからしたら安全性が低いと見られ、サイトへの訪問数が減り、サイトの評価や検索順位が下がる事で結果、SEOの弱いサイトになってしまいます

たったそれだけの事なのですが、あなどれない大切な設定なのです

WordPressサイトをSSL化して「保護されていな通信」を消す方法

SSLの機能について

SSL化とは上記でも述べたように、サイトURLの冒頭にある「http://・・・」を「https://・・・」にするという事です。
この「SSL化」はどのような役割があるのかを説明します。


大きくは3つの役割

  • 暗号化する(盗み見を防ぐ)
  • データの改ざんを防ぐ
  • なりすましを防ぐ

この3つがあります。
どれもサイト運営するには大切な機能なのです。

訪問者(ユーザー)としては、この機能をしっかり設定してくれているサイトは信頼性が高いと感じて、サイトの評価が上がるのでSEOにも有効になってきます。

この設定は必ずしておいた方がいいでしょう。

SSL(https)化して「保護されていない通信」表示を消す手順

大きくは簡単2ステップで完結します。

  • Step1.エックスサーバーパネルで「SSL設定」を行う
  • Step2.WordPressで設定を行う

Step1.エックスサーバーパネルで「SSL設定」を行う

①サーバーパネルにログイン→「SSL設定」をクリック

②SSL化したいドメインを「選択する」をクリック

*Wordpress簡単インストールの際に「SSL化」を同時に設定している場合は既に追加されていると思います。その場合は「Step2」へ進んで下さい。

③「独自SSL設定追加」タブをクリック

④サイトを選択して(基本www.ドメイン名でOK)、「確認画面へ進む」をクリック

⑤内容を確認して「追加する」をクリック
⑥「SSL設定一覧」タブをクリックして「反映待ち」になっていればOK
*反映待ちが消えるまでは次の作業は行えません。(約1時間ほどで消えます。)
*ここまでの作業だけでは「保護されていない通信」は消えないので注意して下さい。
「Step2.」の作業が必要になります。

Step2.Wordpressで設定を行う

https://hoshizuki-design.com/wp-content/uploads/2020/04/aicon001.jpg
aiko

エックスサーバーのSSL設定で「反映待ち」が消えたら次の作業に移ります。

①Wordpressサイドメニューの「設定」→「一般」をクリック

②一般設定画面でURL部分(2か所)を「http:・・・」から「https://・・・」に変更します。

https://hoshizuki-design.com/wp-content/uploads/2020/04/aicon001.jpg
aiko

ここで間違った入力をして保存すると、Wordpressにアクセスできなくなるため、入力は慎重に行いましょう!!


③「変更を保存」をクリックします。

④一旦ログアウトするので、再度ログイン情報を入力してログインします。

⑤管理画面のURL(アドレス)が「https://」になっていればOKです。

常時SSL(https)化の設定を行う方法

https://hoshizuki-design.com/wp-content/uploads/2020/06/aicon003.png
勉強中

まだ設定があるのですか・・?


https://hoshizuki-design.com/wp-content/uploads/2020/04/aicon001.jpg
aiko

そうなんです。これで終わりと思いきやなんですが、まだ大切な設定があります。あともう少しなので頑張って下さい。


上記の設定だけでは「http」と「https」の両方のURL(アドレス)にアクセスする事が出来る状態です。

それではまだまだURLとしては弱い状態なので、これを常に「https」の状態にする設定を行っていきます。

https://hoshizuki-design.com/wp-content/uploads/2020/04/aicon001.jpg
aiko

これは『常時SSL化をする』という事で、更にサイトの安全性を高める事になります。


方法としては、サーバー上にある「.htaccess」という大変重要なファイルを編集する必要があります。

この「.htaccess」ファイルは一つでも間違った記述をすると正常にアクセスできなくなるので、触るときは慎重に操作して下さい。

エックスサーバーの管理パネルの .htaccessを編集する手順

①サーバーパネルにログイン→「.htaccess編集」をクリック

②対象ドメインを選択する
③使用前の注意確認

慎重に進めましょう!

④「.htaccess編集」をクリックします。

⑤下記のコードを一番上の行に貼り付ける。
.htacessに書き加えるコードは、以下のとおりです。

  1. RewriteEngine On
  2. RewriteCond %{HTTPS} !on
  3. RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]


元々記述されているコードは1文字も触らないように注意して下さい。
⑥一番上に貼り付けたら、「確認画面へ進む」をクリックします。

⑦「実行する」をクリックします。

⑧「.htacessの編集が完了しました。」と出ればOK

常時SSL化されているか確認する方法

「http://自分のドメイン名」でアクセスします。
あえて「s」を外して検索します。

「https」にリダイレクトされて入れば完了です。

https://hoshizuki-design.com/wp-content/uploads/2020/04/aicon001.jpg
aiko

お疲れ様でした。「.htaccess」ファイルを触るのは「function.php」触るのと同じくらい緊張します・・
でも上級者向けの操作を行えたことは大きな自信になったと思います。

ここまで設定できればあとは、サイトを作り込んでいくだけ!!

まとめ

まずは、SSL(https)化して「保護されていない通信」表示を消してから、常時SSL(https)化の設定を行うまでをしっかり完了しておいて下さい。
少し面倒ではありますが、最初の設定はとても重要なので、この記事を参考にして頂けたら嬉しいです。
最後まで読んで頂きありがとうございました。

\一緒にWebデザイナーとして活躍するために勉強をしましょう!/

関連記事

  • コメント ( 0 )

  • トラックバックは利用できません。

  1. この記事へのコメントはありません。