WordPressのカスタマイズ方法やプラグインレビューを中心に、パソコン/動物/植物のことなどを紹介するホームページです

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

公開日:2018(平成30)年6月19日/最終更新日:

パソコン



【景品表示法に基づく表記】ページ内のコンテンツには、商品プロモーションが含まれています

このページへ検索経由でアクセスされた方はSSLって何?ということはないとは思いますが、いつも新着記事を見ていただいている方やイマイチ理解できていない方のためにSSLについて簡単に説明させいてただきます。

SSLというのは暗号化通信の仕組みのことで、パソコンとインターネット上のページの間でデータのやり取りをする間に第三者から情報を盗み見ることができないようにすることを言います。

・・・いきなり分からんという感じかと思いますのでもう少し簡単に・・・

【備忘録】サイトをSSL対応(http:→https:)へ変更する方法《Xserver編》|Knowledge Base

あなたのサイトを表示したとき、アドレスバー(URLが表示されているブラウザの上の方の窓)の左端はどのように表示されていますか?

のように緑色で「保護された通信」と表示されていますか?ひょっとするとiマークや「保護されていません」と表示されていませんか?これが一番簡単なSSL対応サイトかどうかの見分け方になります。

傍受されて困るのは訪問した方の個人情報やログイン情報、サイト内のユーザー情報、クレジットカード情報など。私のサイトはそんなの入力してもらってないし・・・という方もちょっと気を付けた方がいい点があります。

それは、近い将来Google Chromeブラウザで非SSLのページを開いたとき、「安全ではありません」などという表示がアドレスバーに表示されるようになること。SSLなんて知らない!という一般の訪問者の方がそのサイトを見たとき、安全でない!と画面に表示されていたらどう思いますか??「このサイトヤバイかも・・」なんて思われてしまうかもしれませんね。

そんな余計な不安を与えないためにもサイトのSSL化をさっさとしておきましょう。

ということで、今回はXserver(エックスサーバー)でWordPressのサイトを運営している方向けに、サイトをSSL対応させる方法をできるだけ実際の画像を入れて分かりやすく紹介していきます。

そうそう、肝心なことを忘れてました。いったい何をすれば・・というのを案内してませんでしたね。

サイトをSSL対応にするには

  1. サーバーの管理パネルからSSL設定を行う
  2. WordPressの設定で管理URLを変更する
  3. http:へのアクセスをhttps:へリダイレクトするよう.htaccessにコードを追加する
  4. 完全にSSL対応にしていく作業
  5. その他外部サービスの設定変更
  6. テーマやプラグインなどの設定変更

というのが全体の流れになります。

段取り通りに行っていけばまず失敗することはないと思いますが、1つ1つの項目が確実に反映されていることを確認して次へ進むようにしないと、どこで間違ったのか?トラブルが起きたのかが分からなくなりますので、それだけを守って作業を進めましょう!!

文末に「おまけ トラブルが起きそうなところと対処」というのもご用意しましたので、もしもうまくいかない・・ということがありましたら参考にしてみてください

それでは始めて行きましょう!!

Xserver(エックスサーバー)の管理パネルからSSL設定を行う

  1. Xserverの管理パネルにログインします
  2. 「SSL設定」をクリックします
【備忘録】サイトをSSL対応(http:→https:)へ変更する方法《Xserver編》|Knowledge Base
  1. ドメインを確認し、「選択する」をクリックします
【備忘録】サイトをSSL対応(http:→https:)へ変更する方法《Xserver編》|Knowledge Base

※画像にも書いていますが、複数のドメインを割り当てて運用している場合は特に注意してください

  1. 「独自SSL設定の追加」タブを選択します
【備忘録】サイトをSSL対応(http:→https:)へ変更する方法《Xserver編》|Knowledge Base
  1. 「独自SSL設定を追加する(確定)」をクリックする
【備忘録】サイトをSSL対応(http:→https:)へ変更する方法《Xserver編》|Knowledge Base

※もう一度画面上のドメインが対象のものかを確認してください

【備忘録】サイトをSSL対応(http:→https:)へ変更する方法《Xserver編》|Knowledge Base

すると画面がこのように変わっていきます

【備忘録】サイトをSSL対応(http:→https:)へ変更する方法《Xserver編》|Knowledge Base

ここまで終わったらhttps:~のサイトに接続してみてください

適用が終わっていないと

【備忘録】サイトをSSL対応(http:→https:)へ変更する方法《Xserver編》|Knowledge Base

のような画面が出ます。そして次に

【備忘録】サイトをSSL対応(http:→https:)へ変更する方法《Xserver編》|Knowledge Base

というような画面が表示されるようになります。

それからしばらく放置して再度「https:~」アクセスすると、きちんとサイトが表示されるようになります

※基本的にはこの間だけサイトへアクセスできなくなります(実際にはhttp:~で接続すればサイトは表示できます)。逆にhttp:~で接続できているうちはSSL証明書がまだ適用されていないということになります。

ちなみに今回の場合は30分で「https:~」へアクセスできるようになりました。

※必ずhttps:~でページが表示されるようになってから次に進んでください

WordPressの設定で管理URLを変更する

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

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

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

【備忘録】サイトをSSL対応(http:→https:)へ変更する方法《Xserver編》|Knowledge Base

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

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

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

QA AnalyticsQA Analytics

http:へのアクセスをhttps:へリダイレクトするよう.htaccessにコードを追加する

無事にサイトへはアクセスできるようになりましたが、このままだと検索エンジンから「http:~」「https:~」に両方サイトが存在するように見えて、重複したサイトと認識され評価が下がってしまう可能性がありますので、確実にこのサイトは「https:~」ですよ!と伝える設定をします。

もう一度Xserverの管理パネルを表示します(閉じている場合はサイドアクセス、別の画面の場合は左上のXserverをクリックします)

  1. 「.htaccess編集」をクリックします
【備忘録】サイトをSSL対応(http:→https:)へ変更する方法《Xserver編》|Knowledge Base
  1. 編集するドメインを確認して「選択する」をクリックします
【備忘録】サイトをSSL対応(http:→https:)へ変更する方法《Xserver編》|Knowledge Base

※編集するドメインが合っているかどうかを何度も確認してください

  1. 「.htaccess編集」タブをクリックします
【備忘録】サイトをSSL対応(http:→https:)へ変更する方法《Xserver編》|Knowledge Base
  1. 入力画面にコードを追加する
<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{HTTPS} !=on [NC]
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
</IfModule>

のコードを編集欄の一番上にコピーします

※画像にも書いてありますが、WordPressに関する記述の上に貼り付けます

【備忘録】サイトをSSL対応(http:→https:)へ変更する方法《Xserver編》|Knowledge Base

終わったら編集を確定します

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

完全にSSL対応にしていく作業

ここから先はWordPressとその他のツールの対応となりますから、どんなサーバーでも共通の作業になります。

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

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

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

【備忘録】サイトをSSL対応(http:→https:)へ変更する方法《Xserver編》|Knowledge Base

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

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

【備忘録】サイトをSSL対応(http:→https:)へ変更する方法《Xserver編》|Knowledge Base

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

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

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

【備忘録】サイトをSSL対応(http:→https:)へ変更する方法《Xserver編》|Knowledge Base

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

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

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

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

「console」をクリックします

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

【備忘録】サイトをSSL対応(http:→https:)へ変更する方法《Xserver編》|Knowledge Base

まずは△マークから

まあ簡単にいうと前半に書いてあるページで後半に書いてある部分が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:)へ変更する方法《Xserver編》|Knowledge Base

最終的にアドレスバーの左側に「保護された通信」と表示されればサイト的には完成です。

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

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

Google Search Consoleの設定変更

サイトのURLが変更になったわけですから当然所有権の再確認など必要になります。が、Googleの公式ヘルプであるサイトの移転とはにある通り、「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対応作業代行を行います アドレスバーに「保護されていません」と表示されなくします

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

著:清水 由規, 著:清水 久美子, 著:鈴木 力哉, 著:西岡 由美, 読み手:星野 邦敏, 読み手:吉田 裕介
¥2,889 (2024/02/08 17:07時点 | Amazon調べ)