WordPressでssl化する方法【 エックス サーバー編】

PC

今回は、SSL化をWordPressで設定する方法。(エックスサーバー編)のお話をしていきたいと思います。

 こんな人におススメ! 

  • SSL化って何?
  • SSL化の方法が知りたい
  • SSL化難しそう・・無理!!

SSL化って何?難しそう・・と感じる方いると思います。でも、私とすすめてもらうと とっても簡単です。安心して下さい。

これから動画や写真を見ながら一緒に、設定していきましょう。

今回の設定方法は エックスサーバーで契約している方のみ有効な方法です。

WordPressのSSL化とは?

インターネット上の通信を暗号化する技術のこと。第三者によってインターネット上のデータ通信を傍受・改ざんされる危険性を回避します。追加されるsはsecure(セキュア、「安全である」の意)の頭文字です。

引用元:[おりこうブログDS] SSLとは?セキュリティ上の意味や仕組み、メリットをわかりやすく解説!

難しそうですが簡単に言うと、 SSL化とはサイトを悪いやつから守ってくれる設定!という事です。

さらに!!

  • SSL化していないとGoogleの検索順位にも影響してしまう!
  • SSL化していないと見に来てくれた読者様にも不安感をあたえてしまう!

という理由でもあります。SSL化した方がよさそうですよね・・

エックスサーバーならば、無料で簡単に設定する事ができるので、是非やってみましょう!

まだドメインを撮っていない人はこちらを参考にして下さい。↓

space

SSL化の設定の仕方

動画でも説明しています

テキストで読みたい方はこのまま下にスクロールしてください。

SSL化する方法(テキスト)

まずは、エックスサーバーのログイン画面を開きます。エックスサーバー ログインしましょう。

sslの設定説明画面

「サーバー」の「サーバーパネル」を開きます。

sslの設定説明画面

サーバーパネルから  「SSL設定」を選びます。

sslの設定説明画面

①「独自SSL設定の追加」タブをクリックします。

➁SSL化したいサイトを選びます。

➂「独自SSL設定を追加する(確定)」をクリックします。

sslの設定説明画面

「SSL新規取得申請中です。しばらくお待ちください。」と表示されるので、 そのまましばらく待ちましょう。

sslの設定説明画面

しばらく待つと、こんな画面になります。 これでエックスサーバー側のSSL化設定は完了です!

sslの設定説明画面

つぎに WordPressのダッシュボードを開きます。

sslの設定説明画面

ダッシュボードを開いた状態で、URLの部分を確認すると、 まだSSL化が出来ていないので「保護されていない通信」と表示されています。これを「保護された通信」に変える設定をします。

sslの設定説明画面

ダッシュボードから左側にある 「設定」をクリックします。

sslの設定説明画面

ここの、「WordPressアドレス(URL)」 と 「サイトアドレス(URL)」 のURLに  http のあとに 「s」 を付けて、「https」 に変更します。

sslの設定説明画面

変更出来たら、 下までスクロールして「変更を保存」とします。

sslの設定説明画面

変更を保存したら、ログイン画面になります。

sslの設定説明画面

注意!焦らないで!

もうすでに記事をたくさん書いているサイトの場合、一時的にサイトにアクセス出来なくなったりする場合があります。ですが、一時的な事なので、そのまま1、2時間待ってみましょう。


ログインしてから、サイトを表示してみると 「 icon-lock 保護された通信」 と緑色に表示されていれば SSL化成功です!

ですが、まだやってもらいたい事があります。ここで終わらないで下さい!

sslの設定説明画面

httpからhttpsにリダイレクトする

「http」から「https」にサイトのURLが変わったので、http(sナシ)のほうのサイトをクリックしても、 自動的にhttps(sあり)に飛ぶ設定をしてあげなくてはいけません。

ちょっと難しいと感じるかもしれませんが、これも一緒にやっていきましょう。

ヒガ

安心して下さい!一緒にやっていくので簡単です!

まずは、また、 「エックスサーバーインフォパネル」を開きます。下にすすんで、「サーバー」の 「ログイン」をクリックします。

sslの設定説明画面

ログインするとサーバーパネルが開きます。その中の 「.htaccess編集」 という所をクリックして下さい。

sslの設定説明画面

ドメイン選択画面になるので、 自分のドメインを選びます。

sslの設定説明画面

開いたページの 「.htaccess編集」 タブをクリックして下さい。

sslの設定説明画面

この画面で、① 『# BEGIN WordPress』の前に改行を2個ぐら入れて空白を作って

➁下のコードを写真の部分と同じように張り付けます。

※↓コードをコピーします

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R,L]
</IfModule>
sslの設定説明画面

貼りつけ完成図

sslの設定説明画面

貼りつけが完了したら、 『.htaccessを編集する(確認)』をクリックします。

sslの設定説明画面

『.htaccessを編集する(確定)』をクリックします。

sslの設定説明画面

最後に 『戻る』をクリックして完了です。

sslの設定説明画面

最後に、 WordPress画面に戻ってもらい、表示されているURLの 『htpps』 の 『S』 だけをデリートで消してみて下さい。

確認できて、ちゃんとページがとんでいたらSSL化は完了です!!

 icon-check-circle  http から https に自動的にページが飛んでいるか確認しましょう。

sslの設定説明画面

設定をしてもSSL化しない場合・・

SSL化の設定をしたはずなのに、まだSSL化にならない。緑の鍵マーク  icon-lock  が出てこない場合。

そんな時は、これを確認してみましょう。

 
  • 挿入してる写真や動画はどうか?
  • 内部リンクが 「http」 のままになっていないか?

挿入されている画像や内部リンクがまだSSL化出来ていない場合があります。

写真の場合、どの写真がSSL化出来ていないのかを確認します。

動画でも解説しています

テキストで読みたい方はこちら

SSL化出来ていない写真を検索する時、※firefoxというブラウザを使うのが便利です。

※firefoxのダウンロードはこちら

firefoxがダウンロード出来たら、 firefoxで自分のサイトを開いてみましょう。

firefox

firefoxで自分のサイトのURLを挿入します。


開いてみると、緑の鍵マーク  icon-lock  が出ていませんね・・

「この接続は安全ではありません」と表示されています。

鍵マークをクリックしてください。


「安全でない接続」をクリックします。


「詳細を表示」をクリックします。


すると、こんなウィンドウが開きます。ここの ①「メディア」タブ をクリックして、

➁下のURLからhttpのsが付いていないURLを探します。

➂のプレビューで確認できます。

やじるし
 やること! 

確認が出来たら、自分のサイトへ戻り、httpの「s」が付いていない画像を一旦消して、記事からも消して、もう一度メディア(写真や動画)を追加して、はり直しましょう。

これで、「http」の(sがついていない)画像が無くなればSSL化が出来るはずです!

この設定も忘れないで!

Googleアナリティクスとサーチコンソールにも 『https』 になったサイトアドレスの登録が必要です。

今までhttpで(sナシ)登録していたのならば、s付きのURLも追加で登録しなければいけません。

アナリティクスのSSL追加設定

アナリティクスを開きます。 左下の マークをクリックします。


①「データの収集と修正」→「データストリーム」

② >のマークをクリックします。


鉛筆マークをクリックします。


『http// 』の所をクリックして、『https』 を選びます。

アナリティクスはこれで完了です!

サーチコンソールでのSSL追加方法

サーチコンソールを開いたら、右側に 『プロパティーを追加』 ボタンがあります。 そこから 『https』 付きのURLを追加しましょう。 

ssl説明画面

さいごに

今回は、 WordPressで出来るSSL化の簡単な方法をご説明しました!

最初にも書きましたが、 SSL化はサイトを作ったら最初に行っておいて下さい。その方が楽です。

途中で「SSL化してない!」気づいた人も 今すぐしましょう。あとあとになると、もっと面倒です。

ちょっと難しい部分もあるかもしれませんが、SSL化していないサイトは見に来てくれた読者様に不安感を与えます。なので、必ずSSL化しておくようにしましょう!

ABOUT US
比嘉 利恵(HIGA RIE)親身になってくれるホームページ屋さん
TURKEYの代表・個人でホームページ作成をしている。 話しかけやすい、優しい印象。 コンピューターが苦手な方に対応するのを得意としている。 子供が2人いるシングルマザー。子供大好き・映画大好き・ゲームが大好き