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

2017年7月17日

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

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

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

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


-目次-

1 SSL化するメリットとは
2 「Let’s Encrypt」ってなに?無料の理由と安全性
3 ロリポップでサイトをSSL化するには数回のクリックだけ!
4 Wordpressの変更点
4.1 管理画面でサイトアドレスを「https://~」に書き換える
4.2 httpsになったのに鍵マークが表示されない理由
4.3 プラグイン「Search Regex」で画像アドレス等を「https://~」に置き換える
4.4 「https://~」に置き換えても鍵マークが表示されない場合
4.5 メニューバーのカスタムリンクやウィジェットのリンクを書き換える
5 GoogleアナリティクスとSearch Consoleの設定変更
6 301リダイレクトの設定(追記あり)
6.1 【追記】301リダイレクト問題解決!コードを書く場所の問題だった
7 最後に



SSL化するメリットとは

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

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

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

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

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

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

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

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

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

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

これはChromeでの表示なのですが、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のように無料または安価で導入できるSLLは「ドメイン認証」と言って、誰でも取得できるものなんです。ですが、個人でウェブサイトを運営する分にはこれで十分です。

 

一方、企業・団体のみが取得できる「企業認証」というものがあり、こちらは電話審査などがあり厳しくチェックされるようです。無事審査に通れば、より高い認証レベルのSSLが取得できる。つまりは、お墨付きがもらえるという事ですね。

更に、最高レベルのSSL証明書(「EV認証」)というものもありますが、本記事を読まれている方で最高レベルの物が必要な方はまずいないと思うので割愛します。

☞参考サイト

ロリポップでサイトをSSL化するには数回のクリックだけ!

さて、結局前置きが長くなりましたが、ようやく本題です。SSL化するだけであれば非常に簡単です。

  1. ロリポップのユーザー専用ページのサイドバーから「独自SSL証明書」をクリック
  2. SSL化したいURLにチェック☑を入れる
  3. 独自SSL(無料)を設定する」をクリックする

以上です!

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

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

WordPressの変更点

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

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

 

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

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

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

 

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

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

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

実はこの時点では、画像や内部リンクなどの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://~」に置き換えても鍵マークが表示されない場合

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

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

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

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

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

 

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

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

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

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

 

2.カエレバで挿入したAmazon/楽天市場リンクの頭に付いていた虫眼鏡

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

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

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

 

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

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

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

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

 

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

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

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

 

外部リンクに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 リダイレクトの使用

正直に言いますと、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ファイルはかなり重要なファイルです。おかしな記述があるとサイトが表示されなくなる可能性があります!コードを追記する前に必ずバックアップを!

最後に

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

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

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

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

あなたのシェアが励みになります!