【備忘録】サイトをSSL対応（http:→https:）へ変更する方法《さくらサーバー編》|Knowledge Base

公開日：2018(平成30)年6月27日／最終更新日： 2018(平成30)年11月5日

以前に紹介したドメインキングでの設定方法とエックスサーバーでの設定方法と基本的な流れは変わりませんが、サーバーの癖というか管理画面が違うと戸惑ったり失敗してしまったりすることもあるかと思いますので、今回は【さくらインターネットサーバー】でサイトをSSL対応させる方法を紹介します。

ちなみにドメインキングとエックスサーバーでの設定方法は

【備忘録】サイトをSSL対応（http:→https:）へ変更する方法《Xserver編》

で紹介していますので興味のある方は参考に読んでみてくださいね。

SSL証明書はどのサーバーもLet’s Encryptという無料のものを使用し、さくらサーバーではSSL証明書の取得と適用を自動で行ってくれますから、段取り通り進めれば数クリックでhttps:～のアドレスで接続できるようになります。

それではサーバーコントロールパネルにログインして作業をすすめていきましょう。

また、一読してみて「ちょっと大変そうだなぁ・・ちょっと不安だなぁ・・」と思われる方は

【備忘録】サイトをSSL対応（http:→https:）へ変更する方法《さくらサーバー編》|Knowledge Base

で設定代行もさせていただいておりますのでご検討ください。

さくらサーバーのサイトをSSL対応する方法

SSL証明書の取得と適用方法

サーバーコントロールパネルにログインしたら、左のメニューにある「ドメイン/SSL設定」をクリックします

次にSSL化するドメインの右にある証明書列の「登録」をクリックします
※マルチドメインで複数のサイトを管理している場合はドメイン名をよくよく確認してください

そして次の画面で「無料SSLの設定へ進む」をクリックします

最後に「無料SSLを設定する」をクリックします

これであとは待つだけです（簡単すぎます）。

※各画面の上に対象のドメインが表示されますので、必ず何度も確認してください

今回の場合は14:12に証明書の適用を開始し15:03に終了してhttps:でアクセスできるようになりました。おおよそ１時間で適用完了というのが目安のようですね。

無事にhttps:～でサイトが表示されるようになったら次の項へ進みます（SSL証明書適用中も適用されてからも次の項の作業を行わなければhttp:でアクセス可能です）

WordPressの設定で管理URLを変更する（WordPressの場合）

サイトの管理画面のURLとサイト閲覧URLをともに「https:～」で接続できるようにします

※前の項目が完了していないうちにアドレス変更してしまうとサイトや管理画面へアクセスできなくなりますので注意してください

サイトへのアクセスURLが変更になりますので、WordPress アドレス (URL)とサイトアドレス (URL)を変更します

変更はWordPressサイトの管理画面から「表示」→「一般」をクリックして行います

変更後管理画面への再ログインが促されますのでログインし直してください。

※旧URL(http:～)へアクセスされても新URLへリダイレクト（URLが修正されて表示）されますのでアクセスダウンは発生しませんからここで少し休憩してもかまいません（笑）

http:でアクセスされたものをすべてhttps:へ転送する

設定画面にもリンクがありますが、.htaccessによるアクセス制御を見て、.htaccessファイルの作成・設定を行います。これをやることでhttp:(旧アドレス)へアクセスされてもhttps:(SSL化されたアドレス)へ転送されるようになります。

※WordPressで作成したサイトの場合は既に.htaccessファイルがありますのでそのファイルの先頭に追記、htmlで作成したサイトで.htaccessファイルがない場合にはindex.htm(l)のある場所へ新規作成してください。

※ssl対応させるためのプラグインもありますが、こういうものは後々変更する予定がないことと、もしも誤って停止してしまったりサイトに不具合が発生したときに困りますから、それほど難しいことではないと思いますので手動で設定した方がいいと個人的には思います。

※表示に不具合などが発生しないか、管理画面・閲覧画面両方にアクセスしてきちんと表示されるかを確認します

上の公式ヘルプでは転送用のコードが削除されているようですのでこちらで紹介しておきます。

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

WordPressサイトでの後処理

htmlで作成したサイトでもWordPressのようなCMSで作成したサイトでもここからやるのは

内部リンクURLの確認と修正
内部の画像リンクURLの確認と修正
httpsでエラーが出ていないかのチェックと修正

という全く同じ内容です。

１と２の内容についてはhtmlサイトであればエディタなどで旧http:～のものを探して変更していく作業を行います。が、WordPressの場合はリンクのほとんどが絶対URL(http:～)なので１つプラグインを使うことで設定が簡単になりますからここから先をを参考に進めてください。

内部リンクを全て「http:」から「https:」へ置換えする

ここはプラグインに頼ることにしましょう。特定の文字列を検索して置き換えするプラグインに

本文などに書かれている文字やコードを置き換えるプラグイン「Search Regex」

というのがあります。これを使って一括変更してしまいましょう（画像は日本語です。上のリンクページで使い方と日本語化の方法を掲載しています）。

当サイトの場合は「https://www.momosiri.info/」を「https://www.momosiri.info/」に変更するので画像のようにします。終わったら「検索」をクリックしましょう。

ちなみに下図のように「変換して保存」をクリックするとザザーーっと変換されますが、念のためざっと確認はしておきましょうね。

覚悟を決めてやっちゃいましょう！！

これで内部リンクのURL変更が完了しました。一応いくつか内部リンクのある記事でリンクをマウスオーバーしてみてきちんと置き換えられているかを確認しましょう（特にカスタム投稿タイプの記事について行うことをおすすめします）。

サイト内エラーのチェックをする

ここまで来たところでページがきちんと表示されるからOK・・・ではありません。実際にトップページを開いてみるとまだアドレスバーの左端が「i」マークになっています。クリックすると

なにーーーー安全じゃないだと～～って感じですね。

そこで何が問題なのか確認していきます。

トップページを開いた状態で「F12(デベロッパーツール)」を開きます

「console」をクリックします

すると・・・黄色の△マークや×マーク（エラー）がずらずら表示されますね。これを１つ１つ潰していきます。

まずは△マークから

まあ簡単にいうと前半に書いてあるページで後半に書いてある部分がSSLに対応したものではないという内容です。

１行目だけ解説すると「’https://www.momosiri.info/cms/%e3%80%90wordpr．．．．．’」にある「’https://www.momosiri.info/wp-content/uploads/2017/06/%E3%83%91%E3%8．．．．．’」という画像ファイルが対応していないという警告なんです。

先ほど「Search Regex」で置き換えられない部分が残っていたということなんですね（基本的に本文部分だけ置き換えましたから・・・）。

この画像をクリックしてみると、トップのスライダー画像の１つでした。これはプラグインで画像を取り込んでいるのでhttpsになっていなかったのでしょう。早速コツコツエラー修復していきます。

※キャッシュ系プラグインを入れてる場合には一旦キャッシュを削除してからでないと正確な情報が得られない場合があります。

ひとまず黄色部分でわかるところを改善したら次に進んでしまいましょう

テーマやプラグインなどの設定変更

↑の項で書かせていただきましたが、プラグインやテーマで画像などを扱っている場合には画像などの参照元が「http:」から「https:」になっていないところがある可能性がありますので、いろいろなページを開いてデベロッパーツールでチェックするか、管理画面上から考えられるところは事前に確認しておきましょう。