2018年7月にリリースされる予定の「Google Chrome 68」から、SSL化されてないサイトをで表示すると「保護されていません」という警告が表示されるようになります。
また、これまでGoogleは「SSL化していないサイトは検索順位にも影響がある」とSSL化を促してきました。
あなたのサイト、SSL化対応していますか？？
Webサイトの全ページを「http://」から「https://」に変更することでデータを暗号化して送受信する仕組み。簡単に言うと「https://」することでサイトのセキュリティが強化され、サイトに訪れたユーザにとって安全なWebサイトを構築します。
でも、実際、どうやってSSL化ってすれば良いのか？
静的なサイトであれば簡単に対応できたとしても、ワードプレスが入ってるサイトをどうやったらSSL化できるのか。
サーバーとか中身のシステムのこととかどう影響するか分からないし、Webの知識が無いと対策できない！という人がほとんどだと思います。
そこで、Web初心者さん向けにSSL化（「http://」から「https://」に変更）の手順について優しく説明していきます。
サイトデータのバックアップをとる
まず、ワードプレスでサイトを運営する上で大事なこと。データベースのバックアップです。
基本的なことなんですが、実はできてない人が大半なんですよね。
これはSSL化をする以前の問題で、ワードプレスでサイトを運営するのであれば必ずバックアップを定期的に取るようにしましょう。
ワードプレスはデータベースという箱の中にサイトのデータ（投稿した記事などの情報）が全て格納されています。そのデータベースをサイトを更新する度に安全に手元に保管しておくこと。これがバックアップです。
バックアップを取る方法は様々な方法がありますが、初心者さんには便利なプラグイン（BackWPup）がありますので是非使ってみましょう！
サーバーでSSL化を行う
バックアップがとれたら、次に使用してるサーバーにて「http://」から「https://」に変更する設定をします。
この手順は使用してるサーバーで方法がことなりますので「サーバー会社名 SSL化 手順」などのキーワードで検索してみてください。
丁寧に解説してくれているブログがたくさんあります^^
あいみん在宅ワークナビではロリポップサーバーでのSSL化の手順を教しえていきますよ！
ロリポップ！サーバー管理画面にログイン
サーバーの管理画面にログインしてください。
そして、独自SSL証明書導入ページに移動します。
セキュリティ > 独自SSL証明書導入
SSLには無料と有料があります。
無料で手軽にはじめられるものから、有料で厳重なセキュリティまでありますのでその機能を調べて自分のサイトに合ったのを選択しましょう。
無料のSSLを利用する
SSL化するのには少し時間がかかります。（私が設定した時は10分〜20分かかりました）
※もしずっと待ってても変化なければブラウザの「更新」ボタンを押してみましょう。
設定完了が表示されました。
とっても簡単にSSL化完成です。
ただし、念の為、ブラウザにてhttps://でサイトが表示されるか確認しておくと安心です。
注意
SSL化をすると、httpとhttpsのサイトがどちらも存在していることになります。httpとhttpsは、同じサイトであってもgoogleには別サイトだと認識されてしまいますので、この2つのサイトを1つにまとめる作業が必要となってきます。
あいみん2つのサイトがWeb上に存在すると重複コンテンツになります。SSL化させたらすぐに次からの作業も進めていきましょう！
ワードプレスの設定（SSL対応）
ワードプレス管理画面にログインしサイトURL設定のページに移動します。
設定 > 一般
変更箇所は2つ。
- WordPressアドレス
- サイトアドレス
httpになってるのをhttpsに変更しましょう。
変更したら変更を保存ボタンを押して更新。
これでワードプレス内のhttpは、httpsに変換されました。
注意
投稿の本文に直接記述されてる画像や内部リンクは、この作業ではhttpsに変更されませんので次の作業を行いましょう！
内部リンクを一括置換
次に残ってるURLを一括置換します。
この一括置換には便利なプラグインを使用します。
Search Regexをインストール＆設定
プラグイン「Search Regex」を新規追加します。
全部英語（汗
でも、大丈夫。設定すべき点は2箇所。
Search patternとReplace patternのみです。
- Search pattern（SSL化する前の自分のサイトのURL）：http://ouchidehatarako.com
- Replace pattern（SSL化後の自分のサイトのURL）：https://ouchidehatarako.com
【Replace】ボタンを押すと変換される箇所一覧が表示されます。
注意
ここでは置換はされませんのでご安心を。ただ、ボタンを押し間違わないように気をつけてくださいね。
赤文字で表示された箇所が置換される箇所です。緑背景が置換前。黄色背景が置換後です。
チェックして間違いがなければいよいよ一括置換です。
httpからhttpsに一括置換する
【Replace ＆ Save】で一括置換してデータベースに保存（全てが書き換わる）されます。
あいみん絶対に間違いがないか念入りに確認してからボタンを押すようにしてくださいね。
置換した件数が表示されたら置換完了です。
投稿や固定ページの本文内に記述されてる画像など確認してみましょう^^
あいみん正常に置換完了したら「Search Regex」プラグインはもう使わないので削除しておくと良いですね！
http→httpsにリダイレクト設定
次に、httpとhttpsの2つになってるサイトを1つにまとめる作業をします。
httpにアクセスをしたらhttpsに自動的にリダイレクトされる設置です。
サーバー管理画面にログイン
この作業はサーバーにアクセスする必要がありますので、ロリポップサーバーの管理画面にアクセスしましょう。
サーバーの管理・設定 > ロリポップ！FTP
FTPツールを使ってリダイレクトするコードを記述
サーバーに接続できるFTPというツールを使って、サーバーの中にある.htaccessというファイルにリダイレクトするコードを記述する作業となります。
（wp-adminやwp-contentというフォルダと同じ階層に存在しています）
<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{HTTPS} !=on [NC]
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
</IfModule>
そして保存。
httpにアクセスするとhttpsにリダイレクトされるように設置が完了しました。
httpでアクセスしてサイトを確認してみましょう！
CHECK
この作業も慎重に行ってください。もしここでサイトにエラーが表示された時は、先程記述したコードを削除して保存してくださいね。記述に間違いがあったり余計なタグが入っているとエラーが起きる原因となります。
あいみんここまでくるとあともう少し！頑張って！
SSL化されたか確認する
SSL化が問題なくできていれば、ブラウザでサイトを見るとURLの箇所に
このように「保護された通信」と鍵のマークが表示されるようになります。
（画像はChromeでの表示ですが他のブラウザでも鍵のアイコンが表示されます）
でも、鍵のマークも表示されず警告が出ていると、それはサイト内にまだhttpという記述が残ってるという警告になります。
httpが残っているかどうか確認する方法
一番簡単な方法としては、サイトのソースコードを見ること。
サイト上で右クリックすると
ページのソースを表示できます。
ソースの中にhttp://の記述が残っていないか検索してみましょう。
ブラウザには検索する機能がついてますので、ソースを表示してるページにてhttp://の文字を検索かけてみてください。
ヒットした箇所をhttpsに修正すれば問題なくSSL表示されるようになります^^
トップページだけでなく下層ページも確認してください。下層ページだけ対応できてない場合もあります。
httpをhttpsに変更するには
「Search Regex」プラグインで一括置換しましたが、「Search Regex」プラグインでは投稿と固定ページの記事に記述されてるコードだけを変更しました。
ワードプレスには他にもURLを設定する箇所が存在します。
例えば、
- テーマ内（カスタマイザー設置やPHPファイルの中）
- ウィジェット（htmlを記述してる箇所）
- プラグイン（URLを設定してる箇所）
- メニュー（カスタムリンクで設定してる箇所）
上記で設定したURLに関しては、手動で変更せねばなりません。
ブラウザでSSL化表示ができてないのが確認されたら、まずはこれらの中を覗いてみると原因がわかるはずです。
CHECK
変更したのに書き換わらない時はブラウザのキャッシュが原因かもしれません。キャッシュをクリアしてみてくださいね。
テーマのカスタマイザーで設定してる画像がhttpsに変更されない
カスタマイザーでロゴなどの画像を設置してるとその箇所だけhttpsに変更されない！という問題がありました。（主にheaderのロゴ）
そんな時はもう一度アップロードして設定し直してみてください。
httpの画像を読み込んでるのが原因なので、httpsの画像を読み直すと解決します。
その他SSL化の問題
サイト全体のURLがhttpsに変更されることによって起きる問題は他にもあります。
Googleアナリティクスも設定変更が必要
アクセス解析Googleアナリティクスを使用してる場合、httpsに変更した時から解析データは取得できなくなります。
その為、アナリティクスにてhttpsのアクセスが解析されるように設定変更する必要があります。
SSL化でのアナリティクス設定変更方法
https://を選択して、下部にある保存ボタンを押して完了！
ビューの中にあるビューの設定をクリック。
下部にある保存ボタンを押して完了！
これでアナリティクスの設定変更は完了です^^/
Search Consoleに新規登録が必要
同じくGoogleのサービス「Search Console」を使ってる場合も設定が必要なのですが、アナリティクスと違って「変更」ではなく「新規登録」をしなければいけません。
https://のURLで新規サイトとして登録を行いましょう。
デザインが崩れてしまった
SSL化することでサイトデザインの一部が崩れてしまうことがあります。
その原因は、テーマ（Theme）のファイル内に記述されてる外部ファイルがhttpsになっていないことが原因です。
例えば、見た目全体が崩れてしまっている場合はcssが適応されてないのが原因。
その場合は、cssを読み込んでるリンクのhttpをhttpsに変更してあげると解決しました。
また、WEBフォントが適応されていない時も同様。どこかのファイルに記述されてるWEBフォントURLがhttpsに変更することで無事適応されました。
あいみんスマホだけ表示が崩れてしまうというケースもありました。スマホのみで使用されてるjsが原因だったのでSSL化したらパソコンもスマホも表示確認しましょう。
プラグインでUPしてる画像がhttpsにならない
スライダーなどで使われる画像のURLがhttpのままでhttpsに変更されない…という問題も発生しました。
そんな時は迷わず、まずはプラグインのバージョンが最新であるか確認しましょう！
CHECK
スライダープラグイン「MetaSlider」でこのような減少が起きました。最新バージョンにUPしたら解決しました。
それでも変更されない時は、画像を選びなおして再保存してみてくださいね。
SNSのいいね！の数が引き継がれない
大きな問題としてはフェイスブックの「いいね！」のボタンの数が引き継がれないということ。
これはhttpだった時のURLでカウントされているので、httpsというURLは別サイトだと判断され数は引き継ぐことができないんです。
私も複数のサイトを運営しており、中には300を超えるいいねをもらってるページもあるのですが残念ながら引き継ぐことはできていません。
引き継ぐ方法はいくつかあり、プラグインを使用したりテーマをカスタマイズしたり…
色々と調べてみましたが、うまくいかないところも多々。
結局わたしは引き継ぐことは諦めました。
ただ、最近のWebの傾向では「いいね！」のカウントを設置していないサイトが多くなってきましたよね。
理由として「いいね！」の数がそもそも意味のあるものなのか？ということ。
カウント数が直接Googleの検査結果に影響することはなく、ただ単にページを訪れた人に「この記事はこれだけの人に共感（いいね）されている」という指標のひとつにすぎません。
SSL化するにあたり「いいね！」カウント数が0になるのは大きな影響に感じるかもしれませんが、カウント表示よりもシェアボタンがある方がユーザーにとっては親切かもしれません。
検索結果が落ちる
httpsにすることにより、一時的に検索順位が落ちることがあります。
私が複数サイトでSSL化して検証した結果では、一時的に落ちたサイトもありましたが数日後には復活していました。
GoogleはSSL化を推奨してるので、SSL化が検索結果に影響するとしても最終的にはプラスになると個人的には考えています。
まとめ
無事SSL化できましたでしょうか？
冒頭でお伝えしましたが、SSL化はサイトを利用する全ての人が安心して安全に閲覧できるようにする為のものです。
手順が面倒だったり検索が一時的に落ちたりとリスクがあるのでは？など思われるかもしれませんが、結果的には必ずユーザーの為になります^^/
SSL化されてない方は是非チャレンジしてみてくださいね。
