【WordPress】ロリポップで無料SSLを設定する方法を画像多めで解説します【独自ドメイン】

良かったらシェアをお願いします!

がく
SSL(https)化をしないと…

そう思いつつも、「SSL化したら検索順位が下がった」「SSL化に失敗して復旧作業が大変」などといった話を見聞きして、二の足を踏んでいた当ブログです。

とはいえ、GoogleがSSL化を推奨しており、HTTPSをランキングシグナルに使用すること(SSL化しているサイトを検索順位上優遇すること)を明言していますので、早い段階でSSL化しないとなーと考えていました。

そんな折、当ブログが使用しているレンタルサーバー「ロリポップ! 」でも独自SSLが無料で利用できるようになったこともあり、今回、重い腰をあげてSSL化に挑戦しましたので、手順を記事に残したいと思います。

これからSSL化を検討している方の参考になれば嬉しいです。

がく
そもそもSSLってなんぞやって疑問はGoogle先生に聞いてくださいw
スポンサーリンク

SSL化すると「保護された通信」となり鍵マークが付く!

SSL化の作業のゴールは、URLが「http~」から「https~」に変わり、「保護された通信」という標記と鍵マークが付くことです。

がく
それではSSL化の作業スタート♪

ブログ(WordPress)をバックアップ

SSL化の作業に入る前段階として、念のためブログのデータのバックアップをとっておきます。

バックアップをとる方法はいくつもありますが、今回はWordPressのプラグイン「BackWPup」を使ってバックアップをとります。

プラグイン「BackWPup」をインストール&有効化

WordPressの管理画面から「プラグイン>新規追加」と進み、“BackWPup”で検索すると「BackWPup – WordPress Backup Plugin」が表示されます。

今すぐインストール」>「有効化」と順にクリックしましょう。

WordPressのデータベースをバックアップ(SQLファイルの取得)

メニューの「BackWPup」のリストから「ダッシュボード」を選択して、「データベースのバックアップをダウンロード」をクリックします。

BackWPup_データベースのバックアップ

「○○○.sql」というSQLファイルを適当な場所に保存してください。

これでバックアップ完了です!

がく
安心してSSL化の作業に進むことができますね!

ロリポップの独自SSL(無料)証明書を申し込む

ロリポップ! のユーザー専用ページにログイン

ロリポップのユーザー専用ページにログインして、「証明書お申し込み・設定」を開きます。

セキュリティ独自SSL証明書導入」でもOKです。

独自SSL(無料)の設定

SSLで保護されていないドメイン」のタブに独自ドメインとサブドメインが一覧で表示されています。

独自SSLを適用したいドメインのチェックボックスを選択して、「独自SSL(無料)を設定する」ボタンをクリックします。

すると、「SSL設定作業中」と表示されますので、設定が完了するまでしばらく待ってからリロード(ページを更新)しましょう。5分程度かかるという説明ですが、数秒で完了することもあります。

独自SSLの設定完了

設定が完了すると、「SSLで保護されているドメイン」のタブに追加され、「SSL保護有効」のステータスになります。

ためしに「SSL保護有効」となったドメインで“https://”を冒頭に付けたURL(当ブログの場合“https://queseraselife.com”)でアクセスしてみましょう。アクセスできれば独自SSLの設定が無事完了しています。

ここで403エラーが表示されてブログやサイトにアクセスできないことがあります。その場合は時間をおいてから再度アクセスしてみましょう。

WordPressの一般設定でアドレスを「https」に変更

次に、WordPressの設定に移ります。

WordPress管理画面で「設定一般」と進みます。

一般設定にある「WordPressアドレス(URL)」と「サイトアドレス(URL)」にあるそれぞれのアドレスの頭「http」を「https」に変更します。

変更したらページ最下部の「変更を保存」ボタンをクリックします。これでWordPressの一般設定は完了です。

ただし、まだSSL化は完了していません。最終的にアドレスバーに「保護された通信」という標記と鍵マークが表示されたらゴールです。

WordPressのすべてのリンクや画像を「https」に置換

記事に記載しているリンクや画像のうち、ひとつでも「http」のままのものがあると「保護された通信」という標記にはならないのです。そこで、WordPress内のすべてのリンクや画像の「http」を「https」に書き換えていきます。

さすがに手作業は現実的ではないので、WordPressのプラグイン「Search Regex」を使って一括して書き換えましょう。

プラグイン「Search Regex」をインストール&有効化

WordPressの管理画面から「プラグイン>新規追加」と進み、“Search Regex”で検索すると「Search Regex」が表示されます。

今すぐインストール」>「有効化」と順にクリックしましょう。

「Serch Regex」で「http」を「https」に一括置換

WordPress管理画面のメニューで「ツールSearch Regex」と進みます。

Search pattern」にSSL化するのURL(当ブログだと“http://queseraselife.com”)を、「Replace pattern」にSSL化したのURL(当ブログだと“https://queseraselife.com”)を入力します。

入力後、「Replace」ボタンをクリックすると、画面の下側に置換される箇所が一覧表示されますので、確認しましょう。

大丈夫そうであれば「Replace & Save」ボタンをクリックします。

これで、「http~」が「https~」に一括で書き換えられました。

SSL化完了!「保護された通信」となればOK

ここまでの作業で無事「保護された通信」の標記と鍵マークが付きましたでしょうか。

ためしにブログ(またはサイト)のいろんなページにアクセスしてみてください。どのページでもアドレスバーに上記画像のような「保護された通信」標記と鍵マークが付いていればSSL化は完了です。

SSL化によってアドレスが「https」に変わりましたので、Google Search Console(サーチコンソール)やGoogle Analytics(アナリティクス)の設定をしましょう。

「保護された通信」にならない・・・そんな方は

私もそうだったのですが、ここまでの作業をやってもまだ「保護された通信」の標記が出ませんでした。

その原因は、まだ「http」のままのやつが残ってしまっているからです。

さっそく「http」のままのやつを探しましょう。

Google Chrome でブログ(またはサイト)を開いて、Windowsなら“F12”を、Macなら“option + command + I”を押してデベロッパーツールを開きます。

Console」(コンソール)のタブをクリックすると、コードが一覧表示されますので、背景が赤い箇所をよく確認してみましょう。

私の場合は、ヘッダーに使っているタイトルロゴと背景の画像、それからウィジェットのプロフィールに使っている画像とプロフィールの詳細ページへのリンクが「http」のままでした。

ヘッダーの画像は再設定をして、ウィジェットはウィジェットの編集画面で手打ちで「https」に書き換えました。

あ、ウィジェットに貼っていた楽天の広告も撤去したっけ。

その結果・・・

無事、アドレスバーに「保護された通信」の標記と鍵マークが付きました~♪

Google Search Console(サーチコンソール)の設定

SSL化によってアドレスが「https~」に変わりましたので、サーチコンソールに新しいURLを登録します。

プロパティを追加(新しいURLを登録)

サーチコンソールにログインして、「プロパティを追加」ボタンをクリックします。

SSL化した後の「https」から始まる新しいURLを入力して、「追加」ボタンをクリックしましょう。

サイトの所有権の確認

プロパティを追加すると、サイトの所有権の確認画面になります。

SSL化する前の「http」から始まるURLですでにサーチコンソールの設定が済んでいる場合は、「おすすめの方法」のタブにある「ロボットではありません」にチェックをして「確認」ボタンをクリックすれば完了です。

サイトマップを送信

続いてサイトマップを送信します。

こちらもすでに作成済みのものがあれば、それを再度送信すればOKです。

サーチコンソールのメニューの「クロールサイトマップ」を開き、「サイトマップの追加/テスト」ボタンをクリックします。

WordPressのプラグイン「Google XML Sitemaps」でサイトマップを作成している場合、空欄に“sitemap.xml”と入力して「送信」ボタンをクリックすればサイトマップの送信は完了です。

Google Analytics(アナリティクス)の設定

アナリティクスについても、登録しているURLをSSL化した後の「https」に変更する必要があります。

アナリティクスにログインして、「管理プロパティプロパティ設定」と進み、「デフォルトのURL」の「http」を「https」に変更します。

変更したら、ページ最下部にある「保存」ボタンをクリックしましょう。

こちらは「https」を選択するだけなので簡単ですね。

Google Adsense(アドセンス)の設定は不要

アドセンスに関しては、SSL化に伴う設定は不要です。

「http~」から「https~」にリダイレクト設定

最後に忘れてはいけないのがリダイレクト設定です。

リダイレクト設定をすることによって、SSL化する前の「http~」のURLにアクセスしてきたユーザーを、自動的にSSL化した後の「https~」のURLに飛ばすことができます。

FTPで「.htaccess」にリダイレクトのコードを追記

ロリポップ!にログインして、「サーバーの管理・設定ロリポップ!FTP」と進みます。

.htaccess」というファイルを探してクリックしましょう。すると、ソースコードの編集画面になります。

コードの一番上に次のコードを追記してください。コピペでOKです。

RewriteEngine on
RewriteCond %{HTTPS} !=on [NC]
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

追記したら「保存する」ボタンをクリックします。

これでリダイレクトの設定は完了です。「http~」のURLにアクセスしても、自動的にSSL化をした後の新しい「https~」のURLに飛ぶようになりました。

まとめ:ロリポップの無料SSL設定は案外簡単だった

以上でSSL化の主な作業は完了です。

お疲れ様でした!

ほかの細かい作業としては、「http~」で登録しているサービスなどがあれば「https~」に変更することでしょうか。たとえば、ブログランキングなどに登録しているのであれば、URLの登録情報を修正する必要があります。

「なんか難しそうだし失敗したらどうしよう…」とビクビクしながら始めたSSL化の作業でしたが、振り返ってみれば案外簡単でした。

SSL化の手順を解説しているブログ記事も増えてきましたので、それらを読みながら焦らず取り組めば何とかなるもんですね。

SSL化を機にエックスサーバーへの乗り換えも検討していましたが、ロリポップ!も独自SSLが無料で利用できるようになりましたので、もうしばらくはこのまま様子見ようかなと思っています。

がく
それでは今回はこの辺で~
スポンサーリンク

良かったらシェアをお願いします!

フォローする