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

公開日:2018年6月27日 使い方など
パソコン

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

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

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

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

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

また、一読してみて「ちょっと大変そうだなぁ・・ちょっと不安だなぁ・・」と思われる方は
【備忘録】サイトをSSL対応(http:→https:)へ変更する方法《さくらサーバー編》

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

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

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

サーバーコントロールパネルにログインしたら、左のメニューにある「ドメイン/SSL設定」をクリックします
【備忘録】サイトをSSL対応(http:→https:)へ変更する方法《さくらサーバー編》

次にSSL化するドメインの右にある証明書列の「登録」をクリックします
※マルチドメインで複数のサイトを管理している場合はドメイン名をよくよく確認してください
【備忘録】サイトをSSL対応(http:→https:)へ変更する方法《さくらサーバー編》

そして次の画面で「無料SSLの設定へ進む」をクリックします
【備忘録】サイトをSSL対応(http:→https:)へ変更する方法《さくらサーバー編》

最後に「無料SSLを設定する」をクリックします
【備忘録】サイトをSSL対応(http:→https:)へ変更する方法《さくらサーバー編》

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

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

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

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

WordPressの設定で管理URLを変更する(Wordpressの場合)

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

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

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

変更はWordpressサイトの管理画面から「表示」→「一般」をクリックして行います
【備忘録】サイトをSSL対応(http:→https:)へ変更する方法《さくらサーバー編》

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

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

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

設定画面にもリンクがありますが、

を見て、.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>
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. 上のようなことがないのに更新できない
  6. 特に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。

コードを転載する場合には

ご自身のサイトで当ページのコードを転載される場合には必ず当ページへのリンクを入れていただきますようお願いいたします

WordPressサイトでの後処理

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

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

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

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

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

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

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

当サイトの場合は「https://www.momosiri.info/」を「https://www.momosiri.info/」に変更するので画像のようにします。終わったら「検索」をクリックしましょう。
【備忘録】サイトをSSL対応(http:→https:)へ変更する方法《さくらサーバー編》

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

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

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

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

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

ここまで来たところでページがきちんと表示されるからOK・・・ではありません。実際にトップページを開いてみるとまだアドレスバーの左端が「i」マークになっています。クリックすると
【備忘録】サイトをSSL対応(http:→https:)へ変更する方法《さくらサーバー編》
なにーーーー安全じゃないだと~~って感じですね。

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

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

「console」をクリックします

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

まずは△マークから
【備忘録】サイトをSSL対応(http:→https:)へ変更する方法《さくらサーバー編》
まあ簡単にいうと前半に書いてあるページで後半に書いてある部分がSSLに対応したものではないという内容です。

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

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

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

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

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

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

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


最終的にアドレスバーの左側に「保護された通信」と表示されればサイト的には完成です。
【備忘録】サイトをSSL対応(http:→https:)へ変更する方法《さくらサーバー編》

アクセス解析や外部ツールの確認・変更など

ここから先はWordpressに限らずすべてのサイトで共通の作業になります

Google Search Consoleの設定変更

サイトのURLが変更になったわけですから当然所有権の再確認など必要になります。が、

の公式ヘルプにある通り、「http:」のサイトと「https:」のサイトは別のサイトと認識されるようですから新規に登録してサイトマップを送信しておきます。

※旧サイトを削除する必要はありません

Google Analyticsの設定変更

こちらは設定変更ができますので、Google Analyticsの設定からアドレスの変更とSearch Consoleとの連携の設定(httpのサイトとの連携を解除した後httpsのサイトと連携させる)を行います。

その他外部サービスの設定変更

外部でランキングなどに参加している場合にはURLの変更が必要な場合があります。

それから肝心のアフィリエイトサービスについてはそれぞれのサービスでURLの変更をする必要があります。調べたところAmazonアソシエイトではSSL化しても連絡は不要のようです(自身で確認してくださいね)。


これで一通り変更が終了しました。ページごとに不具合が出たり、何かのプラグイン等で不具合が出たりすることがありますので都度対処していくしかないと思います。

おまけ トラブルが起きそうなところと対処

一向に「http:~」でアクセスできない

この間は今まで通り「http:~」でアクセスするとページは問題なく表示され、「https:~」へアクセスするとエラー画面しか表示されない状態が続きます。

サーバーの画面にも書いてある通り反映には時間がかかりますので、待つしかありません。

もしも「http:~」(以前のアドレス)、「https:~」(新しいアドレス)でも接続できなくなってしまった場合には他のトラブルが発生している可能性が高いので、SSL設定を一旦削除して戻してみるといった処置をして確認する必要があります。

カスタム投稿タイプでSearch Regexでの一括変更が適用されない

いろいろなデータを一括変更できる便利なプラグイン「Search Regex」ですが、このプラグインで本文内の文字列を変更できるのは「投稿」と「固定ページ」のみ。カスタム投稿タイプには対応していません。

もしもサイトでカスタム投稿タイプを使っている場合はプラグインを少しカスタマイズする必要があります。カスタム投稿タイプを含める方法は

の中で紹介していますのでやってみてください(カスタマイズ後に再度一括変更をします)

おまけ 一部のページがどうしてもSSL通信にならないときは

ブラウザではhttpsで始まるサイト(ページ)URLでもその中にある外部サイトのコンテンツが非SSLである場合には最終的にページ内のコンテンツがSSL通信できる状況でないと判断します。

よくあるのが外部サイトから画像をリンク挿入した場合。ページ表示の途中で画像を表示するために接続する段階で非SSL(暗号化通信が保てない)場合には完全に安全な通信が確保できなくなる可能性があるということで、ページ全体が非SSL通信です!と判定するわけです。

これを1つ1つ調べて変更していくのは大変だし、すべてのhttpをhttpsへ一括変更してしまうとhttpsで表示できないコンテンツはエラーとなってしまいます。

これを防ぐために、http://で始まっている外部サイトのリンク挿入コンテンツがあれば、自動でhttps(SSL)で接続してみて、だめだったら表示されないようにして!!と指示する魔法のコードがあります。

詳しくは

をご覧いただければと思いますが、これを使うことでhttpsで始まるアドレスでありながら実は非SSLと判定されてしまうことを回避できます。

※便利なコードですが、内部リンクや内部画像のURL変更や分かる範囲での変更を行って、どうしても・・・という時に使うことをおすすめします。

このコードを使うことで、https接続してみてダメだったものは非表示になってしまいますが、後々そのサイトがSSL化されたときには正常に表示されるようになりますので地味に便利だと思いますよ。

さいごに

どうでしたか?うまく設定できましたか?サーバーのコントロールパネルの仕様によって前半部分は違うものの、どのサーバーでも基本的に行う作業は同じです。

とはいえ、個人の方で1つのサイトのみ運営している方がこの作業を行うのは1度限り・・・中には誰かにやってもらってちゃっちゃと済ませたい方もいるかもしれません。

そこで、当サイトの作者ひまあーとでは「ココナラ」でこの作業の代行を行っています。基本的には2,000円でお受けしますが、サーバーの使用やSSL証明書の取得方法の違いなどによって若干の追加料金をいただくことがあります。お見積りは無料で行いますので、ぜひ

WordPressのSSL対応作業代行を行います アドレスバーに「保護されていません」と表示されなくします

から、お問い合わせください(要ココナラでのユーザー登録-登録は無料です)

Wordpressの本

Amazonの人気商品楽天市場の人気商品
CS Shop
いちばんやさしいWordPressの教本第4版 人気講師が教える本格Webサイトの作り方 [ 石川栄和 ]

いちばんやさしいWordPressの教本第4版 人気講師が教える本格Webサイトの作り方 [ 石川栄和 ]

1,706 円 (税込) 送料込
人気講師が教える本格Webサイトの作り方 石川栄和 大串肇 インプレスイチバン ヤサシイ ワードプレス ノ キョウホン イシカワ,ヒデカズ オオグシ,ハジメ 発行年月:2019年08月 予約締切日:2019年06月26日 ページ数:280p サイズ:単行本 ISBN:9784295006664 石川栄和(イ..
たった1日で基本が身に付く! WordPress 超入門【電子書籍】[ 佐々木恵 ]

たった1日で基本が身に付く! WordPress 超入門【電子書籍】[ 佐々木恵 ]

1,944 円 (税込) 送料込
<p>WordPressによるWebサイト作成の基本を一から学べる書籍です。1日8時間の勤務時間内に読むことができる程度に解説内容を絞り込み,初心者・新人が最初の1冊目として読むのにふさわしい内容となっています。本書ではローカル環境にWordPressをインストールしてWebサイト..
楽天ウェブサービスセンター CS Shop

いつでもご相談・サイトカスタマイズの依頼を受け付けています

Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。

※一度もココナラを使ったことがない方はココナラへの無料登録が必要です。こちらから登録後、上のリンクをクリックする、またはココナラトップページから「ひまあーと」を検索してお問い合わせください。


【スポンサーリンク】


記事の拡散にご協力をお願いします

閲覧いただきありがとうございました。役に立つ情報でしたら是非SNSでシェアをお願いします

関連情報