無料独自SSL(https)を設定するための手順(エックスサーバー編)

無料独自SSL https 設定 使い方
記事内にプロモーションが含まれています。

サイトのSSL化は今や当たり前となりましたが、無料で独自SSLを使用するならエックスサーバーがおすすめです。本記事では、エックスサーバーを使ったSSL化の手順・流れを簡単にまとめています。

ぽけ
マサムネ
Googleも推奨しているSSL化。セキュリティ対策やユーザーのことを考えて早めの対策をしておきたいところです。
スポンサーリンク

無料独自SSLを設定しよう

まずは、「エックスサーバー」にアクセスし、ログインから「サーバーパネル」をクリックします。

サーバーパネル

 

次にサーバーパネルにログインしてください。

エックスサーバー サーバーパネル ログイン画面

 

サーバーパネルにログインしたら、「SSL設定」をクリックします。

SSL設定をクリック

 

ドメイン選択画面が表示されるので、SSL設定したいドメイン名を探して「選択する」をクリック。

ドメイン選択画面

 

SSL設定の画面が表示されます。
このとき、SSL設定一覧に既に表示されていたら特に設定をおこなう必要はありません。
今回は、”現在、独自SSL設定はありません。”と表示されているので、SSL設定の追加を行っていきます。

現在、独自SSL設定はありません

 

独自SSL設定追加のタブをクリックすると、下図のような画面に切り替わりますので、手順を参考に確認画面へ進むをクリックします。

サイトのURLを選択

  1. 独自SSL設定追加タブをクリック
  2. サイトのURLを選択or確認
  3. 確認画面へ進むをクリック

 

確認画面へ進み、問題なければ「追加する」をクリックします。

追加するをクリック

 

追加すると、以下のような文言が少しの間表示されます。
(ネット環境によって表示される時間が異なるかと思います)

SSL新規取得申請中です。しばらくお待ち下さい。
※処理には数分程度かかる場合があります。

 

しばらくして、独自SSL設定を追加しました、と下図のように表示されれば完了です。
戻るボタンをクリックします。

独自SSL設定を追加しました

 

SSL設定一覧に戻ると、下図のように反映待ちになっているかと思います。

SSL設定反映待ちの表示

この状態でサイトにアクセスしても、以下のようなメッセージが表示されてしまいます。

無効なURLです。
プログラム設定の反映待ちである可能性があります。
しばらく時間をおいて再度アクセスをお試しください。

ぽけ
マサムネ
これは反映に時間がかかっているだけなので、しばらく時間(1時間程度)をおけば通常の状態に戻ります。エラーではないので焦らなくて大丈夫ですよ。

 

無事に反映が終わると、下図のように通常のページが表示されます。
※以下の参考イメージは、エックスサーバーデフォルトのページです。

エックスサーバーデフォルトのページ

 

独自SSL設定後にやること/WordPress編

独自SSL(https)設定をした後は、サイトに手を加える必要があります。
今回は、サイトやブログを作成する際に人気の「WordPress」を使用する場合を例にお話します。

独自SSLを設定したタイミングによって、サイトに手を加える内容が異なります。
以下では、パターンごとに最低限やっておきたいことを解説します。

サイトを運営する前にSSL設定をしたパターン

サイトを作成する前や運営前にSSL(https)設定をした場合、やることはシンプルです。

一般設定のURLを変える

WordPressインストール後、管理画面(ダッシュボード)にログインし、左メニューの設定から「一般」をクリックします。

一般設定

 

すると、一般設定の画面が表示されると思うので、「WordPressアドレス」と「サイトアドレス」にあるURLを「http→https」に編集し、変更を保存をクリックします。

  1. http→httpsにする
  2. http→httpsにする
  3. 編集したら「変更を保存」をクリック

アドレスの変更

ぽけ
マサムネ
上記の変更をし保存を押すと、WordPressから自動的にログアウトされる場合がありますが、特に問題はありません。
再び、ログインし管理画面(ダッシュボード)に入れることを確認しておきましょう。

 

httpからhttpsへリダイレクト設定

SSL設定すると、サイトのURLは以前の「http」から「https」変更となるわけですが、実は以前のhttpから始まるURLからでもアクセスができてしまいます。

この現象を回避するには、リダイレクトという方法でhttpから始まるURLにアクセスしても、httpsから始まるURLに転送されるように設定をおこないます。

設定をおこなえば、以下のようにhttpから始まるURLにアクセスしても、httpsにリダイレクトされます。

▼http→httpsにリダイレクトされている例

http://pockebu.com

 

ぽけ
マサムネ
初めてリダイレクトを聞くと、難しく感じる人もいるかもしれませんが、以下の手順通りおこなえば比較的簡単に設定は行なえます。

 

【1】サーバーパネルにログイン

まず、エックスサーバーのサーバーパネルにログインします。

 

【2】.htaccess編集

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

.htaccess編集をクリック

 

ドメイン一覧が表示されるかと思いますので、該当のドメインの「選択する」をクリックします。

ドメイン選択画面

 

.htaccess編集画面に遷移するので、「.htaccess編集」のタブをクリックします。

.htaccess編集

 

下図の赤枠エリア部分の編集をおこなっていきます。
※下図の内容と文字等が異なっていても問題ありません。環境やWordPress等のバージョンによっても表記が変わる可能性があります。

.htaccess編集エリア

.htaccess編集は、とても繊細な作業です。
記述のミスがあると、サイトが表示されなくなってしまうことがあります。

普通に編集を行えば問題ありませんが、万が一に備え、編集する前はメモ帳等に既存のもの(初めから記述されていた.htaccess)をコピペし保存しておくなど、バックアップを取っておくことを推奨します。

万が一ですが、サイトが表示されなくなっても、バックアップがあれば、それを使って元に戻すことができます。

 

編集内容ですが、先頭に以下のコードをコピーし貼り付けます。

▼追記コード
<IfModule mod_rewrite.c>
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R,L]
</IfModule>

 

下図は、貼り付けた後の参考イメージです。

.htaccess編集後のサンプル

編集できたら、「確認画面へ進む」をクリック。

 

確認画面が表示されるので、問題なければ「実行する」をクリックして、編集を完了させます。

.htaccess確認画面

 

ぽけ
マサムネ
編集完了後は、サイトをhttp://~で確認してみてください。https://~に転送されたらリダイレクトが無事完了です。
もしもエラーが出てしまったら

サイトを確認し、もしエラーが出てしまった場合は、以下の手順でもう一度試して見てください。

  1. バックアップしたデータ(初めから記述されていた.htaccessの内容)に戻す
  2. 再度、上記の追記コードをコピペする

 

既にサイトを運営している途中でSSL設定をしたパターン

SSL(https)設定をする前から、サイトを運営している場合(既存のサイトに途中からSSL設定を施した等)、上記で説明した「一般設定のURLを変える」と「httpからhttpsへリダイレクト設定」に加え、既存ページに残っているhttpから始まる画像やリンクのパスを「https」に変更する必要があります。

ぽけ
マサムネ
既に公開されているページで画像など使用している場合、画像のURLが「http~」から始めるものになっています。
これを「https~」に変更する作業を行う必要があるんです。

変更する数が少ない場合は一つずつでも構いませんし、数が多い場合は一括置換などで作業しても良いでしょう。
バックアップを取りつつ行えばそれほど難しいことではありません。

 

保護されている状態か確認しよう

SSL設定を完了後は、サイトを表示した状態でアドレスバーを確認してみましょう。
以下のように、鍵マークが表示されていればOKです。

鍵マークが表示

 

逆に、以下のように「保護されていない通信」と表示されている場合は、うまく設定できていない場合があるので、上記でお話したパターンを確認しながら改善してみてください。

保護されていない通信

※ブラウザのバージョンや環境等によっては、アドレスバーの表記が異なる場合がございます。

 

まとめ

今回は「無料独自SSL(https)を設定するための手順(エックスサーバー編)」をテーマにお話させて頂きました。

SSL設定をすることで、セキュリティやプライバシー保護が高まる一方、注意しなければいけないのが「混在するコンテンツ」の存在です。

混在するコンテンツとは、SSL設定(https)したのにも関わらず、httpという表記がページに残ってしまっている状態を指します。
混在するコンテンツが残っていると、警告が表示されたり、ブラウザのバージョンによっては画像の読み込みに失敗し、表示されない等の可能性もあります。

独自SSL設定をした後は、できる限り早く混在するコンテンツを無くすように対策を施しましょう。

便利なホームページ作成ツール

【選び抜きました!ホームページ無料作成サービス・有料あり】
コスパが良いと思われるホームページ作成サービスをまとめてみました。

人気のWordPressテンプレート
WordPressのテーマ(テンプレート)って、沢山あるけど無料と有料どっちが良いの?
そんな疑問にお答えすべく、おすすめのWordPressテーマをプロの目線でまとめてみました。
使い方入門編
スポンサーリンク
マサムネ

フリーランスとして独立しブログ運営に勤しんでいる元WEBデザイナー。
記事を書くのって大変だけど色々な気付きがあって楽しい!
虚弱で家族に迷惑をかけてきたので、どんな親孝行ができるかプラン思考中。
日々穏やかでストレスを溜めない生活を心がけています。
フリーランス10年/ブログ10年/コンテンツSEOからの月収6桁達成
詳しいプロフィールはこちら

マサムネをフォローする
ぽけぶ
タイトルとURLをコピーしました