エックスサーバーで WordPress を HTTPS（常時 SSL）化する手順

2024/09/19

エックスサーバーで運営している WordPress サイトを HTTPS 化する方法を詳しく解説していきます。

見慣れない単語が並ぶだけで難しそうに感じるかもしれませんが、手順通りやっていけば 1 時間ほどでできますよ（慣れれば 10 分ぐらい）！

Google は HTTPS をランキングシグナルに採用していますし、セキュリティを向上させるのは読者のためにもなりますから、ぜひやっておきましょう。

HTTPS 化（常時 SSL）とは

ブログ全体を HTTPS にすることを「常時 SSL 」といいます。

要するに、ブログの URL が「http://seory.co.jp」から「https://seory.co.jp」になる、と覚えておけば OK です。

HTTPS 化によって、「暗号通信で読者が安全にサイトを閲覧できる」ようになります。また、ほんの少しだけ検索に有利になる可能性もあります。読者にも運営者にもメリットがあるわけですね。

Google はランキングシグナルとして HTTPS を使用することにしました。
ランキングシグナルとしての HTTPS | Google 検索セントラルブログ | Google Developers

既存の WordPress ブログを HTTPS 化する流れ

HTTPS 化はとくに難しい作業ではありません。難しいのではなく面倒なだけです・・・

エックスサーバーの WordPress を HTTPS 化する手順は以下のとおりです。

サーバーパネルで SSL を設定
WordPress の基本設定を変更
テーマを一部修正（不要な場合あり）
投稿・固定ページ内のリンクを修正（プラグインで一括置換）
ウィジェットやプラグインの再設定（不要な場合あり）
Mixed Content になっていないか全ページチェック
.htaccess でリダイレクト処理
Google アナリティクスなど外部ツールの登録 URL を変更

それでは、詳細な手順を解説していきます。

WordPress サイトを HTTPS 化する手順

※エックスサーバーを例に解説していますが、「サーバー側の設定」が違うだけであとはどのサーバーでも同じです。

STEP1
エックスサーバーの SSL 設定

まずはエックスサーバーで SSL 設定を行いましょう。ここの作業は、クリックしていくだけなので簡単です。

サーバーパネルに入り、左下から HTTPS 化したいドメインを選択します。

つづいて、「ドメイン」欄の「SSL 設定」に進みます。

ドメインを確認し、「独自 SSL 設定の追加」タブをクリック。

再度ドメインを確認し、右下の「独自 SSL 設定を追加する（確定）」を押して終了です。

なお、ブログの URL に「www」をつけていない場合も「www あり」のドメインが表示されます。そのまま追加して問題ありません。

「CSR 情報（SSL 証明書申請情報）を入力する」にチェックを入れると以下のフォームが出てきますが、とくに変更しなくても大丈夫です。

青いラインで「SSL 新規取得申請中です」というメッセージが出てくるので、しばし待ちます。

これでサーバー側の設定は終わりですが、すぐに「https://～」を見ても以下のような画面が表示されるだけです。

設定完了まで 30 分～ 1 時間ほどかかり、その後サイトが表示されるようになります。

「https://～」でサイトが表示されるのを確認してから次の作業に移ってください。表示される前に WordPress 側で作業してしまうと、サイトが真っ白になって管理画面に入れなくなることもあります。

それでは、WordPress 側の設定を見ていきましょう。

STEP2
WordPress の一般設定で URL を変更する

WordPress 管理画面に入ったら、［設定］－［一般］にある URL を 2 ヶ所変更します。

「http」を「https」にしてください。

変更前	http://example.com
変更後	https://example.com

「変更を保存」をクリックすると自動的にログアウトするので、再度ログインしましょう。

STEP3
WordPress テーマをチェックする

ここからは、WordPress 内のリンクを https に置換していく地道な作業となります。

カスタマイザーからヘッダー画像やロゴなどを設定できる WordPress テーマをご利用されているなら、再度画像を指定し直してください（具体的な手順はテーマ配布元にお尋ねください）。

その他、テンプレートファイルを直接カスタマイズをした記憶があれば、リンクや画像ソースに自サイトの URL が直接記述されているところがないかチェックします。

たとえば、以下のように画像を読み込んでいる部分などがあれば、すべて「https」に変更していきます。

自サイトの URL だけではなく、古いタイプの SNS ボタンなどは HTTP のままだったりするので、こちらも要修正です。

修正箇所はテーマによって異なりますが、大抵は以下のファイル（とそこから読み込んでいるファイル）をチェックすれば大丈夫だと思います。

header.php
footer.php
functions.php
style.css

STEP4
内部リンク・画像を Search Regex で一括置換する

テーマチェックが終わったら、今まで書いてきた記事や固定ページのなかにある内部リンク・画像リンクを修正します。

プラグイン「Search Regex」を使って、「http://自分のドメイン」を「https://自分のドメイン」に一括置換するのが一番ラクです。

プラグイン新規追加画面で「Search Regex」を検索し、インストール＆有効化します。

有効化したら、［ツール］－［Search Regex］に入り、以下のように設定してください。

Source	Post Content
Limit to	No limit
Search Pattern	http://example.com（図 1）
Replace pattern	https://example.com（図 2）

入力したら「Replace」ボタンをクリック（図 3）。

すると、置換する候補がずらずら～っと出てくるので、きちんと置換されているか確認します。

問題がなさそうなら、「Replace & Save」ボタンを押して完了です。

STEP5
外部サイトから画像などを読み込んでいる箇所を修正

もし外部サイトから画像や動画などを読み込んでいるなら、それもすべて HTTPS に変更する必要があります。ただし、そのサイトが HTTPS 化されていなければなりません。

おもにアフィリエイトのバナーリンクが該当します。画像 URL が特定のパターンであれば「Search Regex」で一括置換しましょう。

カエレバで生成したアフィリエイトリンクを Search Regex で一括置換するときの設定例はこちら。

Search Pattern	http://ecx.images-amazon.com
Replace pattern	https://images-fe.ssl-images-amazon.com

アフィリエイトバナーのほかにも、古い YouTube コードなどは HTTP になっている可能性があるので、そちらも要修正です。

たぶんここのチェックと張り替え作業が、一番時間がかかる部分だと思います。

STEP6
ウィジェットやプラグインをチェックする

テーマファイルと記事内のチェックが終わったら、ウィジェットの中身やプラグイン設定もチェックしておきましょう。

サイドバーにプロフィール画像や内部リンクを入れていたり、プラグインでアイコンを入れている場合は、すべて「https://～」に変更していきます。

とにかく画像が表示されているところはすべて確認してください。

STEP7
HTTPS 化の最終チェック

ここまでの作業が終了したら、サイトを更新して「https」が緑になってるか確認してみてください。

もし緑になっていなければ、画像やスクリプトの読み込み部分で「http」のままになっている部分があるということです（Mixed Content）。

Chrome のデベロッパーツールで調べて修正していきましょう。

アドレスバーのアイコンをクリックし、「詳細」をクリック。

デベロッパーツールが出てくるので、「View requests in Network Panel」をクリック。

Network 画面に移ったら、F5 でサイトを更新します。

ページの読み込みが終わると、URL が HTTP のまま残っている箇所が表示されます。

上の例は、CSS で背景に画像を設定している部分ですね。

style.css 内の「http」を「https」に修正します。

あとはずっとこの繰り返しです。

サイトを開いてアドレスバーをチェック
「https://」が緑色になっていなければ、デベロッパーツールで原因を調べる
Mixed Content の原因となっている箇所を修正する

全ページ「https」が緑色で、デベロッパーツールもオールグリーンになっていれば OK です！

STEP8
混在コンテンツ（Mixed Content）が解消できないとき

何をどうしても Mixed Content のエラーが出てしまって https の部分が緑にならないときは、強制的に https で読み込ませることもできます。

以下の meta タグを全ページの <head> ～ </head> に入れてください。

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

または、.htaccess に以下の一文を追記するのでも OK です（※エックスサーバーはサブドメインにも影響するので注意）。

Header set Content-Security-Policy: upgrade-insecure-requests

https で読み込めない画像は表示されず、結果的に混在コンテンツエラーは出なくなりますが、ASP のインプレッションカウントに影響が出るかもしれませんので応急処置として覚えておいてくださいね。

とりあえず meta タグを入れて強制的に https で読み込み、表示されていない画像などをチェックしていく方法もありだと思います。

オールグリーンになったら、作業完了まであと一息です！

STEP9
.htaccess でリダイレクト処理

「http://example.com」と「https://example.com」は、ドメインが同じでも別サイト扱いになります。

そこで、「http://example.com」にアクセスがあったら「https://example.com」にリダイレクト（転送）されるよう設定しましょう。

.htaccess というファイルを編集する必要がありますが、ここではエックスサーバーのサーバーパネルから編集する方法を載せておきます。

サーバーパネルに入ったら、左下で SSL 化するドメインを設定しておき、「.htaccess 編集」に入ります。

以下の 5 行を追加してください。

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

初期位置は多少違うかもしれませんが、「# BEGIN WordPress」の上に入れておけば大丈夫です。

変更前

# エックスサーバーの記述

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

# END WordPress

変更後

# エックスサーバーの記述

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

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

# END WordPress

編集が終わったら「http://～」にアクセスして、きちんとリダイレクトされるかチェックしましょう。