エックスサーバー(XSERVER)でブログやWebサイトを常時SSL化(https)する方法

ブログを常時SSL化する手順の画像_19ブログ運用
スポンサーリンク
  • エックスサーバー(XSERVER)を使用してブログを始めたいけど最初に設定するべきセキュリティ対策はなんだろう?
  • エックスサーバー(XSERVER)で常時SSL化(https)する方法を知りたい

上記のお悩みにお答えします。

これから紹介する手順を実際に自分で試して、本ブログを常時SSL化して運用しています。

最初からブログやWebサイトを運営する際のURLを常時SSL化(https)した方が下記の観点でおすすめです。

暗号化 – 通信データの暗号化によって、盗聴から保護されます。つまり、ユーザーがウェブサイトを閲覧している間、誰かがそのやり取りを「聞き取る」こと、複数ページにわたるユーザーの操作を追跡すること、情報を盗むことはいずれも阻止されます。

データの完全性 – データの転送中に、意図的かどうかを問わず、データの改ざんや破壊が検出されずに行われることはありません。

認証 – ユーザーが意図したウェブサイトと通信していることが保証されます。中間者攻撃から保護され、ユーザーの信頼を得て、ビジネス上の他の利益につなげることができます。

Google Search Consoleヘルプ

本ページでは画像付きで解説します。

初めてエックスサーバーで常時SSL化設定を行う方も全く問題ありません。

手順書について

  • 常時SSL化の目的:盗聴、パケット改竄、なりすまし防止
  • 本手順の対象者:下記のレンタルサーバーを使用しWordPressでのブログを常時SSL化したい人
  • 対象レンタルサーバー:XSERVER
  • 作業時間目安:15分
  • 手順書作成日:2018年9月1日
  • 手順書更新日:2019年11月27日

エックスサーバー(XSERVER)でブログやWebサイトを常時SSL化(https)する方法

XSERVERのSSL設定手順

XSERVERのサーバーパネルより、設定対象のドメインを選択した状態でSSL設定リンクを押下します。

ブログを常時SSL化する手順の画像_1

独自SSL設定の追加タブを押下します。

ブログを常時SSL化する手順の画像_2

設定対象のドメインとサイトのアドレスを確認し、独自SSL設定を追加する(確定)ボタンを押下します。

ブログを常時SSL化する手順の画像_3

独自SSLが設定されたことを下記画像赤枠箇所の文言より確認し、SSL設定の一覧タブを押下します。

ブログを常時SSL化する手順の画像_4

SSL用のアドレスが表示されていることを確認します。

ブログを常時SSL化する手順の画像_5

ブラウザを起動し、SSL用のアドレスを入力してアクセスしブログがSSL化されているか疎通確認を行います。

※下記の画像はSSL設定が反映待ち状態のために表示される画面になります。

ブログを常時SSL化する手順の画像_6

時間をおいて(1時間程度)ブラウザを起動し、SSL用のアドレスを入力してアクセスしブログがSSL化されているか疎通確認を行います。

※下記の画像はSSL設定が反映済みになり表示されるブログのトップ画面になります。

ブログを常時SSL化する手順の画像_7

WordPressのSSL設定手順

WordPressにログインし設定メニューを押下します。

ブログを常時SSL化する手順の画像_8

WordPressアドレスとサイトアドレスを「http://~~」⇒「https://~~」へ修正します。

ブログを常時SSL化する手順の画像_9

例:修正前 http://aaa.co.jp
修正後 https://aaa.co.jp

  • WordPressアドレスとサイトアドレスが「https://~~」と修正されていることを確認します。
    ブログを常時SSL化する手順の画像_10
  • 変更を保存ボタンを押下します。
    ブログを常時SSL化する手順の画像_11
  • 再度、WordPressへログインします。
    ブログを常時SSL化する手順の画像_12
  • 設定メニューを押下し、WordPressアドレスとサイトアドレスが「https://~~」に変更されていることを確認します。
    ブログを常時SSL化する手順の画像_13

「.htaccess」ファイル修正手順

※「.htaccess」ファイルを修正する際は、事前にファイルバックアップしておくことをおすすめします。

XSERVERのサーバーパネルにログインし、.htaccess編集リンクを押下します。

ブログを常時SSL化する手順の画像_14

常時SSL化するブログのドメインの選択するリンクを押下します。

ブログを常時SSL化する手順の画像_15

.htaccess編集タブを押下します。

ブログを常時SSL化する手順の画像_16

.htaccessファイルに設定されている情報(下記赤枠画像箇所)をコピーします。

ブログを常時SSL化する手順の画像_17

上記手順でコピーした情報をメモ帳に貼り付け、ローカル環境の任意のディレクトリへ保存します。

ブログを常時SSL化する手順の画像_18

下記のコードを「.htaccess」ファイルの上部に追加し、.htaccessを編集する(確認)ボタンを押下します。

ブログを常時SSL化する手順の画像_19

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

上記手順で設定したコードが追加されていることを確認し、.htaccessを編集する(確定)ボタンを押下します。

ブログを常時SSL化する手順の画像_20

下記画面へ遷移したこと確認します。

ブログを常時SSL化する手順の画像_21

リダイレクト(転送)確認手順

ブラウザを起動し、サイトアドレス変更前の「http://~~」でアクセスします。

ブログを常時SSL化する手順の画像_22

サイトアドレス修正後の「https://~~」へアクセスできることを確認します。

ブログを常時SSL化する手順の画像_23

WordPressに設定されているURL「http://~~」を「https://~~」に修正する手順

WordPressへログインし、プラグインメニューから新規追加ボタンを押下します。

ブログを常時SSL化する手順の画像_24

プラグインの検索テキストボックスに「Search Regex」と入力します。

ブログを常時SSL化する手順の画像_25

「Search Regex」の今すぐインストールボタンを押下します。

ブログを常時SSL化する手順の画像_26

有効化ボタンを押下します。

ブログを常時SSL化する手順の画像_27

ツールメニューから、「Search Regex」メニューを押下します。

ブログを常時SSL化する手順の画像_28

「Search pattern」に修正前のサイトアドレス「http://~~」、「Replace pattern」に修正後のサイトアドレス「https://~~」と入力し、Replaceボタンを押下します。

※誤って、Replace & Saveボタンを押下した場合、修正後のサイトアドレス置換、保存されてしまうため、一度、事前に変更箇所を確認することをおすすめします。

ブログを常時SSL化する手順の画像_29

変更箇所を確認し、Replace & Saveボタンを押下します。
※本手順では2箇所変更対象

ブログを常時SSL化する手順の画像_30

下記画像赤枠箇所の変更箇所の数を確認します。
※本手順では2箇所変更

ブログを常時SSL化する手順の画像_31

本ブログでは下記のページでWordPressでのブログ運用方法を解説しています。

コメント

dosankokazu

北海道札幌市在住の生粋道産子です。
パパ歴2年目。
子育て、北海道、グルメ、体験談、エンタメ(映画含む)、日常生活で役立つ情報等を発信します。
娘の笑顔を糧に日々奮闘。

dosankokazuをフォローする