XSERVERの無料独自SSLを使ってブログをHTTPS化する方法[WordPress]

2016年6月30日から、XSERVERのすべてのサーバープランを対象に、独自SSLの無料提供が開始されました。
参考URL全サーバープランで独自SSLが無料・無制限に利用可能に!「独自SSL」機能の強化のお知らせ

サーバー証明書には「Let’s Encrypt」という無料のSSLサーバー証明書が使われています。
参考URLLet’s Encrypt 総合ポータル

Let’s Encrypt 自体が、認証局(CA)になっていて、非営利団体のISRG (Internet Security Research Group) が運営しています。数年前までは、年間数万~数十万円のSSLサーバー証明書を購入しなければならなかったことを考えると、隔世の感がしますね。

「無料」という言葉に弱いぼくですので、早速、まろろぐ / まろらぼにも導入し、ブログをHTTPS化してみました。

スポンサーリンク

SSLサーバー証明書を申し込む

サーバー証明書の申し込みは、XSERVERの「サーバーパネル」から申し込みます。「SSL設定」をクリックします。
SSLサーバー証明書を申し込む

SSLを導入するドメインを選択します。
ドメインを選択

「独自SSL設定の追加」タブをクリックして、「サイト」を選択します。ぼくの「まろろぐ」のように、「maro-log.net」というドメインで運用している場合は、「www.maro-log.net」しか選べないと思いますが、「www」付きのサイトを選んでおけば大丈夫です。「www.maro-log.net」にも「maro-log.net」にも対応してくれる「2Way利用」に対応しています。

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

「なお、SSL設定が反映するまで、最大1時間程度かかります。今しばらくお待ちください。」とありますが、反映されるまでそれくらいの時間はかかっていたようです。

ブログの設定を変更する

設定が完了したらメールでお知らせしてくれるのかな~?と思っていたのですが、ナシノツブテだったので、サイトにアクセスしてみました。403Forbiddenにならなければ、設定は完了しています。

URLが変更になるので、WordPress側の設定の変更が必要になります。ぼくがやった作業を順に記述します。

内部リンクのhttp→https一斉置換

WordPressの記事の内部リンクは「http://~」で始まる「絶対パス」で書かれています。これを「https://~」に書き換えます。
手作業で書き換えるときっと嫌になるので、半自動的にやっちゃいます。こちらの記事の方法で簡単にできます。

ショートコードを消したい今まで使っていたプラグインを使うのをやめた、なんていうとき、記事に[aaa]...

この記事に記載されているSQL文を下記のように変更して、phpMyadminで実行します。

「maro-log.net」の部分は、適宜書き換えてくださいね。

一般設定のWordPress アドレス (URL)とサイトアドレス (URL)の変更

WordPressの管理ページに設定されている「WordPress アドレス (URL)」と「サイトアドレス (URL)」を変更します。
「http://~」を「https://~」に書き換えます。
URLの書き換え

.htaccessに301リダイレクトの記述追加

このままですと、「http://~」のサイトと「https://~」のサイトの両方が存在してしまうことになり、Google様より「重複サイト」としてペナルティを受ける可能性があります。
「http://~」にアクセスされたら「https://~」のサイトに301リダイレクトさせます。

.htaccessに下記の記述を追加します。

「maro-log.net」の部分は、適宜書き換えてくださいね。

既に「<IfModule mod_rewrite.c>~</IfModule>」の設定があれば、その中に

だけを追記してもいいですが、この中には書かないでください。

この部分に記述すると、WordPressの設定を変更することで、せっかく記述した内容が消されてしまう可能性があります。

「.htaccess」の編集については、過去何度か記事にしていますので、下記の記事などを参考にしてください。

サーバーのファイルをバックアップするには?こちらの記事でWordPressのバックアップをする方法を書きました。WordPr...
SFTPって?サーバーにファイルをアップロードしたり、サーバーからファイルをダウンロードするために「FTP」という仕組みをよく使いま...
「.htaccess」で「https://~」のサイトにリダイレクトさせると、管理ページも「https://~」から始まるURLに変更になります。ブラウザに保存していたユーザー名、パスワードの設定が消えてしまうかもしれないので、ユーザー名とパスワードを今一度確認しておいたほうがいいでしょう。

httpsに対応していない広告を外す

A8.netなどの広告はimgタグで画像を埋め込んでいます。画像がhttpsで保護されていないサイトに置かれている場合は、SSLのエラーが出ます。ブラウザのURL欄の「鍵マーク」が正常に表示されません。
SSLのエラー

A8.netの広告の画像は「http://~から始まるURLになっているので、とりあえず外します。httpsに対応してから再度導入します。

広告にかぎらず、「https://~」で保護されていないところから画像などを貼り付けている場合、同様にエラーになります。
aタグで外部リンクを張っている場合は大丈夫です。

2016/08/20現在、ほぼhttpsに対応しているようです。

ページで読み込んでいる画像、CSS、Javascriptなど

ページで読み込んでいる画像、CSS、Javascriptなどもhttpsのサイトから読み込まないと、ブラウザのURL欄の鍵マークが正常に表示されません。

外部リンクをブログカードにしているときは、「Embedlyカード」にすることで解決できるようです。

ヘッダ画像がhttpのままだった

モバイル表示でURLが「鍵付き」にならないからおかしいな?と思っていたら、ヘッダ画像が「http://~」から読み込まれていました。
カスタマイザでモバイルのヘッダ画像を一旦削除して、再登録したら直りました。
モバイルのヘッダ画像の再登録
Simplicityだけの現象かもしれませんが。

Search Consoleでsitemap.xmlの再送信

GoogleのSearch Consoleでsitemap.xmlの再送信をしておきます。
「Google XML Sitemaps」というプラグインを使っているので、自動的に「https://~」から始まるsitemap.xmlを吐き出してくれていました。
Google XML Sitemaps

結構簡単でした

順を追って作業していくと、結構簡単に終わりました。2つのサイトで作業をして、1時間もかからなかったです。
今後SSLで保護されたサイトが標準になっていくでしょうから、お手すきの時に作業をするのがいいかもしれませんね。

技術情報:HTTPSとは?

HTTPSとは、Webページの閲覧に使われるHTTPという通信方法を、SSLという通信の内容を暗号化する方法によって外部に漏洩しないようにするための通信技術です。例えば、個人情報(名前、住所、電話番号、メールアドレスなど)やクレジットカードの番号を入力しなければならないECサイト(通信販売などのサイト)では必須の技術です。

SSLで保護されたページ

こちらのように、ブラウザに表示されているアドレスが「https://~」から始まっているサイトがSSLで保護されたページです。さらに、「緑の鍵のマーク」が表示されている(Google Chromeの場合)が正しい「SSLサーバー証明書」が適用されているサーバーの証です。

  • httpsで暗号化されていること
  • 正しいSSLサーバー証明書がサーバーに適用されていること

この2点が揃っていることで、個人情報やクレジットカードの番号などの重要な情報を入力しても安心であるといえます。

Googleは「インターネットの安全」を高めるために、SSLで保護されたページの検索ランキングを上げるとしています。個人ブログで今すぐSSLに対応する必要は少ないかもしれませんが、今から準備を進めておいても早くはありません。

WEBのシステムを作ったり保守したりするSE/プログラマというものをしています。

ブログやってますがブロガーではありません。週末WEB随筆家です。
まろと呼んでください。

いわゆる「画像直リンク」、画像の複製は固くお断りいたします。
スポンサーリンク

シェアしていただけるとうれしいです

フォローよろしくお願いします

NO IMAGE
この記事が気に入ったら
いいねをお願いします!

最新記事をお届けします。