【エックスサーバーで常時SSL化】WordPressでhttpsにする設定方法と手順一覧

ブログはhttpSにしよう!って聞いたんですけど、やり方がわかりません。エックスサーバーでの設定も必要なんですよね?

こんな質問にお答えします!

ブログやホームページなどのWebサイトを「http://」から「https://」に変更(「SSL化」と言う)することは、あなたのサイトの信頼性を確保するためにも必須です。

今までWordPressでブログを構築していた人はもちろん、新規ブログを立ち上げる際にも必ず行いましょう。

しかし、SSL化はメリットが多い分、設定が多いというデメリットも聞いたことがあるかもしれません。

だてっち
でも大丈夫です!設定手順を丁寧に解説します!

 

というわけで今回は、

  • WordPressでhttpsにする(SSL化)方法
  • エックスサーバーの設定手順
  • httpsにならない時の対処法

などを解説します。

見慣れない単語が並んで圧倒されるかもしれませんが、お伝えする手順で進めれば難しくはありません。安心してくださいね。

WordPressの常時SSL化とは?

常時SSL化とは、ブログ全体をHTTPSにすることです。

SSL化することで通信を暗号化できるため、第三者による情報の盗聴や改ざんを防ぐことができます。

だてっち
ウェブサイトのセキリュティ強化に欠かせません!

SSL化のメリット

ブログをSSL化(https化)には次のようなメリットがあります。

  • セキュリティを強化できる
  • サイト訪問者へ不信感を与えない
  • SEOの効果も高まる

SSL化したブログ・サイトは、通信が暗号されているため、読者が安全にサイトを閲覧できます。

ですので、SSL化されていないサイトで、ログインIDやパスワード、メールアドレスなどの個人情報を入力しないようにしましょう。

悪意のある第三者から情報が簡単に見られてしまいます。

SSLが反映されているかどうかはどうやって判断するの?
だてっち
下の画像を比較してください。
エックスサーバーでWordpressをSSL化(https)したサイト・していないサイト
さすがに「保護されていない通信」と書いてあると不安になりますね。
だてっち
そうなんです。この表示だと読むの離脱しちゃいますよね。

 

また、サイトのSSL化はSEO対策にも効果があると言われています。

Gmail 、 Google 検索、 YouTube では以前からセキュアな接続を実現しており、昨年は、検索結果での HTTPS URL の掲載順位を若干引き上げる取り組みにも着手しました。(…) Google は、より多くの HTTPS ページを探すよう、インデックス システムを調整していることをお知らせします。

引用元:Google検索セントラル

だてっち
ここまでGoogleが明示しているので、SSL化は必須ですね!

 

エックスサーバーでのSSL化(https)の手順

  1. バックアップをとる
  2. エックスサーバーでSSL設定を行う
  3. WordPressの設定からURLを変更する
  4. Search Regexで内部リンクを置換する
  5. .htaccess にリダイレクト用のコードを追記する

といった手順で行いますので、1つずつ解説していきます。

1.事前にデータベースのバックアップをとる

まずは、事前にデータベースのバックアップをとります。

「もし間違えて設定してしまったらどうしよう!?」という場合でも、バックアップをとっておけば問題ありません。復元してもう一度やり直せばOKです。

バップアップにはプラグインを使用します。

  • BackupWPup
  • UpdraftPlus

バックアッププラグインはこのどちらかがおすすめですし安心です。

僕はどちらも利用しましたが、復元しやすいのはUpdraftPlusで情報が多いのは現在のところBackWPupですね。

あなたのテーマと互換性のあるもの、使いやすいと思ったものを選んでください。

 

今回に限らず、WordPressの設定を直接変更する場合は、必ずバックアップをとる癖をつけましょう。

サーバーによっては、サーバー側でバックアップをとってくれている場合もありますが、復元する際にほとんどの場合お金がかかるので、可能な限り自力でやっておいた方が良いでしょう。

だてっち
ちなみに僕は30サイトほど同時に対応したので全部外注(数万円ほど)しました。数日〜1週間以上かかりますので、外注する際は計画的に行いましょう。

BackWPup(プラグイン)の設定方法

今回はBackWPupのプラグインを利用して解説します。

まずは、BackupWPupのプラグインをインストールして有効化しましょう。

プラグインBackWpupのインストール方法

 

次に、Wordpress 管理メニューの「BackWPup→ Dashboard (ダッシュボード)」メニューを選択します。

プラグインBackWpupのダッシュボード

 

ダッシュボード画面が表示されると、「One click backup, Download database backups」もしくは下のように「データベースのバックアップをダウンロード」と表示されます。クリックして SQLファイルを取得します。

プラグインBackWpupでバックアップ

 

サイト名とデータベース名から名前が付けられたSQL ファイルがダウンロードされます。

だてっち
時間がかかる場合があるので、しばらく待ちましょう。

2.エックスサーバーでSSL 設定を行う

次にエックスサーバーの「サーバーパネル」にログインします。

SSL化(https)はエックスサーバーのサーバーパネルから

 

サーバーパネル ログインURLはこちら
» https://secure.xserver.ne.jp/xapanel/login/xserver/server/

 

ログイン後は、サーバーパネル内のドメインから「SSL設定」をクリックしてください。

エックスサーバーのサーバーパネルでSSL化(https)をする

 

ドメイン選択画面で、SSL化したいドメインの列の「選択する」をクリックします。

 

エックスサーバーのサーバーパネルでSSL化をするドメインを選ぶ

 

SSL設定画面で、「独自SSL設定の追加」のタブをクリックします。

 

エックスサーバーのサーバーパネル「SSL設定」で独自SSL設定の追加

 

設定ドメインが正しいことを確認し、独自SSL設定を追加する(確定)」をクリックします。

 

エックスサーバーのサーバーパネル「SSL設定」で独自SSL設定の追加を確定する

だてっち
設定対象ドメイン下の「CSR情報(SSL証明書申請情報)を入力する」のチェック項目は選択しなくてOKです。

 

その後は「SSL新規申請中です。しばらくお待ち下さい」と表示されます。

エックスサーバーのサーバーパネル「SSL設定」でSSL新規取得申請中の画面

 

その後、「独自SSL設定を追加しました」というメッセージが表示されます。

エックスサーバーのSSL設定追加画面

 

最後に、「SSL設定一覧」を開くとこのようにSSL用アドレスが表示されます。

エックスサーバーのSSL化の後のSSL設定の一覧画面

だてっち
SSL化されたサイトが表示されますが、先程のメッセージでもあったように、設定が反映されるまで最大1時間程かかります。
ここでちょっと一息…

 

下記のメッセージが表示される間は、次に進むことはできません。

反映されていない間はエラー画面が表示されます。サイトが正しく表示されるようになってから次の設定に進みましょう。
・この接続ではプライバシーが保護されません:Chrome
・安全な接続ではありません:Firefox
・このWebサイトのセキュリティ証明書には問題があります:Microsoft Edge

3.WordPressの設定でURLを変更する

設定が反映されたら、WordPressの設定からURLを変更します。

アドレスを(URL)を「https」表記に変更する

SSL化したいブログ・サイトのWordPress管理画面を開きます。

「設定」→「一般」から、

  • WordPressアドレス(URL)
  • サイドアドレス(URL)

の2箇所を「https」に変更してください。

だてっち
直接入力でsを追加すればOK!

https化のワードプレスでの設定

https化のワードプレスでの設定

 

設定できたら「変更を保存」をクリックします。

そうすると再度ログイン画面に飛ぶのでログインします。

URLがhttpsになっていればきちんと反映されている証拠です!

4.Search Regexで内部リンクを置換する

次に、Search Regexというプラグインで内部リンクを置き換えます。

SSL化のための内部リンク置換はプラグインSearch Regexで行う

だてっち
プラグインをインストール後は「有効化」をお忘れなく!

Search Regexの設定法

WordPress管理画面の「ツール」から「Search Regex」をクリックします。

プラグインSearch Regexの使い方

 

次にこのような画面が表示されます。

プラグインSearch Regexの設定方法

以下の項目通りに設定してください。

  • Source:Post content(デフォルト)
  • Limit to:No limit(デフォルト)
  • Order By:Ascending(デフォルト)
  • Search pattern:http://wp-simplicity.com(SSL化する前のあなたのURL)
  • Replace pattern:https://wp-simplicity.com(SSL化後のあなたのURL)
  • Regex:選択しない

設定ができたら、真ん中の「Replace »」をクリックします。

 

すると、置換した結果を一時的に表示した一覧が並びます。

プラグインSearch Regexの設定で置換前と置換後を確認

実際に「Search Regex」が置換する部分は上の画像の赤字の部分。

薄黄緑色の部分が置換前(Postの下)、下の薄黄色の分が置換後(replaced with: の下)です。

この時点で、置換前後のURLが間違っていないかを確実にチェックしておきましょう!

だてっち
置換後は元に戻せないので注意してください。

 

置換前、置換後全てのURLが正しいことを確認する

置換前・置換後全てURLが正しいことを確認できたら、「Replace&Save」をクリックします。

プラグインSearch Regexの設定で置換後を確認後確定

 

一度サイトを更新して、SSL化が反映されたかを確認します。

下のように「鍵マーク」「保護された通信」とChromeで表示が出ればOK!です。

SSL化(https)が成功したサイトの表示

 

5. .htaccess にリダイレクト用のコードを追記する

実は、ここまでの設定が完了した時点では、まだ『http://』でも『https://』どちらでも表示が可能な状態です。

そのため、https://」のみで表示されるための設定が必要です。

だてっち
この設定に必要なのが、.htaccess(ドットエイチティーアクセス)です。

 

エックスサーバーのサーバーパネル「.htaccess編集」を選び、SSL化したいドメインの「選択する」をクリックします。

 

ssl化(https)のエックスサーバーでのhtaccess編集でドメイン名を選択

 

「.htaccess編集」のタブをクリックし、画像のように以下の表記になっていることを確認します。

ssl化(https)のエックスサーバーでのhtaccess編集での確認項目

  • # BEGIN WordPress
  • # END WordPress

 

 

次に、.htaccess枠内の『# BEGIN WordPress』の上に以下のコードを入れてください。

 

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

 

挿入すると以下のようになります。

ssl化(https)のエックスサーバーでの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} !on
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]</IfModule>

 

文字列に重複した箇所はある場合には、以下の赤字の部分で表記したように、異なる文字列の部分だけを挿入してください。

 

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTPS} !on
RewriteRule
^(.*)$https://%{HTTP_HOST}%{REQUEST_URI}
[R=301,L]
RewriteBase /
RewriteRule ^index¥.php$ – [L]RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]</IfModule>
# END WordPress

 

これらが確認できたら、「.htaccessを編集する」をクリックします。

ssl化(https)のエックスサーバーでのhtaccess編集画面

 

ここまでの.htaccess を編集する作業は、今まで使っていたhttpのURLからうまくhttpsのURLにリダイレクトがかかるようにするために行っています。

うまくリダイレクトができるようになったかどうかは、

  • 検索エンジンで元の http://~の URLで検索
  • すぐに https:// ~のURLに変換されて検索されるか ➡ されてたらOK!

で確認することができます。

 

SSL化(https)のその他の設定

アフィリエイトを行うために、次の設定も必要です。

  1. Search Console
  2. Google Analytics
  3. アフィリエイトリンク修正

ひとつずつ解説します!

だてっち
SNSやGRCの設定をしておいた方が良い場合もありますが、僕はしていないのでここでは割愛します。

SSL化のSearch Console(サーチコンソール)での設定

まずはSearch Consoleにログインします。

画面左上のURL部分をクリックし、「プロパティを追加」をクリック。

ssl化(https)の際のサーチコンソールの設定方法

 

次に、プロパティタイプを選びます。

このような画面が表示されますので、右の「URLプレフィックス」に登録するドメインを入力します。

だてっち
必ずhttpsを含めたURLを入力しましょう!

 

例えば、僕のサイトであれば「https://datetti.com」を入力します。

入力後は「続行」をクリック。

所有権の確認に使える手段は、

  • HTMLファイルの設置
  • HTMLタグの挿入
  • Google Analyticsアカウント
  • Googleタグマネージャー
  • ドメイン名プロバイダ

から、お好きな方法を選んでOKです。

所有権の確認方法を選んだら「確認」をクリックしましょう!

だてっち
確認が完了したら、通常どおりサーチコンソールが使えているはずです。

SSL化のGoogle Analytics(グーグルアナリティクス)での設定

GoogleAnalyticsにログイン後、左のサイドバー下から「管理」を選びます。

 

 

「プロパティ設定」をクリック。

 

 

デフォルトのURLを「https:// ~」にドメインに変更し、「保存」をクリックしていきましょう!

 

 

だてっち
これで解析ツールの設定は完了です!

SSL化設定でのアフィリエイトリンクの修正

Search Regexの今までの操作では、アフィリエイトリンクが『http』のままになっています。

そのため、Search Regex を使って個別にアフィリ エイトリンクも SSL化する必要があります。

ASPによっては、ASP側で変更してくれている場合もあるのですが、

  • アクセストレード
  • レントラックス

のURLが変換されないようですので変換方法を記載します。

 

他のASPもリンクが古い場合は http のままになっているので確認するよにしましょう。

大手の場合はだいたい大丈夫ですが、小規模のクリローズドなASPは必須です。

アクセストレードの場合

アクセストレードのリンクは Search Regex て赤 字の部分を変更してください。

 

【変更前】

<ahref=”http://h.accesstroade.net/sp/cc?rk=000000
rel=”nofollow” target=”_blank”> 自 由 テキスト <img
src=”http://h.accesstrade.net/sp/rr?rk=000000
width=”T” height=”1″ border=”0″ alt=”” /></a>

 

【変更後】

href=”https://h.accesstrade.net/sp/cc?rk=000000
rel=”nofollow” target=”_blank”>
7 + 7 + <img
src=”https://h.accesstrade.net/sp/rr?rk=000000
width=”1″ height=”1″ border=”0″ alt=”” /></a>

 

レントラックス

レントラックスは赤字、青の部分をそれぞれ Search Regexで変更してください。

 

【変更前】

<imgsrc=”http://www.rentracks.jp/adx/p.gifx?idx=000000
border=”0″ height=”1″ width=”1″><ahref=”http://www.rentrocks.jp/adx/r.html?idx=000000&
dna=0000″ target=”_blank”>自由テキスト</a>

 

【変更後】

<imgsrc=”https://www.rentracks.jp/adx/p.gifx?idx=000000
border=”0″ height=”1″ width=”1″><ahref=”https://www.rentracks.jp/adx/r.html?idx=000000
&dna=0000″ target=”_blank”>
自由テキスト</a>

 

WordPressがhttpsにならない?エラー&対処方法

画像やテーマによってはエラーが出る場合、下記の解消法を試してみてください。

  • サイトロゴ画像を変更
  • トップページの画像
  • サイドバーの画像やリンク
  • プラグイン内のエラー
だてっち
これらの画像はSearch Regexの一括変換の対象外なので、直接『https:// ~』の表記に変更したり、画像を登録し直す必要があるんです。

サイトロゴ画像を変更

ssl化(https)でエラーが出た場合ワードプレスでロゴを変更する

 

まずはWordPress管理画面の『外観』から『カスタマイズ』→『サイトロゴ・アイコン』をクリックしていきましょう。

ロゴ画像をアップロードの欄に、アップロードされている画像を消し、再度『画像を選択』よりアップロードし直していきます。

トップページの画像

ssl化(https)でエラーが出た場合ワードプレスでメイン画像を変更してみる

トップページの画像も同様に対応していきましょう。

だてっち
全てのテーマで起きるわけではないですが、STORK・TCD・AFFINGERでエラーが確認されているようです。

サイドバーの画像やリンク

WordPressの管理画面で『外観』→ウェジェットをクリック。

『メインサイドバー』や『フッター』などに挿入しているテキスト内リンクが『http』のままになっていないか確認し、『https』に書き換えましょう。

プラグイン内のエラー

WordPressプラグイン『postsnippets』など、プラグインの設定で使用しているリンクはSearch Regexの一括変換の対象外ですので、個別で『https』の表記に書き換える必要があります。

TCDの場合

『LazyLoad』のプラグインが有効化されていると、SSL後画像が表示されません。『LazyLoad』のプラグインを停止すると直ります。

STORKの場合

LPページの表記がSearch Regexの一括変換の対象外ですので、個別に変換しましょう。

moreタグの場合

記事内に『more』タグを使用している場合、このリンクはSearch Regexの一括変換の対象外ですので、個別に変換しましょう。

【エックスサーバーで常時SSL化】WordPressでhttpsにする設定方法と手順まとめ

エックスサーバーでワードプレスを常時SSL化するやり方をご紹介しました。

サイトのSSL化(https)は、あなたのブログのセキリュティを強化し、サイト訪問者への安心感を与えますので必ず対応してください。

設定箇所は複数ありますが、お伝えした流れで取り組んでくださいね。

複数サイトがある方は外注し、時間を有効に使うことも検討してみてみましょう。

エックスサーバーでWordPressをSSL化(https化)する方法・手順
最新情報をチェックしよう!

『ブログの教科書』付きメール講座

今直ぐはじめたいに答える!「動画+テキスト」で丁寧な解説できっかけがつかめた!好評の『ブログの教科書』付きで、0からはじめるための「結果が出る要素」を詰め込んでお届けします!

CTR IMG