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

httpからhttps、エックスサーバーでSSL対応

エックスサーバーで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エックスサーバーでSSL通信設定!新規WordPressをインストールする手順

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

ブログの安心度のためブログページとブラウザ間を暗号化された通信に変えたSSL通信をやっても良いんじゃないかしら。と思うワケです。

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

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

ChromeのSSL対応ページ:緑の鍵と保護された通信

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

SSL対応ページ:鍵マークが付く|FireFox

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

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

保護されていないページ

鍵に注意マーク

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

EdgeはSSL対応時のみ鍵マークが付く

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

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

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

このWebさいとのセキュリティ証明書には問題があります

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

安全な接続ではありません

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

この接続ではプライバシーが保護されません

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

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

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

SSL設定直後、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ファイルから復元をオススメ

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

復元するのを前提として、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設定』をクリック。

サーバーパネルの標準ssl設定の場所

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

エックスサーバーの独自SSL設定、ドメインの追加

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

CSR情報(SSL証明書申請情報)

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

SSL新規取得中の画面

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

独自SSL設定の追加、完了SSL設定の一覧は、こんな感じで追加されてればOK!

SSL設定の一覧、ドメインが追加された。

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

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

.htaccessの編集場所

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

.htaccess編集画面にhttpsに301リダイレクトを追記する場所

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

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

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

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

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

WordPressの管理画面でURLの変更

  • 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』をクリック

まずはデフォルトのまま

【Source】:【Post content】

ポストコンテンツは内部リンク画像のパスなど記事ページ内を、検索・置換・保存を一括で変更するものです。

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

Search Regexの使いかた。httpのアドレスをページ内検索する

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

<img src=”http://domain.com/wp-…

<a href=”http://domain.com …

下に検索された結果で、このような文字列がズラーっと並びますよね。確認してまちがいなければ置換保存します。

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

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

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

Search Regex

Search Regexで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対応後の行程

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

トップへ戻る