サイトマップ(全ページ一覧)

赤ちゃんに絵本はまだ早い?
絵本を、もっと身近に。
無料の絵本で気軽に読み聞かせ。

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

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

 

当サイトは、レンタルサーバーのロリポップ!を契約し、Wordpressで作成しています。SSL化しているので、安心してご利用ください!

SSLとはSecure Sockets Layerの略で、インターネット通信を暗号化する技術のこと。

SSL化されている=セキュリティが強化されたウェブサイトということなので、安心して閲覧できますよね。

ロリポップ!では無料のSSL(Let’s Encrypt)が使えます。

素人の私でもSSL化できましたが、手続きでつまづいた部分ありました。そこで、SSL化の詳しい手順をシェアしたいと思います。

SSL化するメリット

SSL化するメリットはざっくり言うと3つあると思います。

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

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

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

 

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

SEOとは、Search Engine Optimizationの略。検索エンジン最適化を意味する言葉です。

Googleウェブマスター向け公式ブログでは、SSL化されたhttpsで始まるウェブサイトをSEO面で優遇することを発表しています。

HTTPS をランキング シグナルに使用します
Google フレンドリーなサイト制作・運営に関するウェブマスター向け公式情報
HTTPS ページが優先的にインデックスに登録されるようになります
Google フレンドリーなサイト制作・運営に関するウェブマスター向け公式情報

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

 

3.視覚的に「安全なサイト」であると判断しやすい

httpsサイトのアドレスバーの表示

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

SSL化サイトでは、アドレスバーの先頭に鍵マークが表示されます。

鍵マークをクリックすると、「この接続は保護されています」と表示されます。

 

SSL化未対応のままだと、どうなるのか

httpサイトのアドレスバーの表示

httpサイトを表示しただけで「保護されていない通信」と警告が出ます。

 

更に、2018年10月からは、非SSL化サイトで入力フォームに文字を入れようとすると、「保護されていません」の文字が赤字で表示される仕様になりました。

httpサイトで入力フォームに文字を入力

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証明書の申し込み画面

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

 

×SSL保護無効」の表示が「SSL保護申請中」に変わります。

数時間後、httpsをつけたURLでサイトが無事に表示されれば、SSL化完了です。

httpsをつけたURLで403エラーが出たら、時間をおいてブラウザのキャッシュを削除(F5でページの更新でも可)し、再度アクセスしてみてください。

WordPressの変更点

SSL化するだけならこれで終わりです。が、この時点ではhttpとhttps双方のURLが混在しています。

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

 

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

ワードプレスでURLをhttpからhttpsに書き換える

設定 → 一般

WordPressアドレス(URL)」と「サイトアドレス(URL)」の頭を「https://~」に書き換え、「変更を保存」をクリック。

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

一度強制的にログアウトします。

IDとパスワードを入力して再ログイン。httpsがついた管理画面に入れます。

 

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

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

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

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

実はこの時点では、画像や内部リンクなどのURLはhttpのままです。

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

 

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

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

 

手順のみ簡単に書きます。

Search-Regex管理画面

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

Resultsの下に置換結果が表示されます。

さいごにReplace & Save≫」をクリックして保存してください。特に問題なければ、すべてのページに鍵マークがつき常時SSL化が完了します。

 

置換を実行すると、元に戻せません!事前にバックアップを取っておくことをお勧めします。

私は「BackWPup」というプラグインを利用しています。

★「Search Regex」は、今後使う予定がなければ削除してOKです。

 

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

私の場合、上記の対応をしても、ほとんどのページでiマークが付いたままでした。理由は4つありました。

1.自サイトの画像URLがhttp~だった

Jetpackのシェアボタン用に作った「はてブ」のロゴ画像のURLが、http~のままでした。Search Regexでは置き換えられなかったようです。

シェアボタンを設置した投稿ページすべてに、鍵マークがついていませんでした。

(Jetpackプラグインのシェア機能には「はてブ」ボタンがありません。そこで「B!」のロゴを自作して「はてブ」ボタンを追加していました。)

 

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

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

※現在は自作のSNSボタンを使用しており、Jetpackのシェア機能は一部のページでのみ使用しています。

 

【httpのままの箇所を確認する方法】Chromeなら、調べたいページを開いてF12キーを押します。(※Windowsの場合)ディベロッパーツールが開いて、英語ですが、エラー項目を見ることができます。

はてブSNSシェアボタンがMixed contentだった例

Mixed Content」以降に、httpが混在しているURLが書かれています。

一部のページで、iマークが消えない!という方は、ディベロッパーツールでご確認を。

 

2.外部サイトから読み込んだ画像URLがhttp~だった

カエレバで挿入した商品リンクの、虫眼鏡アイコンのURLがhttp~でした。

カエレバとは、Amazonや楽天の商品紹介リンクを簡単に設置できる、便利ツールです。

商品紹介ブログパーツ カエレバ
ありそうで無かった、商品紹介用のブログパーツあります!

市販のえほんを紹介するときなどに、カエレバヨメレバを利用していました。

※現在は、ワードプレスのテーマの機能で同様のことができるので、利用していません。

 

虫眼鏡アイコンが入るデザインを愛用していました。が、この虫眼鏡画像が引っかかっていたようです。

カエレバ

この虫眼鏡の画像URLが、http~でMixed Contentだぞ!と言われていました。

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

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

虫眼鏡アイコンつきで、再度カエレバを使ってみたら、ちゃんと鍵マークがつきました!

今後はアイコンつきでカエレバを利用しても大丈夫。かん吉先生、ありがとう!

 

3.埋め込み地図がhttpsに未対応だった

オープンストリートマップの埋め込み地図が、SSL化後、機能しませんでした。

旅行関係のブログ記事で、埋め込み地図を使っています。

Google mapは大丈夫でしたが、OpenStreetMapを埋め込んだページがMixed Contentになっていました。

また、SSL環境ではうまく動作しないのか、埋め込んだ地図が真っ白に。

OpenStreetMapを使うときは、埋め込みは諦め、代わりにスクリーンショットを添付することにしました。(OpenStreetMapは、地図のスクリーンショットが使用可能です。Google mapは規約で不可)


大きな地図を表示

【2018年11月6日追記】

OpenStreetMapを埋め込んでもMixed Contentにならず、地図も正常に表示されるようになりました!

4.アフィリエイトリンクのコードにhttp~が含まれていた

画像つきの楽天アフィリエイトコードにhttp~が含まれており、Mixed Contentになっていました。

Amazonアソシエイトの方は問題なし。

楽天アフィリエイトのリンクを削除し、コードを取得し直したら、無事解決しました。

SSL化するサイトが増えてきたので、コードをhttps対応に切り替えたのかなと思います。

 

ちなみに、画像が含まれていないテキストだけのリンクでも、実は<img>タグ(画像用のHTMLタグ)が使われている場合があります。

たとえば、こちら。

楽天市場

一見、ただのテキストリンク。でもコードはこんな感じ。

A8ネット-楽天市場のコード

<img>タグの中に、「src=https://~」という箇所があります。ここがhttp~で始まっていると、Mixed Contentになると思われます。

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

http~で始まるサイトにリンクを貼ると、鍵マークが付かないという情報もあります。

アフィリエイトコードなどでない、ただのテキストリンク(アンカーテキスト)なら、httpのままでも大丈夫です。

 

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

「Search Regex」で置換できない部分は、手動でURLをhttps~に書き換えます。

Jetpackの自作ロゴがそうでしたね。私はほかに3箇所、手で直す必要がありました。

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

メニュー・カスタムリンクURLの書き換え

メニューにカスタムリンクを設定している場合は、自分で書き換えます。

 

2.テキストウィジェットにHTMLで入力した内部リンク

メニュー・カスタムリンクURLの書き換え

テキストウィジェットに直接内部リンクを書き込んでいる場合も、手動で書き換えます。

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

ウィジェット内の内部リンクは全てチェックしましょう。

 

3.子テーマの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リダイレクト

301リダイレクトは、.htaccessファイル「#BEGIN WordPress」の上に、次のコードを貼り付ければ完了です。

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

 

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

htaccessファイルの場所
ユーザー専用ページ
→WEBツール
→ロリポップ!FTP
→フォルダを選択(当サイトの場合はakaeho)
→wp-includesというフォルダの下に.htaccessファイルがあります。
.htaccessファイルの編集方法は、こちらの記事で動画付きで更に詳しく解説しています。あわせてご参照ください。

 

コードの書き方は、こちらのサイトを参考にさせていただきました。

.htaccessでhttpからhttpsへ301リダイレクトWEB担当者の備忘録

.htaccessファイルは重要なファイルです。記述ミスがあると、サイトが表示されなくなる可能性があります。
編集前に、水色の「ダウウンロード」ボタンをクリックして、ファイルを保存しておきましょう。万一失敗しても、保存したファイルを上書きアップロードすれば元に戻すことができます。

 

コードを書く場所を間違えると、リダイレクトされない

当初、.htaccessファイルにコードを追記しても、リダイレクトされませんでした。

コードを追記する位置を間違えていたことが原因でした。

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

私はコードを、.htaccessファイルの一番下に書いていました。

が、上記の通り、#BEGIN WordPressの前に書き直したところ無事にリダイレクトされるようになりました!

.htaccessファイルを開いたら、#BEGIN WordPress と書かれた場所を探し、その上に301コードを記載するようにしてください。

リダイレクトが正しくできているかチェックする

301コードを設置したら、http~で始まるアドレスにアクセスし、https~にリダイレクトされるか確認してみてください。

リダイレクト先をチェックできるオンラインツールもあるので、URLを入力してチェックしてみるのも良いと思います。

オンライン転送先確認ツール―100%正確なトラッカー
このリダイレクト探知ツールでリンクの転送先を解決しましょう。301、302リダイレクトで全てのリンクを追跡しましょう。この無料オンラインツールでURLがどこにリンクされているのか試してみてください。今すぐ結果を見てみましょう!

実はこのサイト、読者さまがご丁寧に教えてくださったので、追記いたしました^^

 

ちなみに、短縮URLのリダイレクト先もチェックできます。短縮URLのリンク先を調べるのにも便利なツールだと思います。

リダイレクトチェッカー

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

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

これがショックな方は多いはず。

https SNS カウント」で検索すると、いろいろと対策は出てきます。分かりやすいと感じるページをご覧になり、実践していただければと思います。

ただ、どうしてもうまく行かないケースもあるようです。

SSL化を機にカウントを諦める、というのも、選択肢の一つかなと思います。

SNSボタンを、プラグインや公式ボタンを利用して設置している方も多い思います。が、サイトを重くする原因になります。

 

カウント機能なしのシンプルな自作SNSボタンに変更することで、サイトのスピード改善につながるかもしれません。

ご自身のサイト速度をチェック→PageSpeed Insights – Google Developers

 

自作のSNSボタンを設置してみたい方は、こちらの記事をご参考にどうぞ。

最後に

ロリポップ!でワードプレスサイトをSSL化すること自体はとても簡単です。

が、その後の設定が、初心者の私には非常に難関でした。

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

でも、ある程度サイトを作りこんでしまってから、安易にSSL申請をすると、思わぬ苦労を強いられます。

SSL化は慎重に!

 

♥ちょこっと宣伝!
SSL化に関するフリーイラストを作りました!イラストACに投稿しています。ご入用の方はこちらから無料ダウンロードいただけます。

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