ロリポップが無料の独自SSLを導入!WPのサイトを常時SSL化する手順

当サイトはレンタルサーバーのロリポップを契約し、Wordpressで作成しているのですが、この度SSL化しました!

SSLとはSecure Sockets Layerの略で、インターネット通信を暗号化する技術のことを言います。SSL化されているとセキュリティが強化されたウェブサイトという事なので、安心して利用できますよね。

ロリポップで無料のSSL(Let’s Encrypt)が使えるようになったので、この機会にSSL化してみました!

☞ロリポップ!独自SSL 詳細はこちら


 




SSL化するメリットとは

SSL化するメリットはざっくり言うと3つあると思います。本記事ではロリポップでの無料SSL化の手順とWordPressでの設定に重点を置きたいので、この項目はサラッと書きたいと思います。

 

個人情報漏洩リスクの軽減

最大のメリットは何と言ってもサイトの安全性を高められるという点。なりすまし、改ざん、盗聴を防げます。

ここで言う盗聴とは、例えばネットショップをしていて、非SSLサイトで住所、氏名、クレジットカード情報などの個人情報を入力した際、他者から読み取られる可能性があります。

 

httpsサイトがSEOで優遇される

SEOとは、Search Engine Optimizationの略で、検索エンジン最適化を意味する言葉です。Googleウェブマスター向け公式ブログでは、SSL化されたhttpsで始まるウェブサイトをSEO面で優遇することを発表しています。

HTTPSをランキングシグナルに使用します icon-external-link 
HTTPS ページが優先的にインデックスに登録されるようになります  icon-external-link 

一言でいえば、SSL化されているサイトは検索順位を上の方に持ってくるよ、という事です。

 

利用者が視覚的に「安全なサイト」であると判断しやすい

私がSSL化したいと思った一番の理由がこれです。

これはChromeでの表示なのですが、SSL未対応だと逆さビックリマーク(iマーク)が付き、クリックすると「このサイトへの接続は保護されていません」と表示されます。

一方SSL化サイトでは、鍵マークと「保護された通信」と表示されます。この鍵マークが付いたサイト、だんだんと増えてきているだけに、逆に付いていないとちょっと不安になる方もいるのではないでしょうか。

【追記】Chrome62以降ではhttpサイトの入力フォームで警告が出るようになる

Googleウェブマスター向け公式ブログにて、2017年10月以降に、「ユーザーが HTTP ページにデータを入力した場合と、HTTP ページにシークレット モードでアクセスした場合」で「Not secure」の警告が表示されるようになる、と発表されました。

Chrome バージョン 62 以降では、ユーザーが HTTP サイトにデータを入力すると、「Not secure」警告が表示されます。

Chrome 62 でユーザーがデータを入力したときの HTTP ページの扱い

Chrome の HTTP 接続におけるセキュリティ強化に向けて  icon-external-link 

ログイン画面、お問い合わせフォームなどに限らず、サイト内検索でも警告が出ると言われています。いよいよhttps化待ったなし、という状況になってきました。

【追追記】10月17日(米時間)、Chrome62が公開されました

httpページで入力フォームに文字を打ち込むと警告が出るのか、実際に試してみました。

Google Chrome 62公開!「保護されていません」と表示されるのか試してみた

どういう状況で警告が出るのか検証してみたので、ご一読ください。

「Let’s Encrypt」ってなに?無料の理由と安全性

Let’s Encryptとは

公式サイト  icon-external-link は英語ですが、Let’s Encrypt総合ポータル icon-external-link  というサイトで日本語の解説を読むことができます。

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化するだけであれば非常に簡単です。

  1. ロリポップのユーザー専用ページのサイドバーから「 icon-shield セキュリティ」をクリック
  2. 独自SSL証明書導入」をクリック
  3. SSL化したいURLにチェック icon-check-square-o を入れる
  4. 独自SSL(無料)を設定する」をクリックする

以上です!

※2017年10月11日、ユーザー専用ページの仕様が少し変更になったので、内容を一部訂正しました。

この手順を行うと、「×SSL保護無効」の表示が「SSL保護申請中」に変わります。数時間後、httpsをつけたURLでサイトが無事に表示されれば、SSL化完了です。

※httpsをつけたURLで403エラーが出る場合は、時間をおいて、ブラウザのキャッシュを削除してから再度アクセスしてみてください。

WordPressの変更点

SSL化するだけならこれでおしまいなのですが、この時点ではhttpとhttps双方のURLが混在する状態になっています。

httpsにURLを統一し常時SSL化(全てのページをSSL化)するために、Wordpressの管理画面でいくつかの設定が必要になります。

 

管理画面でサイトアドレスを「https://~」に書き換える

「設定」から「一般」を選択し、「WordPressアドレス(URL)」と「サイトアドレス(URL)」の頭を「https://~」に書き換え、「変更を保存」をクリックします。

※sは小文字半角で入力してくださいね!間違えて大文字などで入力してしまうとアクセスできなくなってしまうようです。

一度強制的にログアウトするので、IDとパスワードを入力して再度ログインしてください。すると、httpsがついた管理画面に新たに入れます。

 

httpsになったのに鍵マークが表示されない理由

大抵の人が最初はこの状態になると思います。httpsなのに、鍵マークではなく逆さビックリマーク(iマーク)が付いている。クリックしてみると・・・

「このサイトへの接続は完全には保護されていません」

実はこの時点では、画像や内部リンクなどのURLはhttpのままです。ページ内のすべてのURLをhttps~に変更しなければ鍵マークはつかないので、画像や内部リンクのURLを書き換える必要があります。

 

プラグイン「Search Regex」で画像アドレス等を「https://~」に置き換える

「Search Regex」というプラグインを使って文字列を一括で置き換えることができます。

プラグインの詳細については以下のサイトをご参照ください。ここでは手順のみ簡単に書きます。

☞参考サイト

  1. 「ツール」→「Search Regex」をクリック
  2. Post content・No limit・Ascending(デフォルト)を選択
  3. 「Search pattern」にhttp~でサイトドメインを入力
  4. 「Replace pattern」にhttps~でサイトドメインを入力
  5. Search≫」をクリックして置換後の内容を確認

Resultsの下に置換結果が表示されます。特に問題なさそうであれば「Replace & Save≫」をクリックして保存してください。

※一度置換を実行すると元に戻すことができません!事前にバックアップを取っておくことをお勧めします!!

これで、特に問題なければ、すべてのページに鍵マークがつき常時SSL化が完了します。

 

なお、用が済んだらこのプラグインは削除して大丈夫です。使わないプラグインを入れ過ぎていると、サイトの表示速度が遅くなる要因になります。今後使う予定が無ければ残しておく必要はありません。

 

「https://~」に置き換えても鍵マークが表示されない場合

私はなぜか投稿ページだけ逆さビックリマーク(iマーク)が付いたままでした。理由は2つ4つありました。※後で更に2つ見つかったので追記しました。

1.Jetpackのシェアボタン用に自作した「はてブ!」のロゴ

Jetpackプラグインのシェア機能にはデフォルトでは「はてブ」ボタンがありません。そこで「はてブ」ボタンを追加した際、ロゴの画像が必要で「B!」マークを自作したのですが、その画像URLがhttpのままだったため、シェアボタンを設置した投稿ページには鍵マークが付かない状態でした。

試しにJetpack→設定→Shering→投稿に「共有ボタンを追加」をオフにしたところ、無事鍵マークが付きました。

そこで、自作ロゴ画像を一旦削除し、アップロードし直して画像URLがhttps~で始まるようにしてから、再度はてブ!ボタンを設置しました。

 

★どこがhttpのままになっているのか確認する方法は、Chromeであれば、調べたいページを開いた状態でF12キーを押します。(※Windowsの場合です)

ディベロッパーツールが開き、英語ですがエラー項目を見ることができます。

「Mixed Content」と書かれた部分に、httpが混在している具体的なURLが書かれています。

常時SSL化したいのに一部のページの逆さビックリマーク(iマーク)が消えずに悩んでいる方は、このようにして原因を突き止め、修正していく必要があります。

 

2.カエレバで挿入したアフィリエイトリンクの虫眼鏡アイコン

本やDVDの紹介の際にカエレバ  icon-external-link ヨメレバ  icon-external-link を利用しているのですが、虫眼鏡のアイコン画像が入るデザインを選択していました。この虫眼鏡画像が引っかかっていたようです。

赤枠の「シンプル5」というデザインを選んでいましたが、この画像URLがhttp~でMixed Contentだぞ!と言われてしまいました。

このアイコンは「なし」を選択できます。常時SSL化をしたい方で、カエレバやヨメレバを利用している方はアイコンは外しましょう。

9月7日、カエレバの制作者・かん吉様のブログにて、アイコン画像をSSL化したとの告知がありました!

以前から「カエレバのアイコン画像をSSL化(https://)して欲しい」という声が多く寄せられていました。

この度、ようやくSSL対応を実施しました。


↑これです。

【追記】ヨメレバ、トマレバについてもアイコン画像をSSL化してあります。

試しに件の虫眼鏡アイコンも試したところ、こちらもちゃんとhttps化されていました!

なので、今後はカエレバ、ヨメレバでリンクを作成する際、アイコン付きにして大丈夫ですよ^^かん吉さん、ありがとう!

 

(追記1)3.オープンストリートマップの埋め込み地図

旅行関係のブログ記事内に埋め込み地図を使用しています。

Google mapは大丈夫でしたが、OpenStreetMap  icon-external-link の地図を埋め込みで使用していたところMixed Contentになっていました。

また、SSL環境ではうまく動作しないのか、埋め込んだ地図が真っ白けで見られなくなっていました。埋め込み地図は諦め、代わりにスクリーンショットを添付することにしました。(Google mapは規約上、地図を画像化して使用することはできないのですが、OMSは可。)

 

(追記2)4.楽天アフィリエイト(a8.net経由)の商品画像リンク

SSL化する前に貼り付けた楽天アフィ単体の画像もダメでした。ちなみにAmazonアソシエイト単体の画像リンクは大丈夫でした。

一旦楽天アフィリンクを削除後、カエレバを使って再設置し、鍵マークが付きました。

 

外部リンクにhttp~で始まるURLがあると常時SSL化できない?

外部リンク(相互リンクや参照先リンクなど)にもhttpが混在していると、鍵マークが付かないという情報もありますが、アンカーテキスト(テキストのリンク)については、httpのままでも大丈夫です。

 


メニューバーのカスタムリンクやウィジェットのリンクを書き換える

プラグイン「Search Regex」でhttps~に置換しても反映されず、手動でURLを修正した場所が3つあります。

 

1.メニューバーのカスタムリンク

メニューにカテゴリ―などのカスタムリンクを設定している方は結構いると思います。この画像はhttpsに書き換え後ですが、ここは手動で修正する必要があります。

 

2.ウィジェットに直接入力した内部リンク

この画像はテキストウィジェットに直接内部リンクを書き込んでいるのですが、すべてhttpsと手動で書き換えました。

他にも、画像ウィジェットにカスタムURLで内部リンクを貼っている場合も修正が必要です。

ウィジェット内の内部リンクを全てチェックすることをお勧めします。

 

3.子footer.phpに直接書き込んだフッターメニューのリンク

画像上部のグレーの背景の部分はフッターウィジェットによる表示なのですが、下部のえんじ色の背景の部分は子テーマのfooter.phpに直接書き込んでメニューを設置しています。

子footer.phpに直接書き込んだ内部リンクのURLも修正が必要でした。

☞ワードプレスの子テーマについては、こちらの記事をご覧ください。

おそらくここまで一つ一つ細かく見て行けば、常時SSL化できると思います。

GoogleアナリティクスとSearch Consoleの設定変更

Googleアナリティクスとサーチコンソールを利用されている方は、こちらも変更が必要です。

やり方については、既に詳しい解説をされているサイトが複数あるので、説明は割愛します。「SSL化 Googleアナリティクス サーチコンソール」で検索するとヒットします。

個人的にはこちらのサイトが分かりやすかったです。

☞参考サイト

301リダイレクトの設定(追記あり)

301リダイレクトとは、URLが恒久的に変更になった場合に、サイトを自動転送するためのコードです。Googleでは、SEOの面からも、URLが変更になった際には301リダイレクトを行うことが推奨しています。

ページの URL の変更と 301 リダイレクトの使用  icon-external-link 

正直に言いますと、301リダイレクトについて理解しきれていません。色々と調べて、ロリポップFTPの.htaccessファイルにコードは追記しました。

☞参考サイト

ただ、301リダイレクト設定を行う前から、自動転送されるケースとされないケースがあり、コード追記後も状況が変わっていないんです。コードの記載がうまく行っていないのかもしれないし、別の原因があるかもしれません。

引き続き調べてみて、状況が好転しましたら追記します。

 

→解決しました!以下、追記ご参照ください。

【追記】301リダイレクト問題解決!コードを書く場所の問題だった

.htaccessファイルにコードを追記してもリダイレクトがうまく行かないと書きました。

結論を言いますと、コードを追記する位置が悪かったようです。こちらの記事に書かれていることがドンピシャでした!

☞参考サイト

ロリポップの自動Wordpressインストールでインストールした場合は、#BEGIN WordPress の前に書いてあげるといいようです。

このように書いてありました!!

 

最初、コードは.htaccessファイルの一番下に書いていましたが、上記の通り、#BEGIN WordPressの前に書き直したところ無事にリダイレクトされるようになりました!ありがとうございます(泣)

また、私は最初、<ifModule mod_rewrite.c>~</ifModule>で囲っていなかったのですが、付けた方がいいようですね。今このスクリーンショットの状態できちんとリダイレクトできています。

ロリポップの場合、.htaccessファイルは以下の場所にあります。

ユーザー専用ページ→WEBツール→ロリポップ!FTP(初回のみログインが必要。アカウント情報でパスワードが確認できます)→あなたのサイトの公開フォルダ名を選択(当サイトの場合はakaeho)→wp-includesというフォルダの下に.htaccessファイルがあります。

.htaccessファイルをクリックしたら、#BEGIN WordPress と記載されている場所を探し、その上に以下のコードを記載してください。

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R,L]
</IfModule>

※.htaccessファイルはかなり重要なファイルです。おかしな記述があるとサイトが表示されなくなる可能性があります!コードを追記する前に必ずバックアップを!

【追記】SNSシェアボタンのカウント引き継ぎについて

実は、https化するとSNSシェアボタンのカウントがリセットされてしまいます。

当サイトではそもそもシェアされること自体が少ないので(笑)、SNSボタンのカウント数は最初からどうでも良かったのですが、結構これがショックな方は多いはず。

https SNS カウント icon-external-link 」というキーワードで検索すると、色々と対策は出てきます。既出の情報なのでここでの説明は割愛しますが、ご自身が分かりやすいと感じるページをご覧になって対策していただければと思います。

個人的にはこちらの記事が読みやすいかなと思います。

ただ、どうしてもうまく行かない・・・という事も実際にあるようです。その場合は、SSL化を機に、カウントを諦めるというのも一つの選択肢かなと思います。

SNSボタンはプラグインや公式ボタンを利用して設置している方も多いと思うのですが、結構サイトを重くする原因になるんです。カウント機能なしのシンプルな自作SNSボタンに変更することで、サイトのスピード改善につながるかもしれません。

ご自身のサイトのスピードをぜひ一度チェックしてみてください。

PageSpeed Insights – Google Developers icon-external-link 

SNSシェアボタンを自作する方法を以下のページにまとめましたので、もし宜しければご参考にしてください。

最後に

ここまで長々と書いてきましたが、ロリポップでワードプレスサイトをSSL化すること自体はとっっても簡単です。が!その後の設定が初心者の私には非常に大変でした。

これから新規にサイトを立ち上げる人が、最初にSSL化した状態でスタートするならそこまで大変ではありません。

でも私のように、ある程度サイトを作りこんでしまってから安易にSSL申請ボタンをクリックしてしまうと、思わぬ苦労を強いられることになるので、慎重に行って欲しいと思います。

最後までお読みいただきありがとうございました。

 icon-heart-o ちょこっとPR!

SSL化に関するフリーイラスト素材を数点作りました。イラストACに投稿しておりますので、ご入用の方はこちらから無料ダウンロードいただけます。 icon-external-link 

 

こちらの記事も併せてどうぞ!

icon-clock-o 2017-07-17 icon-rotate-left  icon-user ちびこママ