さくらサーバーの無料SSLでサイトを常時SSL化する手順

このサイトはさくらサーバーを使用してWordpressを運営しています、今までサイトのSSL化をしないで運営していましたが、2017-10-17に独自ドメインでのSSL化が無料となり遅くなりましたが、当サイトもSSL化することにしました、さくらサーバを利用している方でまだ無料SSLを導入していない方はこちらの記事で導入方法をまとめましたので参考にしてみて下さい。

サイトをSSL化する理由

SSL化しているサイトでは、インターネット上での通信を暗号化してセキュリティ効果を高めてくれるため、訪問者も安心してアクセスできるようになります。

SSLを導入すると、サイトのURLがhttpからhttpsに変わります、ブラウザのアドレスバーを見ればそのサイトがSSL化しているかどうかすぐ解ります、殆どのブラウザでアドレスバーに鍵のマークが付いてそのサイトが安全であることを表示しています。

GoogleはサイトのSSL化を推奨していますし、検索ランキングにも影響してくるでしょう、
HTTPS をランキング シグナルに使用します
HTTPS ページが優先的にインデックスに登録されるようになります
Chrome の HTTP 接続におけるセキュリティ強化に向けて
より安全なウェブを目指して

サイトのランキングに差が出てしまうとアクセスにも影響が出てきてしまうので【常時SSL化】はやっておくべきでしょう、常時SSLとは個人情報を入力するような一部分のページだけではなくサイト全体をSSL化して閲覧してもらう方法です。

当サイトで利用しているさくらのレンタルサーバ も遅ればせながら2017-10-17に独自ドメインの無料SSLが導入可能になりました(有料では有りましたが)、一時は無料SSLが利用できる他サーバーへの移転も考えましたがコスト面での負担増や引っ越しが面倒という理由から今まで【http】で運営してましたが、いよいよアドレスバーに【https】をつけたURLを表示することになりました。

という事で常時SSL化するまでの工程を記事にまとめてみましたので、サイトのSSL化を考えている方は、参考までに読んでみて下さい。

関連する記事⇒はじめてWordpressでサイトを作る時の手順と初期設定

 

 

バックアップを取っておく

まずSSL化する前に何か不具合が出たときに復旧できなくなると困りますので、データベースとファイルのバックアップをとっておきます。

  • サーバー上のファイル:画像、テーマ、プラグインなどの記事以外のファイル。
  • データベース上のデータ:記事、カテゴリ、コメント、管理画面などの設定。

手動でバックアップしてもいいですが、一度設定してしまえば定期的にバックアップしてくれるプラグイン【BackWPup】を導入すれば簡単にバックアップを取ることができるのでお薦めです。

ここではバックアップ方法、復元方法は割愛します。

関連する記事⇒BackWPup定期的にバックアップを取るプラグイン

 

SSL設定

さくらのサーバコントロールパネルにアクセスして【ドメイン/SSL設定】をクリックします。

SSL設定をクリック

 

 

SSL設定したいドメインの【登録】をクリックします。

登録をクリック

 

 

画面が変わりますので【無料SSLの設定へ進む】をクリックします。無料SSLの設定へ進む

 

 

画面が変わります【Let’s Encryptの利用ポリシー】をクリックして内容を確認し同意できれば、下にある【無料SSLを設定する】をクリックします。

同意して進む

 

 

証明書の発行が完了するとさくらサーバーに登録してあるメールアドレスにメールが届きます、証明書の発行が完了するまでに数十分から数時間ということですが私の場合は30分かからないうちにメールがきました。

証明書発行のメール

メールが届いた時点でサイトは、httpでもhttpsでも表示が可能になっています。

3ヶ月毎の更新も自動で更新してくれますので手間入らずです。

 

 

httpからhttpsにリダイレクトする

サイトがhttpでもhttpsでも表示できますが、このままの状態だとGoogleに重複コンテンツと認識されてしまう可能性があるので、httpにアクセスしてもhttpsの方へリダイレクトできるようにします。

さくらサーバーコントロールパネルの、ファイルマネージャーをクリックして.htaccessを選択して開きます。

.htaccessの編集

 

 

どのような記述をすればいいのか私にはさっぱりわかりませんので、さくらのサポート情報にあったコードをコピペして.htaccessファイルの一番上に貼り付けました。

ファイルの編集を行う場合は必ず編集前にサクラエディタなどのテキストエディタにコピーしてから編集を行って下さい、間違いがあった場合コピーがないと元に戻せなくなってしまいますので。

.htaccessにコピペする

# BEGIN Force SSL for SAKURA
# RewriteしてもHTTPS環境変数を有効にする
SetEnvIf REDIRECT_HTTPS (.*) HTTPS=$1
# 常時HTTPS化(HTTPSが無効な場合リダイレクト)
<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{ENV:HTTPS} !on
RewriteCond %{REQUEST_URI} !^/wp-cron.php$
RewriteRule .* https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
</IfModule>
# END Force SSL for SAKURA

上記コードはコピペできます。

 

 

.htaccessファイルの上部に上記コードを貼り付けたら、最期に保存をクリックします。

.htaccessファイルにコードを貼り付ける

サイトが転送できているかどうかhttpでアクセスしてアドレスバーにhttpsで表示されていればOKです、301リダイレクトの設定はコード内に含まれていますが、301リダイレクトが出来ているかどうか不安なようならohotuku.jpというサイトでチェックしてみましょう。

 

301リダイレクトとは前のサイトの検索エンジンでの評価をある程度引き継げるということなのでhttpからhttpsに転送するときには301リダイレクトの設定をしておきます。

ohotuku.jpにアクセスして転送前のあなたのサイトのURLを入力して【Check!】のボタンをクリックします。

301リダイレクトのチェック

 

301リダイレクトで設定されているとこのような表示になります、サイトが301リダイレクトの設定になっていることを確認できました。

リダイレクトチェックの結果

 

URLの設定変更

次にWordpressサイトのURLをhttpからhttpsに変更します。

管理画面左側メニューから【設定】⇒【一般】を選択してアドレスをhttpからhttpsに変更します。

Wordpress管理画面でアドレス変更

 

 

混在コンテンツ

httpからhttpsに移行したばかりのサイトはhttpのコンテンツが混じっていてアドレスバーには鍵マークがありません、このような状態を混在コンテンツと言います、このような状態は早いうちに解消しなければいけません。

下の画像はサイトがhttpからhttpsにアドレスバーの表示は変わっていますが、httpではこのサイトへの接続は保護されていませんとなっていて、httpsではこのサイトへの接続は完全には保護されていませんとなっています、サイト内にhttpでの表記があると混在コンテンツになり鍵マークが表示されません、鍵マームを表示にするにはサイト内のリンクや画像などのhttp表記をhttpsに置き換えなければいけません。

混在コンテンツを含む

 

 

プラグインを使って混在コンテンツを解消する

混在コンテンツを一つ一つ手動で行うのは大変です、コンテンツの量が多いとなおさら考えてしまいます、でも安心して下さい、プラグインを入れるだけで混在コンテンツを自動的に解消してくれるプラグインやhttpをhttpsに置き換えてくれるプラグインが有ります、これらのプラグインを使えば手間を掛けずに混在コンテンツを解消できます。

 

 

さくらのレンタルサーバ 常時SSL化プラグインを使う

さくらサーバーでは常時SSL化するときに役立つ【WordPress】常時SSL化プラグイン【SAKURA RS WP SSL】を提供しています。

このプラグインを使用するにはPHPのバージョンを5.6、7.1にする必要があります、 さくらサーバーコントロールパネルのアプリケーションの設定から【PHPのバージョン選択】をクリックしてバージョン5.6か7.1に変更して下さい。

PHPバージョンの選択

 

 

 

【PHPのバージョン選択】選択画面に変わったら【新しいバージョン】の▼プルダウンメニューをクリックして【標準のPHP[PHP7](推奨)】を選択します、最期に変更をクリックします、これで常時SSL化プラグインの使用が可能となりました。

標準のPHPを選択

このプラグインを導入すると自動的に301リダイレクトの設定、サイト内リンクのリンク先を、http://~からhttps://~変更、SSL化前に投稿した画像ファイルなどのURLをhttps://~に変更してくれます、但しさくらサーバー以外では使えないため他のレンタルサーバーにサイトを移転するときは加えた変更がもとに戻ってしまうということなので、私はこのプラグインを使わず他のプラグインで行いました。

その為【SAKURA RS WP SSL】の細かい説明は割愛します詳しく知りたい方は、【さくらのサポート情報】の【WordPress】常時SSL化プラグインの使い方【WordPress】常時SSL化プラグイン トラブルシューティング、にアクセスしてみてくださいね。

SAKURA RS WP SSLの導入

 

 

【Search Regex】プラグインでhttpsに置き換える

サイト内にある混在コンテンツを一つ一つhttpsに変えていくには時間的にもかなりの労力がかかってしまいます、【Search Regex】プラグインを使うと記事内の文字列を一括置き換えしてくれるので簡単にhttp://~からhttps://に置き換えることが出来ます。

プラグインをインストールするにはWordpress管理画面左側メニューから【プラグイン】⇒【新規追加】を選択して、検索窓にSearch Regexと入力します。

【Search Regex】プラグインが表示したらば【今すぐインストール】をクリックします、【今すぐインストール】が【有効化】に変わりますのでもう一度クリックしてプラグインを【有効化】します。

Search Regexをインストール

これでSearch Regexのインストールと有効化は完了です。

 

 

次に記事内の混在コンテンツを一括置き換えしていきます、管理画面左側メニューからツール⇒Search Regexを選択します。

管理画面ツールからSearch Regexを選択

 

 

Search Regexの検索置き換え画面が表示されますので、そのままの設定で(Post content)【Search pattern】にSSL化前のURLを入力します、【Replace pattern】にはSSL化後のURL(下記画像のURLは当サイトのものです)を入力します。

一番下の【Search】をクリックしてもSSL化前のURLを検索するだけなので【Search】の右側にある【Replace】をクリックして検索⇒置き換えまで表示させてしまいましょう、この時点では表示だけで置き換えはされません、実行するには【Replace & Save】をクリックしますが置き換え内容が正しいかどうかよく確認して下さい、間違いがあると色々面倒なのでバックアップを取っておきましょう。

置き換える文字列を選択

 

 

クリックすると上に置き換え前、下に置き換え後のURLが赤く表示されます、内容をよく確認していいようなら【Replace & Save】をクリックします、これで記事内のhttp://~からhttps://~の変更が完了しました、次に【Source】の▼プルダウンメニューをクリックして【Post content】から【Post meta value】に変えて固定ページやプラグインで読み込んだ画像を先ほどと同じ工程でhttp://~からhttps://~へ変更していきます。

変更後の文字列に置き換える

これでSearch Regexでのhttp://~からhttps://~への置き換えは完了です。

なお混在コンテンツの置き換えが終わった後このプラグインを削除しても元に戻ることはありません。

 

 

ブラウザのアドレスバーが鍵マークにならない

プラグインでhttp://~からhttps://~の置き換え行ってもアドレスバーが鍵マークにならない場合、まだページ上に混在コンテンツが含まれています、この混在コンテンツを見つけるにはWindowsではキーボードの【F12】キーを、macOSでは【command+option+I】でデベロッパーツールを起動させます。

この機能は【Mozilla Firefox】、【Google Chrome】、【Microsoft Edge】、【Microsoft Internet Explore】などのブラウザで使用できます。

キーを押すとデベロッパツールが開きますので【Console】をクリックします。

デベロッパーツールで混在コンテンツを探す

 

混在コンテンツがないか各ページを表示していき、ページに含まれる混在コンテンツがないか確認します、混在コンテンツの箇所が表示されましたら該当箇所をhttps://~に変更します。

httpをhttpsに変更する

 

サイト内の混在コンテンツが修正できたら、デベロッパーツール右側にある矢印をクリックして【Security】を選択します。

デベロッパーツールのセキュリティーを選択します

 

 

 

全てのページで緑が3つなら混在コンテンツの修正は完了です。

すべてのページで緑が3つにする

 

アドレスバーにも鍵のマークが表示されるようになります、これでサイトの常時SSL化は完了しました。

アドレスバーに鍵マーク

 

 

Googleアナリティクスの設定

サイトをSSL化したことでGoogleアナリティクス、Googleサーチコンソールに登録していたhttpのサイトをhttpsに再設定する必要があります、まずはGoogleアナリティクスの再設定の方法を説明していきます。

常時SSL化後にGoogleアナリティクスにログインして、左側にある歯車マークの【管理】をクリックします。

Googleアナリティクス管理をクリック

 

 

画面が変わります、真ん中にあるプロパティ設定をクリックします。

プロパティ設定をクリック

 

 

 

【プロパティ設定】画面の【デフォルトのURL】を▼プルダウンメニューをクリックして【http://】から【https://】に変えます。

デフォルトのURLをhttpsに変更下にある【保存】をクリックします。

 

 

次に先程の【管理】から右にあるビュー設定をクリックします。

ビュー設定をクリックします

 

 

画面が変わったら【ウェブサイトのURL】を▼プルダウンメニューをクリックして【http://】から【https://】に変えます。

ウェブサイトのURLをhttpsに変更

下にある【保存】をクリックします、これでGoogleアナリティクスの設定は完了です。

 

 

Googleサーチコンソールの設定

サイトをSSL化するといままでのhttpサイトは変更できないので、別に新しくサイトの再設定を行う必要があります、Google Search Consoleにログインして、左上にある【プロパティを追加】をクリックします。

Google Search Consoleのプロパティを追加をクリック

 

 

プロパティ追加の画面に変わりますので、【ウェブサイト】にサイトのURLを入力して【追加】をクリックします。

サイトのURLを入力

 

 

追加をクリックするとサイトの所有権の確認になります、ここは以前のhttpサイトで確認コードの埋め込みをしているか、【HTML 確認ファイル】をファイルマネジャーにアップロードしていると思いますので、そのまま下にある【確認】をクリックします。

【https://〇〇〇〇〇〇の所有権が確認されました。】の画面になりますので、【続行】をクリックします。

これで常時SSL化したサイトが追加されました。

サイトが確認されるとサイトの追加完了

 

 

Googleサーチコンソールにサイトマップの登録をする

サイトマップもhttpのときに登録したサイトマップは使えませんので新たに登録し直さなければいけません。

サイトマップを登録するには、先程追加したサイトのURLをクリックします。

サイトURLをクリック

 

 

画面が変わりますので【現在のステータス】の【サイトマップ】の枠をクリックします。

サイトマップをクリックします

 

 

【サイトマップ】をクリックしたら画面が変わるので、右上にあるサイトマップの追加テストをクリックします。

サイトマップの追加テストをクリック

 

 

クリックするとダイアログボックスが開きますので登録したサイトURLの最後に【sitemap.xml】と入力して【送信】をクリックします。

私はサイトマップの作成に【Google XML Sitemaps】というプラグインを使用しています、【Google XML Sitemaps】の導入方法はこちら⇒WordPress初心者の方が最初に導入したいプラグイン

sitemap.xmlと入力します

 

 

画面が変わりますので、【ページを更新する。】をクリックします。

ページを更新する。をクリック

 

 

クリックすると【サイトマップ】画面に登録したサイトのサイトマップが表示されています。

サイトマップが表示される

これで常時SSL化したサイトをGoogle Search Consoleに登録することが出来ました。

 

 

最期に

さくらサーバーの無料SSLでサイトを常時SSL化してみましたが記事数が少ない段階でのSSL化への切り替えだった為か思ったほど手間がかからずに出来たように思います、混在コンテンツもプラグイン【Search Regex】を使用して全て解決できました、コンテンツ数の多いサイトでは混在コンテンツも多くなり手間もかかってくるのではないでしょうか。

デベロッパーツールで確認するとhttp://表記がありますが、アドレスバーには鍵マークがついてますし、デベロッパーツールの【Security】でも緑が3つ並んでますのであまり気にしないことにします。

新しくサイトを立ち上げる方は最初からサイトを常時SSL化した方がいいですよ、そうすればここに書いた工程を踏まずにすんなりSSL化出来ますので。

コメントを残す

*

CAPTCHA