エックスサーバーでWordPressブログをHTTPS(常時SSL)化する手順

HTTPS

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

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

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

HTTPS化(常時SSL)とは

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

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

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

参考 Google ウェブマスター向け公式ブログ: HTTPS をランキング シグナルに使用します

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

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

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

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

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

WordPressサイトをHTTPS化する手順

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

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

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

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

エックスサーバー サーバーパネルでドメインを選択

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

エックスサーバーSSL設定欄

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

エックスサーバー独自SSL追加設定

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

エックスサーバーSSL確定

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

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

エックスサーバーCSR情報設定

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

エックスサーバー新規SSL取得申請

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

Firefoxの表示
Firefoxの表示

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

HTTPS設定完了

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

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

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

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

WordPress一般設定-アドレス

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

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

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

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

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

ヘッダー画像などを設定できる WordPress テーマをご利用されているなら、再度カスタマイズメニューより画像を指定し直しましょう(設定方法は各テーマ配布元にお尋ねください)。

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

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

WordPressテーマ内のURLを修正

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

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

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

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

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

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

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

Search Regexインストール

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

Search Regex 設定例
SourcePost Content
Limit toNo limit
Search Patternhttp://sample.com(図 1)
Replace patternhttps://sample.com(図 2)

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

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

Search Regex 置換確認

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

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

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

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

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

Search Patternhttp://ecx.images-amazon.com
Replace patternhttps://images-fe.ssl-images-amazon.com

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

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

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

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

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

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

STEP7
HTTPS化の最終チェック

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

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

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

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

ChromeでHTTPS詳細を確認

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

デベロッパーツールでHTTPを確認

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

デベロッパーツール Network画面

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

デベロッパーツールでHTTPリクエストを発見

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

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

CSS内の背景読み込み部分

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

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

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

HTTPS化に成功

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://sample.com」と「https://sample.com」は、ドメインが同じでも別サイト扱いになります。

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

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

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

エックスサーバー .hraccess編集

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

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

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

.htaccess リダイレクト設定例
■変更前

 

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

# 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

 FTP で .htaccess を直接編集する場合はこちら

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

https化を確認

もしリダイレクトされない or サイトが真っ白になったときは、全角スペースやよけいな文字列が入っているなどの記述ミスが考えられます。もう一度追記した部分を削除してやり直してみてください。

 500 Internal Server Error(HTTP500エラー)の原因とWordPressでの解決策

これで作業完了です!

外部サイトのURLも変更しておきましょう

サイトの HTTPS 化は以上で終了ですが、Google アナリティクスなど外部ツールと連携している場合は、登録してある URL を修正する必要があります。

Google アナリティクス設定変更

Google アナリティクス は、[アナリティクス設定]-[プロパティ設定]からデフォルトの URL を「https://」に変更します。

Google Analyticsでhttps設定

トラッキングコードはそのまま使えるので、貼り替える必要はありません。

Google Search Console 新規追加

Search Console は、新規サイトとして追加する必要があります。

Google アナリティクスとデータ連携していた場合、プロパティ設定にある「Search Console を調整」から、新たに https で登録したサイトと紐づけてください。

Search Console調整

その他チェック項目

代表的な変更点は以上ですが、その他外部サイトに登録してある URL も随時変更しておきましょう。

  • ブログランキング
  • ASP
  • SNS

お問い合わせフォームからの自動返信に含まれている URL など、ほかにも見落としがないかチェックしてみてください。

過去記事のメンテナンスも合わせて行うとよいですね。

WordPress HTTPS化まとめ

長々となってしまいましたが、HTTPS 化の基本的な流れはこちらです。

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

どうしても作業に不安があったり途中でうまくいかなかった場合は、代行作業などご相談に乗ります。お気軽にお問い合わせください。

なお、プラグインで超簡単に HTTPS 化する方法もあるので、こちらも試してみてください!

それでは、また。

Naifix Limited

無料プレゼント

有料会員向けに配信していた「ブログのアクセス数を最大限に増やす SEO 施策」を今だけ無料でプレゼントしています。

Naifix 編集部

Web コンサルティング業務を中心に、サイト制作・コンテンツ販売・メディア運営代行業務を行っております。本ブログ(Naifix)では、おもにブログ初心者向けのノウハウを無料で配信しています。

執筆・監修 Direx Marketing, Inc.