説明と言うよりは自分の備忘録的な部分が強めです。

独自SSLの設定をする

エックスサーバーのサーバーパネルにログインしてSSL設定をクリックして進みます。

サーバーパネル

SSL設定画面になりますので、独自SSL設定の追加タブを選択します。

独自SSL設定画面

ドメインを確認したら独自SSL設定を追加する（確定）を押して終了です。

独自SSL設定を追加

サーバー側の設定自体は簡単ですが、この段階では「http://自サイトドメイン」を確認しても以下の様になると思います。

Googlechromeの画面

設定完了までは少し時間がかかりますが、完了すればサイトが表示されるようになります。（20分～1時間程度）

firefoxのアドレスバー

Googlechromeのアドレスバー

サイトが表示されましたが、「http://自サイトドメイン」にしたら最終的には以下の画像の様に緑色の鍵が表示されるようにしないといけません。

firefoxのアドレスバー（安全な接続）

Googlechromeのアドレスバー（保護された通信）

ワードプレスの設定で「https」に変更する

ワードプレスの管理画面から設定→一般を開いてURLを変更していきます。

『http』を『https』に変更するだけで、出来ると思います。

WordPressアドレス（URL）を『https://ドメイン名』

サイトアドレス（URL）を『https://ドメイン名』

変更したら左下にある『変更と保存』を押して完了です。

この変更だけで、アドレスバーのURLが鍵マークになればOKですが、まだなりませんでしたので次にサイト内部リンクのアドレス部分を変更していきます。

サイトの内部リンクと画像をプラグインを使って一括で置換する

サイトのアドレスまでは、変更しましたが投稿記事や固定ページの内部リンクや画像のアドレスを変更していきます。

一つ一つ手作業で変更するのは無理がありますのでプラグインのSearch Regexを使って一括で変更していきます。

管理画面のプラグインの新規追加から『Search Regex』を検索してインストールしましょう。

有効かしたらツール→Search Regexをクリックして進むと以下の画面になります。

SourceがPost contentになっているか確認をしたら

Search Pattern 　：　http://ドメイン名

Replace pattern　：　https://ドメイン名

入力したら『Replace』を押すと置換できる候補が出てきますので、問題ないか確認をしましょう。

問題がなければ、『Replace & Save』を押すと置換が完了します。

僕の場合は、feedlyとRssのボタンが『http://』でしたので、その部分は手動で修正しました。

301リダイレクトをエックスサーバーの『.htaccess』に記述

内部リンクまでは修正が出来ていますが、この時点では変更前のサイトURL『http://ドメイン名』と『https://ドメイン名』の2つが別のサイトとして認識されています。

『http://ドメイン名』にアクセスしても『https://ドメイン名』にアクセスするように設定をしていきます。

エックスサーバーの『.htaccess』に『https』へのリダイレクトを設定

エックスサーバーのサーバーパネルにアクセスして『.htaccess』をクリックします。

サーバーパネル

ドメイン選択画面になりますので、リダイレクトするドメインを選んで【選択する】を押して進みます。

ドメイン選択画面

以下の画面になりますので『.htaccess編集』のタブをクリックします。

.htaccess編集

タブをクリックすると以下の画面になります。
ここで以下のコードを＃BEGIN WordPressの直上に追加していきます。

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R,L]
</IfModule>

記述出来ましたら、右下の【.htaccessを編集する（確認）】をクリックすると確認なので、良ければもう一度押して完了になります。

これでブラウザのアドレスバーに『http://ドメイン名』を入力しても、『https://ドメイン名』にリダイレクトされるようになります。

まとめ

今回、『https://ドメイン名』に変更することにしたのは、まだ記事も少ないので、比較的面倒なことも少ないと思い早めの変更に至りました。これからサイト・ブログをエックスサーバーで立ち上げていくなら最初に設定してしまえば苦労はないと思います。

1. エックスサーバーの独自SSLの設定
2. ワードプレスの設定（httpsへ修正）
3. ワードプレスの内部リンクの修正
4. エックスサーバーでのリダイレクト設定を『.htaccess』に追加

以上でアドレスバーの鍵がしっかりと出て、リダイレクトまで問題なく設定できました。

この後に、Google AnalyticsとGoogle Search Consoleを設定し直して、最後にHSTS Preload Submissionの登録まで行い完了としました。

XSERVER（エックスサーバー）の申し込み方法

2017年2月24日

投稿 【SSL設定】エックスサーバーの無料独自SSLでWordPressサイトをHTTPS化する は シンプルショッピング に最初に表示されました。