自由にシンプルに楽しくいこう!

ロリポップで独自SSL(無料)を利用してウェブサイトをSSL対応した手順

ブログ

今回はサイト(ブログ)をSSL化対応して、暗号化された安全な通信環境を設定していきたいと思います。

SSL(Secure Sockets Layer)とは、インターネット上でデータをやりとりする時に通信を暗号化して、第三者に情報をのぞかれたり盗まれたりしないようにする技術のことです。

サイトやブログのURLが「http」や「https」になっていたりしたことはありませんか?

この「http」に「s」が付いているか付いていないかで、暗号化された通信が行われているのか変わってきます。
「http」は、通信が暗号化されていません。
「https」は、通信が暗号化されており保護された安全な通信となっています。

サイトをある程度運営してからSSL化するより最初から常時SSLに対応した方が、「URLが後で変更になって色々と設定が大変になった!」なんてならないように初期段階でこのサイトもSSLに対応させたいと思っていました。

ということでワードプレスで運営しているこのブログですが、私がロリポップで独自SSL(無料)を使ってSSL化した手順を簡単にメモしたいと思います。

 

ロリポップで独自SSL(無料)を使ってブログをSSLに対応させる。

今回はロリポップで無料で利用できる独自SSL(無料)を使って作業を進めていきます。

手順については、基本的にロリポップの公式マニュアルに沿ってSSLに対応する為の作業を進めていきます。

独自SSL(無料)のお申込み・設定方法 / セキュリティ / マニュアル – レンタルサーバーならロリポップ!
https://lolipop.jp/manual/user/ssl-free-order/#p-setting

 

ロリポップのユーザー専用ページにログインします。

 

ロリポップ!ユーザー専用ページ – インフォメーション
https://user.lolipop.jp/

 

メニューから[セキュリティ] → [独自SSL証明書導入]を選択します。

 

 

「独自SSL証明書お申込み・設定」が表示されます。

 

次に「SSL保護されていないドメイン」を選択します。

 

SSL化していない対象のドメインが表示されるので、SSL化したいドメイン(サブドメイン)にチェックを入れましょう!

[独自SSL(無料)を設定する]を選択します。

 

すると「SSL設定作業中」と表示されるので、しばらく待ちましょう!

独自SSL(無料)の項目では、ドメインのステータスを「すべてのドメイン」「SSL保護されていないドメイン」「SSLで保護されているドメイン」の中からそれぞれで確認することができます。

 

しばらく待ってから「すべてのドメイン」を選択してドメインのステータスを確認してみると「●SSL保護有効」にステータスが変わり、SSLの設定が無事に完了しました。(私の場合は、5分程度待っていたと思います。)

 

再び「SSL保護されていないドメイン」を選択すると、「該当する独自ドメインがありません。」と表示されるようになりました。

 

「SSLで保護されているドメイン」を選択すると、独自SSLが有効になったドメインが表示されました。

 

独自SSLの設定ができたらドメインにアクセスして確認する

前の手順で、SSLに対応する為の設定が完了しました!

それでは早速SSLに対応できているか確認してみたいと思います。

ブラウザを開き、対象のドメイン(URL)を入力してページを表示してみます!

最初は、「s」なしの「http」で試してみます!

 

「!マーク」で「このサイトへの接続は保護されていません」と表示されました!
当たり前ですが、「http」なので通信が保護されていません。

 

では次に、「s」ありの「https」で試してみます!

「鍵マーク」で「保護された通信」と表示されました!
これでしっかり暗号化された通信をしていることが分かります。
SSLに対応できたってことになります。

サイトのSSL化はこれで完了できたのですが、他にも設定することがあるので次に進みます。

 

サイトをSSL対応したら転送設定(301リダイレクト)を行う

独自SSLを使ってウェブサイトの常時SSL化が完了したら、301リダイレクトの設定が必要です。

SSL化対応したサイトのURLは、「s」が付いた「https」で始まるURLになりますが、SSL化対応後も「s」が付いていない「http」のURLも今までと同じように有効になっています。

訪問者には、安全なSSLに対応したページに訪問してもらいたいので「http」で始まるURLにアクセスした場合に「https」で始まるURLに自動で移動してもらえるように、リダイレクト(転送)設定を行います。

リダイレクト設定する為には、ワードプレスをインストールしたディレクトリの「.htaccess」ファイルに設定を追加してアクセスの制御を行います。

 

「FTPソフト」「ロリポップ!FTP」を使って、ウェブサーバーにある「.htaccess」を一度ダウンロードして編集しましょう。

ファイルを修正する前に、念のため「.htaccess」ファイルのバックアップをとっておくことをお勧めします!動作がおかしい場合は、このバックアップファイルを利用すれば元の状態に戻せます。

「.htaccess」ファイルをテキストエディタで開き、「# BEGIN WordPress」の前に次のコードを追加して保存します。

 

<追加するコード>

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

このコードの簡単な解説をすると「https」でアクセスされていない場合(httpでアクセスされた場合)に、「s」付きの「https」に転送するという意味になります。

 

<変更前>

 

<変更後>

 

リダイレクトのパラメータは、R=301とR=302があります。

301リダイレクトは、恒久的な転送をする。

302リダイレクトは、一時的な転送をする。

という意味になっている。

今回は、一時的な転送ではなく恒久的な転送なので、301を指定する!

 

301リダイレクトと302リダイレクトの違いと正しい書き方
https://kasegood.net/301redirect

 

こちらのサイトに分かりやすく解説してあった。

 

「.htaccess」ファイルの編集が終わったら、アップロードして「.htaccess」ファイルを上書きします。

ちなみに編集対象の「.htaccess」ファイルの場所ですが、ワードプレスをルートディレクトリに直接インストールしている方は、ルートディレクトリ内の「.htaccess」を迷うことなく編集すると思いますが、ワードプレスをサブディレクトリにインストールした方の場合は、どのディレクトリの「.htaccess」ファイルを編集するのか少し迷うかもしれません!?

 

私もちなみにちょっと迷ったのですが、結果的にルートディレクトリの「.htaccess」ファイルだけにリダイレクトのコードを追加しました。

 

ワードプレスをインストールしたサブディレクトリにある「.htaccess」ファイルのみ更新した場合も試したのですが、「http」→「https」に上手く転送されませんでした。

 

そして、次にルートディレクトリの「.htaccess」ファイルだけを更新して試してみたところ問題なく「http」→「https」のURLに転送されました。

 

ということで、転送設定(リダイレクト)の記述は、ルートディレクトリに配置してある「.htaccess」ファイルを更新すれば良いと思います。

そもそも「.htaccess」の有効範囲は、上位ディレクトリに記述しておけば下位に存在するディレクトリにも基本的に適用されるようになっています。

 

<参考リンク>

ロリポップで常時SSL化した際に設定する301リダイレクト
https://3061.jp/lolipop-ssl-301/

.htaccessの書き方 | murashun.jp
https://murashun.jp/blog/20141229-01.html

今さら人に聞けない!WordPressで使われているmod_rewriteの説明書|クロノドライブ
https://html-coding.co.jp/knowhow/tips/wp_modrewrite/

WordPressに作成される.htaccessの動作を改めて確認しておこう – ええかげんブログ(本店)ええかげんブログ(本店)
http://algorhythnn.jp/blg/2014/08/25/wordpress-htaccess-check/

サブディレクトリのWPをドメイントップへ表示する方法 | 座右の銘は塞翁が馬
https://pct.unifas.net/cms/wordpress/1678/

 

SSLに対応したらワードプレスの設定を行う

ここまでで「レンタルサーバーのSSLの設定」「リダイレクト(転送)設定」が完了しました。

次にワードプレスのサイトのURLの設定を「http」から「https」に変更します。

ワードプレスの管理画面から[設定] → [一般設定]に進みます。

「WordPress アドレス (URL)」「サイトアドレス (URL)」を「http」から「https」に変更します。

 

<変更前>

 

<変更後>

 

SSL対応によるその他の設定について

ウェブサイトをSSL対応する為にここまででいくつか設定をやってきました。
SSL化する為の設定は、あらかた完了したのですが、SSL対応する前の過去の作成データをこれから「http」から「https」に全て修正していかなければなりません。
この作業が一番大変です!

この残りの作業については、人それぞれ環境によっても変ってきます。
そこで、投稿記事や画像のリンクなどの「http」→「https」に修正しなければならない残りの設定を簡単に箇条書きで書いていきたいと思います。

詳しいやり方については、次の二つのサイトを私は参考にさせて頂きました。
とても分かりやすく説明してあるので、説明と注意点をそれぞれ良く確認しながら残りのSSL対応に必要な設定を行うことができました。

 

WordPressをhttpからhttpsにSSL化した全手順まとめ(エックスサーバー環境)
XSERVERで常時SSLが無料なので、WordpressサイトをHTTPS化したときに行った全ての手順をまとめてみました。

 

ロリポップが無料の独自SSLを導入!WPのサイトを常時SSL化する手順
ロリポップでワードプレスのサイトを常時SSL化する手順をまとめました。プラグインでURLをhttpsに書き換える方法/手動で変更が必要な箇所の対応方法/301リダイレクトの書き方

 

 

<SSLの残りの設定>

・プラグイン「Search Regex」を使ってURL(リンク)を一括置換する。

・WPテーマで、画像リンクなどがhttpで呼び出している部分がないか?

・メニューバーのカスタムリンク(内部リンク)の確認

・サイドバーウィジェットに追加した内部リンクの確認

・ヘッダー、フッターに書き込んだ内部リンクの確認

・Googleアナリティクスの設定したURLの変更

・Seach Consoleに登録したウェブサイトURLの設定変更

・SNSシェアボタンなどのカウントを引き継ぐ設定

・アフィリエイトや広告関係のSSL対応していないURLの確認

 

まとめ

ウェブサイトをSSLに対応させる為には、レンタルサーバーでSSLの設定を申し込めば比較的簡単にSSLに対応させることができます。

しかしブログ運営がある程度進んだ状態でSSLに対応させるのは修正項目が多く結構大変になります。なので、ブログを始めた初期の段階で早めにSSLに対応させたほうが良いのかもしれません。

最後にSSLに対応するために今回やったことを簡単にまとめます。

 

・レンタルサーバーでSSLの設定を行う

・httpにアクセスした場合httpsに転送(リダイレクト)されるように「.htaccess」にて制御する

・ワードプレスの設定でサイトのアドレスをhttpsに対応させる。

・テーマ、メニュー、ウィジェット、投稿ページなどの内部リンクを「http」から「https」を呼び出すように修正する

・アクセス解析などのツールに登録したサイトのURLを「http」から「https」に修正する。(Googleアナリティクス、Seach Consoleなど)

・その他(アフィリエイトや広告関連など)で、httpで呼び出されている部分があれば確認すること。

 

なんとか情報を集めてSSLにサイトを対応させましたが不具合がこの先出てくるかもしれません。
その時は、今回のことを思い出して対応していきたいと思います。