ライフスタイル

【TIPS】XserverのWebサイト(WordPress)を常時SSL化でHTTPSアクセスする設定手順まとめ

xserver-wordpress-ssl-certificate-https-301-redirect

 

エンジニアライフスタイルブログを運営しているミウラ(@miumiu06171)です。

 

普段はフリーランスでシステムエンジニアをしております。

 

今回は、こちらの記事に引き続いてお名前.comで取得した独自ドメインとXserverのレンタルサーバーで作成したホームページ(WordPress)を常時SSL化する手順をまとめてみました。

 

常時SSL化は、SEO対策でも必須のため、ぜひ参考にしてみてください。

 

 

 

Xserver(エックスサーバー)の独自SSL設定手順

 

前回記事に従ってXserverでWordPressのホームページを作成し、HTTPアクセスまでできている前提で、次のステップとしてHTTPSアクセスするためのSSL設定手順を解説していきます。

 

まずはXserverのサーバー管理画面に入り、下図のように「ドメイン」→「SSL設定」をクリックします。

 

xserver-ssl-setting-dns-certification-01

 

次に該当ドメイン名欄の「選択する」リンクをクリックします。

 

xserver-ssl-setting-dns-certification-02

 

「独自SSL設定追加」タブを開き、該当ドメインのサイトを選択し、「確認画面へ進む」ボタンをクリックします。

 

xserver-ssl-setting-dns-certification-03

 

下図の画面になるので、サイトの内容を確認した上で「追加する」ボタンをクリックします。

 

xserver-ssl-setting-dns-certification-04

 

下図のように「独自SSL設定を追加しました」と表示されればオッケーです。

 

xserver-ssl-setting-dns-certification-05

 

次に「SSL設定一覧」タブを開くと、該当ドメイン名のサイト欄に「反映待ち」と表示されていると思います。

 

xserver-ssl-setting-dns-certification-06

 

1時間~24時間ほど経過すれば、「反映待ち」が消え、設定が反映された状態になります。

 

xserver-ssl-setting-dns-certification-07

 

もし外部サーバーですでに運用中のサイトに対して無料独自SSLを事前に設定する場合、独自SSL設定を追加したときに認証方法の選択が表示されます。

 

この場合、「外部ネームサーバーでのDNS認証」を選択し、「ホスト名」「種別」「内容」を控えてください。

 

その後、Xserverのサーバー管理画面の「ドメイン」→「DNSレコード設定」をクリックします。

 

該当ドメイン名欄の「選択する」リンクをクリックし、「DNSレコード追加」タブでさきほど控えた「ホスト名」「種別」「内容」を入力し、レコード追加してください。

 

レコードが追加できたら、1時間~24時間経過後に再度「ドメイン」→「SSL設定」からSSL設定を行ってください。

 

 

WordPress Webサイトの常時SSL化手順(.htaccess編集で301リダイレクト)

 

次にWebサイトにアクセスされたときは、常時SSL化したHTTPSでアクセスされるように301リダイレクト設定を行っていきます。

 

Xserverのサーバー管理画面に入り、下図のように「ホームページ」→「.htaccess編集」をクリックします。

 

xserver-ssl-setting-htaccess-301-redirect-setting-01

 

次に該当ドメイン名の「選択する」リンクをクリックします。

 

xserver-ssl-setting-htaccess-301-redirect-setting-02

 

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

 

xserver-ssl-setting-htaccess-301-redirect-setting-03

 

下図のように.htaccess欄のテキストエリアに、以下の5行を追加し、「確認画面へ進む」ボタンをクリックします。

 

xserver-ssl-setting-htaccess-301-redirect-setting-04

 

 

下図の設定確認画面が表示されるので、内容を確認し、「実行する」ボタンをクリックします。

 

xserver-ssl-setting-htaccess-301-redirect-setting-05

 

「.htaccessの編集が完了しました」と表示されればオッケーです。

 

xserver-ssl-setting-htaccess-301-redirect-setting-06

 

 

WordPress Webサイト上のURL設定変更

 

WordPress Webサイト上のURLもhttpからhttpsに設定変更していきます。

 

対象ドメインのログインURLへアクセスし、下図のようにユーザー名、パスワードを入力して「ログイン」ボタンを押します。

 

前回記事に従ってXserver上にWordPressを構築している方は、「https://<ドメイン名>/wp-login.php」でログイン画面にアクセスできます。

 

xserver-wordpress-homepage-address-change-01

 

次にダッシュボードの「設定」→「一般」をクリックします。

 

xserver-wordpress-homepage-address-change-02

 

下図の赤枠のWordPressアドレスとサイトアドレスの2つがhttpのURLになっていることを確認します。

 

xserver-wordpress-homepage-address-change-03

 

2つともhttpであることを確認できたら、下図のようにhttpからhttpsにURLを変更してください。

 

xserver-wordpress-homepage-address-change-04

 

画面を下にスクロールし、「変更を保存」ボタンをクリックします。

 

xserver-wordpress-homepage-address-change-05

 

これでWordPress上の設定も完了です。

 

 

WordPress Webサイト動作確認(httpsアクセス編)

 

設定が完了したところで「https://<ドメイン名>/」でアクセスできるか確認してください。

 

下図のようなWordPressのデフォルトテーマが表示されていれば、SSL化もオッケーです。

 

xserver-https-access-301-redirect-confirmation-01

 

また、「http://<ドメイン名>/」でアクセスすると、301リダイレクト機能が働いて自動的に「https://<ドメイン名>/」にリダイレクトされることも確認しましょう。

 

先ほどと同じWordPressのデフォルトテーマが表示されればオッケーです。

 

 

まとめ

 

いかがでしたでしょうか。

 

お名前.comで取得した独自ドメインとXserverのレンタルサーバーで作成したホームページ(WordPress)を常時SSL化し、httpsでアクセスする手順をまとめてみました。

 

SEO対策としても必須となっているので、新しくホームページを立ち上げたときなどに本記事を参考にして頂ければ幸いです。

 

【関連記事】

 

【TIPS】お名前.com独自ドメインとXserver(WordPress)でホームページ作成手順まとめ

 

【TIPS】お名前.com独自ドメインのメールアドレスをGmailで扱う手順(Google Workspace連携編)