SSLって何?「https」になっていますか?必ず設定しておきたいセキュリティ【エックスサーバー編】

SSLって何?やらなきゃダメ?

今日は大事な、
セキュリティの設定(SSL)についてお話しますね。

ブログ、ホームページのアドレスを

「http」から「https」に変更する設定のことです。

これからWordPressでブログを作ろうかな~ と
計画している方へ

WordPressをインストールするとき、
ぜひこの、SSL設定は一番最初にやっておくことを
オススメします^^

 

 

httpsとhttpの違いとは

ネットでお買い物したことはありますか?

住所はここ、カード情報はこれ…と
入力してデータを送っていますね。

大切な個人情報データを、インターネットを通じて
「送信」しているわけです。

 

そのデータ送信、安全でしょうか?

たとえばですよ。

その送信方法が「ハガキ」だったらどうでしょう?

 

ハガキの画像

中身が丸見えですね。

誰でも個人情報を盗み見ることができてしまいます。

 

これが、「http」の状態です。

その通信を傍受する悪い人から見ると
送信したデータが丸見えになってしまうんです。

 

いまどき、ハガキで個人情報を書くときは、
他から見えないように保護シールを貼りますよね。

その、保護シールの役割を果たすのが
「SSL」(えすえすえる)というセキュリティ設定です。

 

「SSL」という設定をしておけば
シールが貼ってあるようなもので(※注釈)

途中で他の人が見ても読めない状態にできるんです。

 

※正確に言うと、暗号化されています。

 きちんと暗号化されているサイトは
「httpsという表示になっていますよ。

 

SSLになっているか確認する方法

 

あれ?私設定したっけ?

わからないときは、ご自身のページのアドレスを見てください。

 

http 暗号化していない場合

セキュリティなし

httpにSがついていないか、
アドレスの横が「!」マークになっています

 

 

https 暗号化設定済み

セキュリティあり

安全な時はhttpsと表示され、
のカギのマークがついています。(※Chromeの場合)

 

※2019年3月追記

Chromeがバージョンアップして、表示がどちらもグレーに変わりました。

グレーでも、ちゃんと保護されているのでご安心くださいね。

 

ダメな時は「保護されていない」と出てきます。

SSL設定していないサイトは、
「危険なサイト」とみなされ、検索上位に上がりにくくなるので
まだの方はお早めに対応しておきましょうね。

 

httpsに変更する方法

SSL設定は、WordPressだけではなく、
まず、サーバーで設定をする必要があります。

エックスサーバー、お名前ドットコム、
ロリポップ・・・などなど、いろいろなサーバーがあり
サーバーによって画面が違います。

昔は有料のサーバーが多かったんですが
今はほとんど無料でやってくれるようになりましたよ^^

 

さくらサーバーの方はこちら

SSLって何?サイトセキュリティ設定のやり方【さくらサーバー編】

 

ロリポップの方はこちら

SSLって何?セキュリティ設定のやり方【ロリポップ編】

 

こちらの記事では、エックスサーバーでの
設定方法をご案内しますね。

 

エックスサーバーのSSL設定

エックスサーバーの
「サーバーパネル」というページに
「SSL設定」があります。

SSL設定画面

 

 

SSL設定を開くと、「ドメイン選択画面」という
アドレスの一覧表が見れます。

ここで、SSLにしたいドメインの
右側の「選択する」を押します。

SSL設定画面2

 

 

次の画面では
「独自SSL設定の追加」を押します。

SSL画面3

 

右下の
「独自SSL設定を追加する(確定)」を押します。

SSL画面4

 

このあと少し待つと、設定が完了します。

※ 設定時の注意事項

 

SSLが反映するまで、2〜3時間(またはそれ以上)かかることがあります。
その間ページが表示できなくなるので、
既にページを公開している方は、アクセスの少ない時間帯に設定することをおすすめします。

反映されたら、WordPress側の設定です。

 

WordPressの管理画面からhttpsを設定する方法

これカンタンです。
アドレスにSを書き足すだけです^^

WordPressの管理画面から

「設定」⇒「一般」をひらくと
サイトのアドレスが2つ書いてあります。

「WordPress アドレス(URL)」 
「サイトアドレス (URL)」

の、2つです。

ワードプレスSSL設定

 

ここの

「 http://… 」と書いてあるところの

p」の後に小文字の「」をつけて

「 https://… 」

 

に変更します。

 

「s」をつけたら

変更を保存ボタン

「変更を保存」ボタンを押してください。

これだけでOKです。

※この設定をして、サイトにSがちゃんと
表示されるまでに時間がかかることもあります。

 

完了できたら、最後の仕上げをしましょう^^

「リダイレクト」設定です。

ちょっと難しいので、苦手な方は
お使いのサーバーのサポートを受けた方がご安心かと思います。

 

httpにアクセスしてきた人をhttpsに転送させる

せっかくセキュリティの設定をしても、
もし、お客様が「http」のアドレスでアクセスをしてきたら
暗号化なしの通信になってしまいます。

 

なので

「http」でアクセスして来た人も
「https 」に自動的に転送する設定に

しないといけません。

 

 

アクセス管理ファイル .htaccess

アクセスを管理する、
「.htaccess」
というファイルに転送設定を書き込みます。

(ドット エイチティー アクセス と読みます。)

 

こちらもサーバーごとに異なりますので
まずはエックスサーバーで説明しますね。

管理画面の中に
「.htacsess編集」と言うのがあります

リダイレクト

 

 

開くと「ドメイン選択画面」になるので
目的のドメインの横の「選択する」をクリックしてください。

リダイレクト2

 

 

すると、.htacess編集 と言う画面が出ます。

リダイレクト3

上級者向け、とか脅してきますが
大丈夫ですよ^^

 

すると、何か入力する空欄が出てきますので
リダイレクト5

 

ここに、「httpでアクセスが来たら、httpsに転送してね」という意味のコードを書き込みます。

秘密の呪文

コピーするときはこちらからどうぞ↓

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

 

貼り付けができたら、右下の

.htaccessを編集する(確認)を押します。

 ↓

.htaccessを編集する(確定)に変わるので、
再度押して完了です♪

 

 

 

【2018年5月追記】

今までは、この後さらに「画像のリンクを全部修正」という操作が必要だったのですが
今ではWordPressの方で自動的に置換してくれるように変わりました♪

なので、この「2:画像のリンクを全部修正する場合」ステップはやらなくて大丈夫です!

ですが、時々トップページのウィジェットに貼ってある画像や
リンク、テーマ独自の設定に書き込んだリンクは自動的に変更されない場合があるので
こちらの記事を参考にしてください。

 

もしうまく変更されないときは
こちらの方法を試してみて下さい。
 ↓ ↓

SSL化!したつもりでできていないかも・・・?表示を確認してみましょう

 

2:画像のリンクを全部修正する場合

 

いままでずっとセキュリティなしで
ブログを書いていたとしたら

時々、画像を入れたりしますよね。

 

その画像は、実は裏では
「img  src=”https://wp-firststep.com/wp-content/uploads/2017/09/Xxxxxxx.jpg”/」
というような、プログラムが書いてあるんです。

 

「img  src=”https://wp-firststep.com/wp-content/uploads/2017/09/Xxxxxxx.jpg”/」

このように画像すべてに

「http」から始まるアドレスがついているので

 

これを全部、httpsに

直さないといけないのです。こりゃ大変ですよ。

しかし、それでさえも
一発でやってくれるプラグインがあるのです!

プラグイン、本当にすごいですね。

 

ここでは、プラグインの
名前だけ紹介しておきますね。

Search Regexといいます。
これは、文字などを
「置換」してくれるプラグインです。

これを使って

「http」を「https」に
全部置き換えてください。

と設定すれば一発なのです^^

プラグインSearchRegex

お困りの時はぜひ
使ってみて下さいね。

少し長くなりましたが
今日は大切な「セキュリティ」のお話でした。

 

あなたのサイトはSSLになっていますか?
一度チェックしておいてくださいね。

 

WordPressに関するご質問にお答えします。
こちらのフォームから
お気軽にお寄せください^^
https://wp-firststep.com/questionbox/