当サイトは、レンタルサーバーのロリポップを契約し、Wordpressで作成しています。SSL化しているので、安心してご利用ください！
SSLとはSecure Sockets Layerの略で、インターネット通信を暗号化する技術のこと。
SSL化されている＝セキュリティが強化されたウェブサイトということなので、安心して閲覧できますよね。
ロリポップでは無料のSSL（Let’s Encrypt）が使えます。
素人の私でもSSL化できましたが、手続きでつまづいた部分ありました。なのでSSL化の詳しい手順をシェアしたいと思います。
SSL化するメリット
SSL化するメリットはざっくり言うと3つあると思います。
1.個人情報漏洩リスクの軽減
最大のメリットは、サイトの安全性を高められるという点。なりすまし、改ざん、盗聴を防げます。
2.httpsサイトがSEOで優遇される
SEOとは、Search Engine Optimizationの略。検索エンジン最適化を意味する言葉です。
Googleウェブマスター向け公式ブログでは、SSL化されたhttpsで始まるウェブサイトをSEO面で優遇することを発表しています。
一言でいえば、SSL化されているサイトは検索順位を上の方に持ってくるよ、ってこと！
3.視覚的に「安全なサイト」であると判断しやすい
私がSSL化したいと思った一番の理由がこれ。
SSL化サイトでは、アドレスバーの先頭に鍵マークが表示されます。
鍵マークをクリックすると、「この接続は保護されています」と表示されます。
SSL化未対応のままだと、どうなるのか
httpサイトを表示しただけで「保護されていない通信」と警告が出ます。
更に、2018年10月からは、非SSL化サイトで入力フォームに文字を入れようとすると、「保護されていません」の文字が赤字で表示される仕様になりました。
→Chrome のセキュリティにとって大きな一歩: HTTP ページに「保護されていません」と表示されるようになります│Googleウェブマスター向け公式ブログ
Googleは、SSL化未対応のサイトに対してどんどん厳しくなってきています。
これから新たにウェブサイトを立ち上げるのであれば、SSL化は必須。古いサイトも順次対応していかなければならないと思います。
「Let’s Encrypt」とは？無料の理由と安全性
Let’s Encryptとは
公式サイトは英語ですが、Let’s Encrypt総合ポータルというサイトで日本語の解説を読むことができます。
Let’s Encrypt は、認証局（CA）として「SSL/TLSサーバ証明書」を無料で発行するとともに、証明書の発行・インストール・更新のプロセスを自動化することにより、TLS や HTTPS（TLSプロトコルによって提供されるセキュアな接続の上でのHTTP通信）を普及させることを目的としているプロジェクトです。
Let’s Encrypt総合ポータル
非営利団体が運営し、複数の大手企業や団体がスポンサーとして支援しているとの記載があります。だから無料で証明書を発行できるんですね。
無料のSSL証明書は安全なのか
本来、SSL証明書って結構高額なんです。ロリポップでも、Let’s Encrypt導入前は月額2000円から。高額プランもあります。
実は、値段によって暗号化の強度が変わる訳ではないのですが、認証度のレベルによって金額が異なります。
認証度のレベルってなんぞや？と思いますよね。Let’s Encryptのように無料または安価で導入できるSSLは、「ドメイン認証」と言って、誰でも取得できるものなんです。
でも、個人でブログを運営する分にはじゅうぶん。
一方、企業・団体のみが取得できる「企業認証」というものがあります。電話審査などで厳しくチェックされるようです。
無事審査に通過すれば、より高度な認証レベルのSSLが取得できる。お墨付きがもらえるということですね。
更に、最高レベルのSSL証明書「EV認証」というものもあります。
が、本記事の読者さまで、最高レベルの物が必要な方はいないと思うので、割愛します。
ロリポップでサイトをSSL化するには数回のクリックだけ！
前置きが長くなりましたが、本題です。SSL化するだけであれば超簡単！
- ロリポップのユーザー専用ページのサイドバーから「 セキュリティ」をクリック
- 「独自SSL証明書導入」をクリック
- SSL化したいURLにチェック を入れる
- 「独自SSL(無料)を設定する」をクリックする
「×SSL保護無効」の表示が「SSL保護申請中」に変わります。
数時間後、httpsをつけたURLでサイトが無事に表示されれば、SSL化完了です。
WordPressの変更点
SSL化するだけならこれで終わりです。が、この時点ではhttpとhttps双方のURLが混在しています。
httpsにURLを統一し、常時SSL化（全ページSSL化）するには、Wordpressの管理画面でいくつかの設定が必要になります。
管理画面でサイトアドレスを「https://～」に書き換える
設定 → 一般
「WordPressアドレス（URL）」と「サイトアドレス（URL）」の頭を「https://～」に書き換え、「変更を保存」をクリック。
一度強制的にログアウトします。
IDとパスワードを入力して再ログイン。httpsがついた管理画面に入れます。
httpsになったのに鍵マークが表示されない理由
大抵の人が最初はこの状態になると思います。httpsなのに、鍵マークではなくiマークが付いている。クリックすると、
「このサイトへの接続は完全には保護されていません」
実はこの時点では、画像や内部リンクなどのURLはhttpのままです。
ページ内のすべてのURLをhttps～に変更しなければ鍵マークはつかないので、画像や内部リンクのURLを書き換える必要があります。
プラグイン「Search Regex」で画像アドレスなどを「https～」に置き換え
「Search Regex」というプラグインを使って文字列を一括で置き換えることができます。
手順のみ簡単に書きます。
- 「ツール」→「Search Regex」をクリック
- Post content・No limit・Ascending（デフォルト）を選択
- 「Search pattern」にhttp～でサイトドメインを入力
- 「Replace pattern」にhttps～でサイトドメインを入力
- 「Replace≫」をクリックして置換後の内容を確認
Resultsの下に置換結果が表示されます。
さいごに「Replace ＆ Save≫」をクリックして保存してください。特に問題なければ、すべてのページに鍵マークがつき常時SSL化が完了します。
私は以前は「BackWPup」というプラグインを利用していました。（現在は別の方法でバックアップを取っています）
★「Search Regex」は、今後使う予定がなければ削除してOKです。
「https://～」に置き換えても鍵マークが表示されない場合
私の場合、上記の対応をしても、ほとんどのページでiマークが付いたままでした。理由は4つありました。
１.自サイトの画像URLがhttp～だった
Jetpackのシェアボタン用に作った「はてブ」のロゴ画像のURLが、http～のままでした。Search Regexでは置き換えられなかったようです。
シェアボタンを設置した投稿ページすべてに、鍵マークがついていませんでした。
（Jetpackプラグインのシェア機能には「はてブ」ボタンがありません。そこで「B!」のロゴを自作して「はてブ」ボタンを追加していました。）
ためしに、Jetpack→設定→Shering→投稿に「共有ボタンを追加」をオフにしたところ、無事に鍵マークが！
そこで、ロゴ画像をいったん削除。再度アップロードして、画像URLがhttps～で始まるようにしてから、もう一度「はてブ！」ボタンを設置しました。
※現在は自作のSNSボタンを使用しており、Jetpackのシェア機能は一部のページでのみ使用しています。
「Mixed Content」以降に、httpが混在しているURLが書かれています。
一部のページで、iマークが消えない！という方は、ディベロッパーツールでご確認を。
２.外部サイトから読み込んだ画像URLがhttp～だった
カエレバで挿入した商品リンクの、虫眼鏡アイコンのURLがhttp～でした。
カエレバとは、Amazonや楽天の商品紹介リンクを簡単に設置できる、便利ツールです。
市販のえほんを紹介するときなどに、カエレバやヨメレバを利用していました。
※現在は、ワードプレスのテーマの機能で同様のことができるので、利用していません。
虫眼鏡アイコンが入るデザインを愛用していました。が、この虫眼鏡画像が引っかかっていたようです。
この虫眼鏡の画像URLが、http～でMixed Contentだぞ！と言われていました。
アイコンは「なし」を選択できます。常時SSL化したい方で、カエレバを利用したい方はアイコンは外しましょう。
カエレバの制作者・かん吉様のブログにて、アイコン画像をSSL化したとの告知が！
虫眼鏡アイコンつきで、再度カエレバを使ってみたら、ちゃんと鍵マークがつきました！
今後はアイコンつきでカエレバを利用しても大丈夫。かん吉先生、ありがとう！
３.埋め込み地図がhttpsに未対応だった
オープンストリートマップの埋め込み地図が、SSL化後、機能しませんでした。
旅行関係のブログ記事で、埋め込み地図を使っています。
Google mapは大丈夫でしたが、OpenStreetMapを埋め込んだページがMixed Contentになっていました。
また、SSL環境ではうまく動作しないのか、埋め込んだ地図が真っ白に。
OpenStreetMapを使うときは、埋め込みは諦め、代わりにスクリーンショットを添付することにしました。（OpenStreetMapは、地図のスクリーンショットが使用可能です。Google mapは規約で不可）
大きな地図を表示
【2018年11月6日追記】
OpenStreetMapを埋め込んでもMixed Contentにならず、地図も正常に表示されるようになりました！
４.アフィリエイトリンクのコードにhttp～が含まれていた
画像つきの楽天アフィリエイトコードにhttp～が含まれており、Mixed Contentになっていました。
Amazonアソシエイトの方は問題なし。
楽天アフィリエイトのリンクを削除し、コードを取得し直したら、無事解決しました。
SSL化するサイトが増えてきたので、コードをhttps対応に切り替えたのかなと思います。
ちなみに、画像が含まれていないテキストだけのリンクでも、実は<img>タグ（画像用のHTMLタグ）が使われている場合があります。
たとえば、こちら。
一見、ただのテキストリンク。でもコードはこんな感じ。
<img>タグの中に、「src=https://～」という箇所があります。ここがhttp～で始まっていると、Mixed Contentになると思われます。
外部リンクにhttp～で始まるURLがあると常時SSL化できない？
http～で始まるサイトにリンクを貼ると、鍵マークが付かないという情報もあります。
アフィリエイトコードなどでない、ただのテキストリンク（アンカーテキスト）なら、httpのままでも大丈夫です。
メニューのカスタムリンク・ウィジェットのリンクを書き換える
「Search Regex」で置換できない部分は、手動でURLをhttps～に書き換えます。
Jetpackの自作ロゴがそうでしたね。私はほかに3箇所、手で直す必要がありました。
１.メニューのカスタムリンク
メニューにカスタムリンクを設定している場合は、自分で書き換えます。
２.テキストウィジェットにHTMLで入力した内部リンク
テキストウィジェットに直接内部リンクを書き込んでいる場合も、手動で書き換えます。
画像ウィジェットのカスタムURLで内部リンクを貼っている場合も、修正が必要です。
ウィジェット内の内部リンクは全てチェックしましょう。
３.子テーマのfooter.phpに直接書いた内部リンク
以前は、子テーマのfooter.phpに内部リンクを直接書き、メニューを作っていました。
この内部リンクのURLも、手動で修正が必要でした。
ここまでやれば、おそらく常時SSL化できると思います！
GoogleアナリティクスとSearch Consoleの設定変更
Googleアナリティクスとサーチコンソールを使っている方は、設定の変更が必要です。
詳しい解説サイトが複数あるので、やり方の説明は割愛。
「SSL化 Googleアナリティクス サーチコンソール」で検索してみてください。
個人的には、こちらのサイトが分かりやすかったです。
301リダイレクトの設定
301とは、ページが別の場所に完全に移転したことを意味する
コード。
URLが永久的に変更になる場合、「.htaccess」ファイルに所定のコードを書くことで、古いURLから新しいURLへ自動転送されます。
Googleでは、SEOの面からも、URLが変更になった際には301リダイレクトを行うことを推奨しています。
→ページの URL の変更と 301 リダイレクトの使用│Search Consoleヘルプ
301リダイレクトコードの正しい書き方・書く場所
301リダイレクトは、.htaccessファイルの「#BEGIN WordPress」の上に、次のコードを貼り付ければ完了です。
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
</IfModule>
ロリポップの場合、.htaccessファイルは以下の場所にあります。
【ユーザー専用ページ】
→WEBツール
→ロリポップ！FTP
→フォルダを選択（当サイトの場合はakaeho）
→wp-includesというフォルダの下に.htaccessファイルがあります。
コードの書き方はこちらのサイトを参考にさせていただきました。
コードを書く場所を間違えると、リダイレクトされない
当初、.htaccessファイルにコードを追記しても、リダイレクトされませんでした。
コードを追記する位置を間違えていたことが原因でした。
ロリポップの自動Wordpressインストールでインストールした場合は、#BEGIN WordPress の前に書いてあげるといいようです。
ロリポップ！無料独自SSLを早速試して遭遇したトラブル
私はコードを、.htaccessファイルの一番下に書いていました。
が、上記の通り、#BEGIN WordPressの前に書き直したところ無事にリダイレクトされるようになりました！
.htaccessファイルを開いたら、#BEGIN WordPress と書かれた場所を探し、その上に301コードを記載するようにしてください。
リダイレクトが正しくできているかチェックする
301コードを設置したら、http～で始まるアドレスにアクセスし、https～にリダイレクトされるか確認してみてください。
リダイレクト先をチェックできるオンラインツールもあるので、URLを入力してチェックしてみるのも良いと思います。
実はこのサイト、読者さまがご丁寧に教えてくださったので、追記いたしました＾＾
ちなみに、短縮URLのリダイレクト先もチェックできます。短縮URLのリンク先を調べるのにも便利なツールだと思います。
SNSシェアボタンのカウント引き継ぎについて
https化すると、SNSシェアボタンのカウントがリセットされます。
これがショックな方は多いはず。
「https SNS カウント」で検索すると、いろいろと対策は出てきます。分かりやすいと感じるページをご覧になり、実践していただければと思います。
ただ、どうしてもうまく行かないケースもあるようです。
SSL化を機にカウントを諦める、というのも、選択肢の一つかなと思います。
SNSボタンを、プラグインや公式ボタンを利用して設置している方も多い思います。が、サイトを重くする原因になります。
カウント機能なしのシンプルな自作SNSボタンに変更することで、サイトのスピード改善につながるかもしれません。
ご自身のサイト速度をチェック→PageSpeed Insights – Google Developers
自作のSNSボタンを設置してみたい方は、こちらの記事をご参考にどうぞ。
最後に
ロリポップでワードプレスサイトをSSL化すること自体は簡単です。
が、その後の設定が、初心者の私には非常に難関でした。
新規にサイトを立ち上げる人が、最初にSSL化した状態でスタートすれば、そこまで大変ではありません。
でも、ある程度サイトを作りこんでしまってから、安易にSSL申請をすると、思わぬ苦労を強いられます。
SSL化は慎重に！
最後までお読みいただき、ありがとうございました。