エックスサーバー環境での常時SSL化(https化)のやり方・手順

エックスサーバーで運営している私と妻のブログ5つを、全て常時SSL化(https化)してみました。

今後のことを考えるとを考えると、もはや避けて通ることが出来ない常時SSL化
そのやり方・手順を自分なりにまとめてみたので、まだの人は参考にしてください。

常時SSL化、もはや待った無し!!

今回の記事すんごい長いです。

常時SSL化に必要なもの(あると捗るもの)

前回の記事の続きです。

まずは常時SSL化(https化)に必要なものを準備。
といっても、たったの2つだけ!

  • FTPソフト(必須)
  • Firefox(あると便利)

これだけです。

FTPソフトはFilezillaなんかが有名で使いやすくてオススメです。

Filezillaについては↓こちら。
FTPソフトの使い方も覚えよう!Windows・Mac・Linux対応の「Filezilla」なら簡単

それとブラウザのFirefox
理由については後述。

こちらも説明不要の有名ブラウザなので、特に用意に困ることはないでしょう。

ちなみにUbuntuならFirefoxは標準のブラウザだし、Filezillaも簡単に導入可能です。
 

この2つが揃ったなら早速いきましょうか!

、、、と、その前に恒例のバックアップをキチンと取っておきましょう。

FTPソフトを使うバックアップ方法はこちら。
→WordPressでテンプレートの変更時に絶対するべきバックアップの簡単な方法

バックアップも取ったし、これで安心!
さあLet’s 常時SSL化!!

え?これだけ?超簡単じゃないか!

じゃあ早速いきます。
まずエックスサーバーのサーバーパネルにアクセスします。

右の方にあるドメインの「SSL設定」をクリック。

このように複数ある場合は、SSL化するドメインを選択します。(通常は一つでしょうね。)

設定対象ドメインに自分のドメイン名があるのを確認して、右上の「独自SSL設定の追加」をクリック。

ここでも、真ん中の「サイト欄」に自分のドメインがあるのを確認して、右下の「独自SSL設定を追加する(確定)」をクリック。

赤い枠内に書いてあるように、設定の反映まで最大1時間程度掛かります。

私の環境では、どのドメインでも30分も掛からないくらいで反映されました。
 

左上の「SSL設定の一覧」をクリック。

真ん中にある「SSL用アドレス」を見ると、「https〜」となっている自分のドメインが記載されていますね。早速ドメイン名をクリックしてみます。

おっと!勇み足!!

素直に数十分は待ちましょう。

それにしても凄い表示ですな、、、。
自分のブログに、こんな表示が出るようになったら恐ろしくて夜も寝られませんね。

基本的には、こういうことなので他のことでもやりながら気長に待ってください。

しばらく待ってから(30分〜1時間ほど)、自分のhttps化したドメインをクリックすると、無事にサイトにアクセス出来るようになります。

元のhttp〜のドメインは、待っている間も普通にアクセス出来ますのでご安心を!
 

https〜の方でもアクセス出来るようになりましたが、ご覧のように表示は元のまんまで、特に変わったところはありません。
それもそのはず、「設定」をしないと切り替わらないので早速やっていきましょう。

ログインして、ダッシュボードにアクセス後、「設定」から「一般」をクリック。

このように「http:」となっているのを、、、。

「https:」に書き換えてください。

「変更を保存」を忘れずに!

ここで再ログインを促されますので、もう一度ログインしてください。

サイトを見ても何も変わってないけど、、、。
(ブログによってはこの時点で「保護された通信」に変わっているかもしれません)
こんな感じ↓

ここはブログの作り方によって違います。

でも、基本的にはこれでファーストステップは完了です。
ただし、当然まだ完全ではありません。

その他にまだまだ修正していかないと、完全にSSL化されていないので次のステップにいきますよ。

その他のリンクなどを一括でhttps化するプラグインを使う

ブログ内のリンクやら何やらのURL部分を手直しでやるのは無茶苦茶大変なので、こういうことはプラグインに任せましょう。

ということで、その便利なプラグインが「Search Regex」です。

プラグインの新規追加から、、、。

Search Regex」と検索して、、、。

「今すぐインストール」から「有効化」で準備OKです。

ダッシュボードの「ツール」から「Search Regex」をクリックして設定に入ります。

設定画面の一番上の3項目は、何も変更せずにそのまま。

その下、2行目に「これまでのhttp:のURL」を、3行目に「新たなhttps:のURL」を書き込みます。

ここまでやったら、下にある「Replace」をクリック。

バーっと、「http〜からhttps〜に変更になるURL」が並びます。

ここではまだ「実行」はしていません。一覧が並んで、「これでいいかい?」と聞かれているだけです。
その数は膨大!なんですが、このあと実行する操作は取り消し出来ません。

なので、面倒でも正しいURLになっているか一通りチェックするようにしてくださいね。

私ですか?画像の左上に表示があるように「2137」もの一覧があります。えー、正直全部チェックしてません!ダメですよ。ちゃんとチェックしましょうね。
 

ちゃんと全部チェックして確認が終わったら、覚悟を決めて「Replace & Save」をクリックします。

何度も言いますが、この操作は後戻り出来ません。

止まるんじゃねえぞ、、、。
オルガ・イツカ by 鉄血のオルフェンズ

ここまでやっておいて「戻る」のもアレなんで、前に進みましょう。(自己責任で!

勇気をだして「Replace & Save」をクリックすると、こんな感じで「成功したよ〜」と教えてくれます。
 

ここは環境(テンプレートなど)によっては、一瞬で終わったり、物凄い時間が掛かったりします。時間が掛かる場合は、フリーズしてる?と思うくらいに固まりますが、何も操作せずに放っておいてください。風呂にでも入っている間に終わってます。

このブログ内部のURLの変換は、取り敢えずOKです。(まだ完璧じゃない)

一旦次のステップに進みます。

FTPソフトでサーバー内部のデータを書き換える!

さて次はサーバー内の「.htaccess」というファイルを編集します。

今はまだ「http〜のサイト」と「https〜のサイト」の両方が混在しているようなものなので、アクセスを「https〜のサイト」だけに行くようにしないといけない訳です。要するに「リダイレクト」の設定をするということ。

まあ小難しい話はこれくらいにして、とにかくやってみましょう。
やることは簡単です。

まずはFTPソフト(私はFilezillaを使用)を使って自分のブログが入っているサーバーにアクセスします。
見るべき箇所は、赤枠内のところです。

常時SSL化するドメインをダブルクリック。

ドメインに紐付いているファイルが見えるので、その中の「public_html」をダブルクリック。

さらに内部が見えるので、その中の「.htaccess」を見つけます。

見つけたら、これを「右クリック」から「ダウンロード」をクリックして、自分のパソコン内にダウンロードします。

で、ダウンロードした「.htaccess」を探すんですが、、、。

ない!どこにもない!!
と一瞬焦ったのですが、、、。大丈夫!

Linux(Ubuntu系のChaletOS)の場合は、

ファイルマネージャーを開いて、上部メニューの「表示」をクリック。

表示されるサブメニューの中から「隠しファイルを表示」をクリックします。

そうすると、、、。

「ダウンロードフォルダ」内に、しっかりあるのが確認出来ました。
 

ここでの作業が終わったら、元のように「隠しファイルを表示しない」に戻しておきましょう。
ゴチャゴチャして見にくいので。

この「.htaccess」ファイルファイルは非常に大事なファイルなので、一旦これをコピーしておくことをオススメします。
この後の編集作業はコピーしたファイルを編集して、「原本」であるこの「.htaccess」は何かあったときのために保存しておくようにしましょう。

このファイルのコピーを「右クリック」から表示される「テキストエディター」(メモ帳)〜私の環境では「mousepad」〜で開きます。

そして、このファイルの先頭部分に、

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

この上記文字列をそのままコピペして貼り付けて「保存」してください。

次に、この編集・保存した「.htaccess」ファイルを元の場所にアップロードします。

このように「.htaccess」がる箇所に、「ドラッグ&ドロップ」で放り込んでください。そして「上書き保存」します。

これで「リダイレクト」の作業は完了です。
試しに「元のhttp〜」からアクセスしても、「新たなhttps〜」のURLになっているハズ。

それが確認出来たら続いてのステップにいきましょう。

Firefoxを利用してhttps化の完全チェック!

さてさて、ここまで来たら後少し!

まだ完全にチェックが終わっていない各種URLのhttps化を完全なものにしていきましょう。
ここで活躍するのがFirefoxです。
 

もちろん「Chrome」でも出来るんですが、ハッキリ言ってここからの作業に関してはFirefoxの方がやりやすいです。

ここまで常時SSL化の作業を進めてきましたが、

このように、未だ完全にSSL化出来ていませんね。
これまでの作業のうちで、「Search Regex」を使って大部分をhttps化したのに何故?

それはあくまでも「大部分」なわけで、「全部」じゃないから。
要するに「https」と「http」がブログ内に混在しているということなんです。
(特に「画像」や「アイコン」が多いです。)

で、この未だ「http」のままになっている箇所を探すのに、非常に便利なのがFirefoxというわけです。

まずは、Firefoxの「デベロッパー(開発者)ツール」を開いてみます。
Firefoxを起ち上げて、自分のブログにアクセス。その状態で「F12キー」を押してデベロッパーツールを開いて、その中の「コンソールタブ」を開きます。そうすると、、、。

ご覧のように、「混在表示コンテンツ」というものが表示されて、何が原因でSSL化が出来ていないのか?を教えてくれます。
 

この機能は「Chrome」にもありますが、Firefoxの方が「日本語化」がされているので、分かりやすいと思います。

もうひとつ別の方法でチェックすることも可能です。
そして、ここからがFirefoxの真骨頂。

まずはURLの横に表示されている「鍵マーク」をクリック。

出てくる表示内、赤枠部分の「矢印」をクリック。

続いての表示内一番下の「詳細を表示」をクリック。

こんな表示が出ます。

この上部の4つのタブの中から「メディア」タブをクリックします。
そうすると、このように多くの画像やアイコンのURLが「http」のままになっているのが分かります。

どの画像が原因でSSL化が出来ていないかが一目瞭然!
こりゃ便利ですわ〜。

なので簡単に修正出来ます。
 

ちなみに修正なんですが、WordPress内の「メディア」内の画像は、しっかりと「https化」されているので、単純に同じ画像に張り替えるだけで簡単に出来ます。

プラグインの「Search Regex」で、ほとんどのURLは「https」に切り替わっているので、あとは画像が中心です。
基本的にアップロードし直すだけなので簡単な作業です。
 

ポイントとして、ここで貼り直す画像は「サイドバー」にあるものがほとんどです。サイドバーにあるものは「Search Regex」の対象外?なんでしょうかね。ここにある画像(プロフィール画像など)を貼り直すだけで大体OKなハズです。

サクッと終わらせてしまいましょう!これでトップページはSSL化完了!!

ここでGoogleサービス各種登録の見直しを!

さあ、ここまでの作業でブログの「トップページ」は無事に常時SSL化(https化)が出来ました!
おめでとうございます!!

じゃあ、次は各記事部分に、、、と行きたいところですが、そこは大変で時間も掛かるので、まずはgoogleサービスの各種登録の見直しにいきましょう。

要するに、

  • Google Analyticsの設定変更
  • Google Search Consoleの再登録

です。

ここでポイントは、Google Analyticsは単に設定の変更だけでOK。
Google Search Consoleの方は再登録しなければならない、ということ。

まあ、そんなに難しくありませんので早速いきましょう。

まずはGoogle Analyticsの設定変更

こちらは非常にカンタンです。

Google Analyticsのトップ画面から自分のサイトを開きます。

下の方にある「管理」をクリック。

すると、左から順に「アカウント」、「プロパティ」、「ビュー」と3列の設定が並んでいますので、まずは真ん中の「プロパティ」にある「プロパティ設定」をクリック。

「デフォルトのURL」欄の矢印をクリックして、「https」を選択すればOK。

必ず「保存」を忘れないように!

続いて、同じ要領で今度は「ビュー」欄にいきます。

一番右側の「ビュー」から「ビュー設定」をクリック。

全く同じように「https」に変更してください。
最後に「保存」も忘れないように!

Google Analyticsの設定設定は以上で完了です。簡単ですね。

次はGoogle Search Consoleの再登録

さて、お次はGoogle Search Consoleの再登録です。

こちらはGoogle Analyticsnのように、再設定で完了とはいかず、最初から登録し直さなければなりません。
というわけで、またGoogle Search Consoleに登録し直しましょう。

やり方はこちらです↓
Googleとの連携強化!Search Console(サーチコンソール)に登録しよう

やり方を忘れている人もいると思います(私もそうでした)が、やってみると簡単なもんですね。
以上で完了です。

最後は各記事部分のリンクの見直しを!(結構大変)

さてさて、いよいよ常時SSL化のラストバトルです。

ここまでは、意外にも大した時間も掛からずに出来たと思いますが、ここからは(ブログの記事数などによる)結構大変です。
要するに、ブログやサイトの各記事部分のリンクや画像、アイコンを貼り替えていかなくてはなりません。

「Search Regex」などを上手く使えば、それなりに短縮出来るかもしれませんが、基本的には「手作業」が多い、時間と労力の掛かる作業が中心です。

基本的な「移行」の手順は、これまでの内容で全てクリアしています。
あとは、数日間掛けていいので、ゆっくりと自分のペースでコツコツ修正していきましょう。

多くの作業が、hhtps化していない古いアフィリエイトリンクの貼り替え(カエレバを使っている人はそれも含む)、短縮URLをリンクに使っている場合の貼り直しなどです。
 

あと注意しておいて欲しいのが、ちょっと古いテンプレートを使っている人は、記事下に表示されるテーマ固有のSNSリンクアイコンです。
このアイコン画像がhttpだと面倒です。
私の場合、ここがまさにそのパターンだった(はてなブックマークアイコンが原因だった)ので、仕方がないので、「テーマの編集」からSNSカードを削除、代わりに「プラグイン」を導入して、事なきを得ました。

どうしたって、ここからは時間が掛かるので、数日間掛けてゆっくり直していきましょう。

まとめ

「常時SSL化」と聞いて、

  • 面倒だな〜
  • 自分に出来るのかな〜
  • 大変そうだな〜

って思うでしょう(私がそうでした)が、やってみると「あれ?結構カンタンじゃね?」と感じるのではないでしょうか?
やってみて思うのは、最後の「記事部分」の見直しに時間が掛かることと、それ以外は実にカンタンであるということ。

今やり終えて考えているのは、

  • こんなに簡単ならもっと早くやっておけば、、、
  • 最後が時間掛かるからもっと早くやっておけば、、、

ということ。

そう、どっちにしても「もっと早くやっておけば」ということを強く思いましたね。

そして、やり終えてしまうとかなりの安心感と充実感を味わうことが出来るので、「いつかはやらないとな〜」と少しでも思っているなら早くやってしまうことをオススメしておきます。