独自SSL設定！httpからhttpsに変更するエックスサーバーでの手順

エックスサーバーでWordPressを無料で独自SSL設定して、httpからhttpsに移転しました。一般的にSSL化などといわれ、SSL通信にするとき意外と色んな工程を踏んだので、紹介します。

httpsに移行するとき、エックスサーバーで行う工程と、混在コンテンツの基本的な対処やその後の設定など回を追って説明するので、移行前の準備でチェックしてください。

エックスサーバーでアカウント作成がお済ですか？DNSの登録が済めば設定できますよ。

WordPressをhttpsに暗号化。なぜSSL通信にするの？

ネット上でページを見るとき通常、cookieなどの情報も送信されますよね。ショッピングサイトなどもそうで、その情報があるからログイン出来たり再ログインせずに閲覧したり。

見てるブラウザと情報提供するサーバー間の通信が、悪意ある人に盗まれたり改ざんされないようSSL設定で、通信を暗号化して保護された環境を作ります。利用されるユーザーが安心して情報を閲覧したり、お問い合わせする際も安全な通信環境が提供ができる状態です。

ChromeやFireFox・Edgeなどのブラウザでは鍵マークが付いたり、Chromeでは保護された通信と表示され、どんどん大手サイトがhttpsにしてる中、httpsは安心と思う人もいるだろうし、安心して通信できるページという認識は後に少しずつ広がって行くでしょうから。

～　前略　～

2017 年 10 月からは、新たに 2 つの状況（ユーザーが HTTP ページにデータを入力した場合と、HTTP ページにシークレット モードでアクセスした場合）において「Not secure」の警告が表示されるようになります。

～　中略　～

Chrome バージョン 62 以降では、ユーザーが HTTP サイトにデータを入力すると、「Not secure」警告が表示されます。

引用元：Chrome の HTTP 接続におけるセキュリティ強化に向けて

エックスサーバーなら無料でSSL通信を利用できる！

httpからhttpsへの変更はDNSの登録を終えると、簡単な設定をすれば無料でSSL通信の利用ができます。

私もこのメリットなども大きかったのでロリポップからエックスサーバーに移転しました。複数ブログを持っても、SSL通信費用は不要なのは今や常識です＾＾

LINKエックスサーバーでアカウント作成・独自ドメインの登録手順

LINKエックスサーバーで新規WordPressをインストールする手順

LINKエックスサーバーでWordPressを導入後、サーバーと管理画面でする設定

※2017/10/25　追記エックスサーバーの仕様が変更されました。

その工程がよく分からないから踏み込めないで、困ってる人に、ガッツリ工程を書きますねっ。

ChromeやFirefox・Edgeで、SSL通信で暗号化されたページは鍵マークが付く

Chromeのパソコンではアドレスバーに、鍵マークと保護された通信とが付き、スマホでは鍵マークとhttpsが緑で書かれ、Firefoxでは鍵マークにhttps://がついてます。

人によっては気にならない人も多いでしょうけど、ヘビーユーザーさんは何となく気づいて、暗号化されたものだという認識もゆっくり付いていく事も予測できたり。

Chrome・Firefoxでは、暗号化されてない・されているページに下記のようなマーク

Edgeでは、保護されたページのみ

SSL設定直後、セキュリティ証明書に問題あり・安全な接続でない・プライバシーが保護されない。とブラウザで表示され、アクセスできない

SSL設定したては、危険なページとしてページ閲覧もできません。反映するまでの1時間弱このページが公開され、書いたコンテンツは表示されません。（後述に対処あり）

Edgeでは証明書エラーとして、いかにも危険な香りを漂わせてます。

Firefoxは黄色で危険さを強調させた表示に

Chromeでは、保護されていません｜https://…と赤字で危険を知らせてたり

httpsへの登録にこのブログで40分弱かかりました。その間サイトオーナーでさえページへの閲覧・管理ができずアクセスすると、エックスサーバーでは、下記のように表示されます。

無効なURLです。
プログラム設定の反映待ちである可能性があります。
しばらく時間を置いて再度アクセスをお試しください。

Edgeでアクセスしたら、こんな感じで表示されます＾＾；

SSL設定でhttpsへ移転するときの時間帯

SSL設定を済ますと、httpからhttpsに移行するなら、上述とおりアクセスできない時間が出ます。極力アクセスが少ない曜日・時間帯など、アナリティクスで確認してSSL設定するのがベストです。

• 私の場合、一番アクセスが少ない曜日は土曜日。
• 土日祝が比較的アクセスが少ないので、祝日に設定
• 3時～5時台が少なめで4時台がベスト

4時前後に起きてSSL設定したら反映するのは5時前になります。アクセスされた人は危険なサイトだから離脱するでしょうし、気持ち悪い思いをする人もいるはずだけど、目に触れる人は少ない方が良いですから。

寝坊して、5時半から始めたとして6時頃にはアクセスが再開されます。比較的アクセスが少ない時間帯をアナリティクスでチェックしてください。

アナリティクスでアクセスが少ない時間帯のチェック方法

どうやってアクセスが少ない時間をチェックすれば良いかを、ザックリ説明しますね。アナリティクスレポートで、セグメントを『すべてのユーザー』に指定してください。

• 右サイドは、行動・サイトコンテンツ・すべてのページ

LINKアナリティクスレポート：行動・サイトコンテンツ・すべてのページへ行く

• プライマリディメンションは、その他・行動・ホスト名
  • クリックすると、your-domain.comが出て、これがあなたのブログへのアクセス
• セカンダリディメンションは、時で検索、時刻・時（または時間帯）
  • 時間（または時間帯）が出る
• ページビューをクリック
  • アクセスの少ない順に変更

これでアクセスが少ない時間帯が分かりますよ。その時間帯を狙えば危険なサイト！！という画面をあまり見られずにすみますね。

SSL対応前後、準備しておくと良い工程

独自SSL設定後はページにアクセスできないので、その前後に下準備をしておくと便利なので紹介します。

1. 万が一の時用にデータベースとファイルのバックアップをとる
2. カスタマイズしたHTML・PHPファイルとCSSファイルの書き換え
3. プラグイン『Search Regex』の導入・有効化は後でOK！

1番のバックアップは、混在コンテンツの対処で万が一何かあった時の為に、（記事・設定関連・ウィジェット・リンク・コメントなど保管する）データベースをバックアップしていると安心です。

LINKWordPressデータベースのバックアップ！エクスポート詳細設定を、初心者に説明

LINKエックスサーバーのバックアップ！データベースMySQL・WordPressファイルから復元をオススメ

でもたまにファイルの拡張子がおかしくなってる場合もあって・・・。

Tweet / Twitter

twitter.com

復元するのを前提として、FTPソフトでもとっておくと安心です。※.htaccessファイル・wp-config.php・その他カスタマイズ済みのファイルなども、念のため❦

LINK初心者向け！WordPressのバックアップ方法、記事をエクスポートする手順

2番のファイルの書き換えも、万が一用にバックアップをとり、別フォルダを作ってファイルを書き換えると便利です。

カスタマイズしたPHP・CSSファイルの混在コンテンツの対応

個人レベルでカスタマイズをしたなら、PHP・CSSファイルにhttpから始まる画像のパスやURLが入ってる事もあります。

http://my-domain.com/hogehoge/と自分のページのアドレスがファイルにあると、混在コンテンツとして表示され、修正が必要です。

事前にhttpと書かれたファイルを編集していたので、サーバーにアップロードするだけにしていると楽かもしれません。下記リンクの3章をどうぞ＾＾

LINKSSL化でhttpからhttpsに移行中、混在コンテンツの対応し緑の鍵マークを付ける工程

.htaccessファイルやrobots.txt・バックアップフォルダ内にはwp-config.phpと、データベース・FTPファイルのバックアップを置いて万が一のとき用に、バックアップも準備してました＾＾

エックスサーバーで独自SSLの追加・取得方法と手順

1. 独自SSLの設定を追加・新規取得申請
2.  .htaccessでSSL化301リダイレクト設定
   • 反映するまでブログが表示されない時間（1時間弱）
   • リダイレクトされ流入があるのを、アナリティクスのリアルタイムで確認できた

この流れで設定します。サーバーパネルにログインして『SSL設定』をクリック。

※2017/10/25　追記エックスサーバーの仕様が変更されました。

この度、エックスサーバーではドメイン設定の追加時に、
あわせて無料独自SSLを有効化する機能を追加いたしました。

これにより、ドメイン設定を追加するのみで、
SSL化されたWebサイトの運用が可能になります。

～　中略　～

追加するドメイン名を入力した後、
「無料独自SSLを利用する」にチェックを入れてください。
（初期状態で「無料独自SSLを利用する」がチェックされています）

ドメイン設定の追加とともに、自動的に無料独自SSLが設定されます。

引用元：ドメイン設定の追加だけで無料独自SSLが利用できる！ドメイン設定機能強化のお知らせ｜エックスサーバーサポート

初めての場合、SSL設定の一覧には何も登録されてない状態だから、「独自SSL設定の追加」というタブをクリックします。

「CSR情報を入手する」をクリックすると、SSL証明を申請する情報が見れるけど、特に変更しなくてもOK！

「独自SSL設定を追加する（確定）」をクリック。

少し待ったら独自SSL設定の追加が行われます。

SSL設定の一覧は、こんな感じで追加されてればOK！

SSL化のhttpsに転送しURL統一！.htaccessで301リダイレクトを追記

URLの統一と、http://からのアクセスでもhttpsのブログへ迎えるように転送：リダイレクトさせる作業も必要です。

サーバーパネルのホームページの.htaccess編集をクリックして、該当サイトを選んだら、.htaccess編集をクリックしたら追記していきます。

RewriteEngine On
# www無しのURLに統一
RewriteCond %{HTTP_HOST} ^www\.domain\.com
RewriteRule ^(.*) http://domain.com/$1 [R=301,L]

# httpsに統一
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

上記みたいになるよう、追記。wwwの統一など記載済みなら、下記を追加してください。

RewriteEngine On
# httpsに統一
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

これでhttps://your-domain.comにアクセスしたいトコロですが、SSL設定でhttpsに変更するのに時間が必要で、すぐにアクセスできません。

※念のため。アクセスできるようになってから、上記リダイレクト処理をしてください。

https設定が反映したら確認・保存し、次にWordPress管理画面でhttpからhttpsに変更する作業をします。

WordPress設定変更！httpからhttpsにURLを変更

WordPressのダッシュボード、『設定』より『一般』をクリックした一般設定を開き下記のアドレスを『http』の後ろに『s』を追加して『https://domain.com』に変更します。

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

http://bibabosi-rizumu.com ➡ https://bibabosi-rizumu.com に変更したら、『変更を保存』をクリックして反映させてください。

httpをhttpsに変更、プラグインSearch Regex・テキストエディタで置換

コンテンツ内の画像や内部リンクは、httpのURLで書かれてますよね。httpsに変更させたいので、プラグイン『Search Regex』で記事内を検索、表示されたリンクを全て置換してSSL通信で保護された環境を作ります。

記事内にある文字列全て置き換えるので、検索した結果をチェックしてください。

• プラグイン『Search Regex』を新規導入・有効化
• ツールより『Search Regex』をクリック

記事内のhttpのアドレスを検索

• Source：【Post content】記事ページ
• Search patternにhttpのアドレスを追加
  • http://my-domain.com
• サーチパターンを、httpのアドレスにして一度 Search ボタンをクリック

Search Regexで検索後、httpからhttpsに置換・保存方法

• 一度サーチして、リプレースのパターンを必ず確認してください＾＾

置換保存をしてデータベースを書き換えるので、検索結果を確認して問題なければ下側、リプレースパターンをhttpsのアドレスに追加して一括置換・保存します。

• Replace patternにhttpsのアドレスを追加
• https://my-domain.com
• Replace & Save ボタンで置換・保存

これで記事内のhttpがhttpsに変更しました。あっという間に置換完了です！

CSSやPHPファイル、headからhttpのURLを読み込んでいる場合

スタイルシートやPHPファイルにhttpを指定したパスがあれば、鍵はつかないので、チェックしてください。

この場合は混在コンテンツとなるので、要素の検証のコンソールというものでどの部分がSSL対応してないかをチェックできます。

詳しい方法は、下記リンクをどうぞ＾＾

LINKSSL化でhttpからhttpsに移行中、混在コンテンツの対応し緑の鍵マークを付ける工程

アフィリエイトリンクを置いている場合

アフィリエイトのリンクもhttpページを読み込んでいれば鍵に注意マークがついて保護された通信ができません。これは混在コンテンツになる仕様です。混在コンテンツが不明なら混在コンテンツの対応し緑の鍵マークを付ける工程をチェックしてください。

プラグイン『Search Regex』で『Post contents』記事内を検索し、置換すれば対応できますよっ。

LINKSSL移行中のアフィリエイトリンク！混在コンテンツの対処

 さいごに

全ページを確認していけば、混在コンテンツが出るページもありますが、確実に減っていくのでもう一息ガンバってくださいねっ♪

全て鍵マークが付いたら、アナリティクスでhttpからhttpsにURLの変更・サーチコンソールでhttpsに移行・追加します。設定方法に加えて、サーチコンソールの使い道など軽くチェックしませんか！？

LINKサーチコンソールでサイト追加の設定方法！アナリティクスと連携・httpからhttpsでSSL対応後の行程

それでは、かうたっくでした。