エックスサーバー WordPressで常時SSL HTTPSの設定方法

エックスサーバー

【エックスサーバー常時SSL】WordPressでhttps化する方法

レンタルサーバー「エックスサーバー(XSERVER)では無料の独自SSLが利用できます。今回は、エックスサーバーで運用しているWordPressに常時SSLを設定する方法をご説明します。
 

■SSL化された状態。鍵マークが表示されている
SSL化されたサイト https 鍵マークがついている
 

■SSL化されていない状態。保護されていない通信と表示されている
SSL化されていないサイト 保護されていない通信
 


 

WordPressクイックスタートを利用した方は本作業不要です

エックスサーバー契約時にWordPressクイックスタートを選択してインストールしたWordPressサイトは自動で常時SSLの設定がされているので、本作業は不要です。

基本的には、WordPressクイックスタートを利用しなかった方や二つ目のドメインに設置したWordPressサイトに対して本作業が必要になります。

(参考)【WordPressの始め方総まとめ】ワードプレスブログの作り方

なお本記事の内容は、2022年5月に最終更新したものです。時期によって画面など異なる場合がありますのでご了承ください。

 

エックスサーバーで独自SSLを設定する

エックスサーバーSSL化の流れ1 エックスサーバーの設定
 

エックスサーバーでWordPressに常時SSLを設定手順としては大きく下記の4つがあります。

■WordPressの常時SSL化手順

  1. 「エックスサーバー」でSSLの設定を行う
  2. 「WordPress」でSSLの設定を行う
  3. 「.htaccess」で常時SSLの設定を行う(※注)
  4. その他必要に応じてSSL化によって生じる調整作業

(※注)単純にSSL化のみ実施した場合は、httpでもhttpsでもどちらでもアクセスできる状態で不完全な状態です。そこで「http」でリクエストされたアクセスも「https」化して通信する設定を常時SSLといいます。

 

まずはエックスサーバーの管理画面にアクセスしてログインしましょう。

※ログインURLが2021年10月に変更されました。(参考)各管理ツールにおけるログインページURLの変更について |エックスサーバー
 

ログイン画面でメールアドレス、パスワードをそれぞれ入力し「ログイン」をクリックします。
Xserverのログイン画面
 

これでエックスサーバーアカウントパネルが表示されます。
Xserverアカウントパネル
 

つぎに、「サーバー管理」をクリックしてサーバーパネルに移動します。
Xserverアカウントパネル「サーバー管理」
 

これでサーバーパネルが表示されました。つづいて「SSL設定」をクリックします。
エックスサーバー サーバーパネル>SSL設定
 

ドメインが複数ある場合はドメイン選択が表示されます。SSL化対象のドメインを選択します。
エックスサーバー サーバーパネル ドメイン選択
 

「独自SSL設定追加」タブをクリックします。
エックスサーバー 独自SSL設定追加ボタンを押下
 

補足)すでにSSL設定済みの方は

エックスサーバーでのドメイン追加時にSSL化設定をしていた場合は、最初からSSL化されています。

すでに対象ドメインがSSL設定済みになっている場合は、手順2「WordPressでSSLの設定をする」からスタートしましょう。
エックスサーバー サーバーパネル >すでにSSL化が設定済みになっている

 

対象のドメインが選択されていることを確認して(通常はwwwありでOKです)、「確認画面へ進む」をクリックします。
エックスサーバー サーバーパネル >エックスサーバー ドメイン(wwwありで通常はOK)を選択して、確認画面へ進むを押下
 

確認画面が表示されますので、「追加する」をクリックします。
エックスサーバー サーバーパネル > 追加するを押下
 

2,3分程度「取得中」と表示されるのでしばらく待ちます。
エックスサーバー サーバーパネル >取得中ですの文言が表示されるのでしばらく待ちます
 

取得中の表示が消えたら「戻る」をクリックします。
エックスサーバー サーバーパネル >戻るをクリックします。
 

SSL設定が「反映待ち」と表示されている間はしばらく待ちます。最大60分程度かかります。
エックスサーバー サーバーパネル >反映待ちと表示されている間はしばらく待ちます
 

何回か更新して反映待ち表示が消えたことを確認してOKです。
エックスサーバー サーバーパネル 何回か更新して反映待ち表示が消えたことを確認する
 

これでエックスサーバーでSSLの追加設定は完了です。次にWordPressの設定を行なっていきます。
 
 

WordPressでSSLの設定を行う

エックスサーバーSSL化の流れ2 WordPressの設定
 

次に、WordPressでもSSLの設定を行います。ダッシュボードから「設定」を選択し「一般」をクリックします。
設定>一般設定
 

「WordPressアドレス(URL)」、「サイトアドレス(URL)」を「http://~」から「https://~」に変え、「変更を保存」をクリックします。
WordPress>設定>一般設定でURLをhttp→httpsに変更する
(※)本操作で誤った内容を入力・保存すると、WordPressにアクセスできなくなる場合があるため、慎重に行いましょう。
 

変更を保存します。
変更を保存する
 

一旦ログアウトされるので、再度ログインしましょう。
ログアウトされるので再度ログインする
 

管理画面のアドレスがhttpsになっていることが確認できたらOKです。
管理画面のアドレスがhttpsになっていることを確認
 

「.htaccess」ファイルに常時SSLの設定を行う

エックスサーバーSSL化の流れ3 .htaccessの設定
 

最後に、常時SSLの設定を行なっていきます。ここまでの設定だけでは、まだ「http」と「https」のURL両方にアクセスすることができる状態です。

そこで「http」のURLを「https」へ転送する設定を行っていきます(常時SSL)。設定を行うには、サーバー上にある「.htaccess」という重要なファイルを編集する必要があります。
 

ここでは、エックスサーバーのサーバー管理パネルの.htaccess編集機能から、.htaccessを編集する方法を紹介します。
 

再度、エックスサーバーのサーバーパネルを開いてください。「.htaccess編集」をクリックします。
エックスサーバーサーバーパネル>.htaccess編集をクリック
 

複数のドメインをがある場合はドメインの選択画面が表示されます。SSL化対象のドメインを選択しましょう。
SSL化対象のドメインを選択する
 

(補)対象がサブドメインの場合

サブドメイン(例. xxx.yyy.com)については、.htaccess編集から設定できませんので、代わりにFTPソフトまたはエックスサーバーのファイルマネージャーから対象ドメイン>public_html>サブドメイン名>.htaccessファイルに対して設定する必要があります。

エックスサーバーの管理画面トップ>ファイル管理からファイルマネージャーに入ることができます。
エックスサーバー 管理画面トップ>ファイル管理をクリック

ルート(親)ドメイン>public_html>対象のサブドメインにある、「.htaccess」を選択して編集します。
エックスサーバー ファイルマネージャー

ここでファイルを追記・編集することができます。
エックスサーバー ファイルマネージャー>サブドメインの.htaccess編集

 
「.htaccess編集」をクリックします。
サーバーパネル .htaccess編集をクリック
 

.htaccessファイルの内容が表示されます。記載内容はご利用の環境によって異なる場合があります。元々ある記述は消さないでください。
サーバーパネル .htaccessファイルの内容
 

注意).htaccessは重要なファイル

ホームページ Unavaiable「.htaccess」ファイルとは、Apache(Webサーバーのソフトウェア) を使ったサーバーの挙動を制御するための設定ファイルです。

リダイレクト(サイトを訪れたユーザーに別のURLを転送するためのしくみ)、アクセス制限、ユーザー認証、404エラーページ(ユーザーがアクセスしたWebサイトが、存在しない場合に、表示されるページ)の作成などの設定を行います。

誤った入力をすると、「.htaccess」ファイルが機能せず、最悪の場合、Webサイトが表示されない可能性もありますので、コードを変更したり、書き加える前に.htaccessに元々記載されている内容をコピーしてメモ帳などに控えておくと安全です。

(関連記事)【.htaccessとは】意味やできること・WordPress上のファイルの場所

 

.htacessに書き加えるコードは、以下のとおりです。コピーしてください。

 

コピーしたコードを一番上の行に貼り付けます(元々合った記述は1文字も消さないようにしてください)。「確認する」をクリックします。
サーバーパネル .htaccess コピーしたコードを一番上の行に貼り付ける(元々合った記述は1文字も消さないようにする)
 

「実行する」をクリックします。
サーバーパネル .htaccess 実行するをクリック
 

(補足. 中級者向け)コードの意味について

 

  • 「RewriteEngine」とは、「有効(ON)・無効(OFF)の設定」で、「有効(ON)」にします。
  • 「RewriteCond」とは、「条件を設定する」という意味です。
  • 「 %{HTTPS} !on 」とは「httpsがonでない場合(SSLではない場合)」という意味です。
  • 「RewriteRule 」とは、「ルールを設定する」という意味です。
  • [ R = 301 , L ]の「R = 301」は「永続的に転送する」という意味であり、「L」は「ルールを終了する」という意味です。

 

以上のコードで「http」でアクセスがあった場合、「https」へ転送しますというルールを設定しています。

 

最後に「http://自分のドメイン名」でアクセスしてみましょう。httpsにリダイレクトされて入れば完了です。


 
 

その他の設定(すでに稼働中のWebサイトなどで必要になる場合があります)

エックスサーバーSSL化の流れ 補足 その度調整
 

すでに稼働中のWebサイトをSSL化する場合は、必要に応じて上記以外の設定をする必要もあります。

  • WordPressの場合)画像パスURLの置換
  • Google Analyticsの設定
  • Google Search Consoleの設定

など
 

画像パス(URL)の書き換え

これまでの操作でSSL化を実施しましたが、Webページの中にhttpから始まる画像のパスがあると、下記のように完全ではないと表示されます。


 

おおよそのケースが、httpで始まる画像のパスがあることが原因なので検証ツールなどを利用して、画像のパスを確認してhttpsに修正しましょう。
不完全なSSL MixedContent
 

WordPress上の文字列・URLを置換する方法はいくつかありますが、「Database Search and Replace Script in PHP」と言うツールを使って、画像URLを一括置換する方法を「【WordPress文字列一括置換】画像URLをhttpsに変更する方法」の記事に説明していますので合わせてご参考ください。
 
 

Google Analyticsの設定

SSL化する以前に、Google Analyicsをすでに設定している場合は、Google Analyticsでhttp→httpsに変更してあげましょう。
 
Google Analyticsで登録しているURLをhttp→httpsに変更する

Google Analyticsで登録しているURLをhttp→httpsに変更する

Google Search Consoleの設定

SSL化する以前に、Google SearchConsoleをすでに登録している場合は、Google SearchConsoleで「https://対象のドメイン」で新たに登録しておきましょう。
Google Search Consoleでhttps://ドメインもプロパティ追加する
 

また、「https://ドメイン名」のプロパティに対してサイトマップも忘れずに登録しておきましょう。
 

そのほか、過去ツール類でhttpの状態で登録しているものがあれば、httpsに修正すると良いでしょう。

 
 

(補足)SSL化(HTTPS)とは通信を暗号化する仕組み

SSL化とは

SSLとはSecure Sockets Layerの略で、インターネット上でデータを暗号化して送受信する仕組みを指します。

SSL化されていない場合

SSL化していない場合はインターネット通信は「http」通信で行われますが、通信データは平文(暗号化なしのテキストそのままの状態)で送信されています。悪意ある第三者が情報を盗聴したり書き換えたりすることができる危険な状態です。
SSL化されていない通信の説明図
 

SSL化されていない通信の場合は、アドレスの前に以下のマークと「保護されていない通信」と表示されます。
SSL化されていないサイト 保護されていない通信
 

SSL化している場合

通信をSSL化(HTTPS)をすることで、通信データを保護し、クレジットカードのような他人に知られると悪用される重要な情報を守ります。
SSL化の説明図2
 

クリックすると下記のように警告表示され、利用者に不安を与えてしまう恐れもあります。
SSL化されていないサイト 保護されていない通信
 

Webブラウザ上でも、WebサイトをSSL化すると、端末間の通信が暗号化されてHTTPS通信になりアドレスバーに鍵マークが表示されて安心感があります。
SSL化されたサイト https 鍵マークがついている
 

閲覧専用のブログやホームページでもSSL化は推奨です

個人のブログなど、訪問者が重要な情報を入力するような場面がないWebサイトはSSL化の必要がないように思われるかもしれません。

それでもSSL化はほぼスタンダードの技術になってきており、GoogleもSSLを推奨しています。ホームページ・ブログを始めたばかりの方も、最初からSSL化しておくことをお勧めします。

私のWebサイトはブログでほぼ閲覧専用になると思うのでクレジットカード情報など入れることなないのですが、それでもSSL化した方が良いのでしょうか?

はい。その場合でもSSL化することをおすすめします。今では、SSL化が一般的になり、無料に設定もできますしGoogleもSSL化を推奨しているからです。

 

サイトのコンテンツを問わず、ユーザーによるウェブサイトへの接続を保護するために、HTTPS を導入することをおすすめします。
HTTPSでサイトを保護する | Google SearchConsoleヘルプ

 

SSLの機能について

ここでは詳しい原理や解説は割愛しますが、SSLの機能は暗号化だけではなく、下記のような3つの特徴があります。

  • 暗号化(盗み見を防止する)
  • データの改ざん防止
  • (2者間での)なりすまし防止

 

SSL化されている通信の説明図
 

(補足)より厳格な有料SSLもあります

エックスサーバーが提供する無料の独自SSLは、ISRG(Internet Security Group)提供のLet's Encryptを使用しています。

この無料SSLの他にも、より信頼性の高い「企業認証SSL」「EV SSL」といった方式のSSLもあります。

「企業認証SSL」「EV SSL」は、企業・団体を対象としており、登記書類や電話などによる実在しているかどうかの審査があります。実際に実在している会社か証明しなければ、利用できませんのでなりすましなどを防ぐことができます。

 

SSLについて詳細な説明を「【SSLとは】SSLの意味と必要性および仕組みや種類を解説」で記載していますので、SSLについて詳しく知りたい方は合わせてご参照ください。
 

まとめ

まとめです。今回はレンタルサーバー「エックスサーバー」で、独自ドメインに対して常時SSLを設定する方法をご説明しました。
 

エックスサーバーの独自SSL化の流れは下記の通りです。
エックスサーバーSSL化の流れ 
 

■WordPressの常時SSL化手順

  1. 「エックスサーバー」サーバー管理画面でSSLの設定を行う
  2. 「WordPress」でSSLの設定を行う
  3. 「.htaccess」で常時SSLの設定を行う(※注)
  4. その他必要に応じてSSL化によって生じる調整作業を行う

(※注)単純にSSL化のみ実施した場合は、httpでもhttpsでもどちらでもアクセスできる状態で、ある意味不完全な状態です。そこで「http」でリクエストされたアクセスを「https」化した通信へ転送した設定(どんなアクセスでもhttps(SSL)で通信を強制することを常時SSLといいます。

 

これからブログやサイトを作られる方は最初からSSL化しておくことをおすすめしますし、すでにWebサイト運用設置済みの方もSSL化を検討しましょう。

なお、今回はWorrdPressのSSL化について詳しく解説しましたが、そのほかのWordPressの基本的な使い方については「【総まとめ版】WordPress(ワードプレス)の使い方」をあわせてご参照ください。

今回は以上になります。最後までご覧いただきありがとうございました。
 

合わせて読みたい記事

エックスサーバーを使ったWordPressでブログを始める方法を「【WordPressの始め方総まとめ】ワードプレスブログの作り方」で詳しく説明していますのでこれからWordPressでブログを作成する方は合わせてご参考ください。

 

「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら

YouTubeチャンネル開設しました!

WEBST8 YouTube Channel 開設
最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。

ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。


 


 

おすすめ記事3選

【WordPressの始め方総まとめ】ワードプレスブログの作り方9STEP

WordPressの始め方総まとめ

WordPress(ワードプレス)でブログを始めようと思った時に、サーバー・ドメインの手続きなどわからないことだらけで困っているというお悩みをお持ちの方も多いのではないでしょうか。本記事では、WordPressでブログやアフィリエイトを始めたい初心者を対象にWordPressの始め方をご紹介していきます。

【WordPressホームページの作り方総まとめ 12STEPで解説】

WordPressホームページの作り方

WordPressでホームページを自作しようと思った際に、「ドメイン?サーバー?たくさん調べることがあって何から手をつけたら良いのかわからない」というかたも多いのではないでしょうか。この記事ではWordPress初心者の方を対象にWordPressでホームページを作る方法をご紹介していきます。

WordPress(ワードプレス)の使い方総まとめ

WordPress(ワードプレス)の使い方  総まとめ版

今回は、これからWordPress(ワードプレス)を使ってホームページまたはブログサイトを作りたい初心者の方向けに、WordPressの導入から使い方までまとめて説明していきます。 (※)WordPress5.0から実装された最新のブロックエディター(グーテンベルグエディター)にも対応しています。

-エックスサーバー
-, ,