SSL化とは? httpからhttpsにする方法を、わかりやすく簡単に解説します

 

Bonjour!

プリちゃん(PriusShota)です!

光と色彩が大好きなアーティストである著者が

「SSL化とは? httpからhttpsにする方法を、わかりやすく簡単に解説します」について書いています。

SSL化とは? httpからhttpsにする方法を、わかりやすく簡単に解説します

photo by @priusshota

 

「え? どうやら私のサイトURLはhttpで、httpsにしなきゃいけない。。。!?」

「SSL化をしたら解決するみたいだけど、そもそもSSL化って何ですか?」

「ブログを運営していて、途中からSSL化にする必要が出てきたけど、どうしたらいいのだろう。。」

 

と、頭を抱えて悩んでいませんか?

 

SSLとはSecure Sockets Layerの略で、WEBブラウザ(= 例えば、Google chromeなど)とサーバー間で送受信しているデータを暗号化する通信手段のこと。

 

SSL化ができていれば個人情報といった大切なデータは暗号化によってロックされることになるので、他人によるデータの盗聴や改ざん、なりすましを防ぐことができるのです。。!

 

基本的に企業の運営サイトやSNSは、ほぼSSL化されているので安心です。

只、最近では個人で1からブログといったWebサイトを作る方も増えて、サイトのURLが、SSL化されていないhttpのままになっているケースがあるかもしれません。。!

 

この記事を書いている私自身も、Wordpressで作成したこのブログURLがhttpのままであることに途中から気づいて、「httpsにしなきゃ、どうしよう???」と焦っていました。

しかし、個人でも手順を追えば最短2時間ほどで、WordpressのブログをSSL化することができたので、今回は「SSL化とは? httpからhttpsにする方法を、わかりやすく簡単に解説します」として書いていきますね。

 

 

 

1.そもそもSSL化って何ですか?

photo by @priusshota

 

SSLとはSecure Sockets Layerの略で、WEBブラウザ(= 例えば、Google chromeなど)とサーバー間で送受信しているデータを暗号化する通信手段のこと。

SSL化ができていれば大切なデータは暗号化によってロックされるので、他人によるデータの盗聴や改ざん、なりすましを防ぐことができるということでした。

 

SSL化ができているかどうかのチェック方法はとってもシンプル!

 

Google ChromeのWebブラウザから、私のサイトを見た場合。先頭に鍵マークがあり、httpsから始まるURL (=SSL化されている)であることがわかります。

①インターネットのブラウザ(=Goole Chromeとか)で、URLを入力するときに”https”から始まっていること

②httpsの隣には”鍵マーク”があること。

 

この2点があれば、SSL化されている証拠になります。

 

 

もしSSL化されていなければ、

SSL 化できていないサイトだと、先頭は鍵マークではなく、httpから始まるサイトのはず。(私の場合は、httpが隠れています。)

①URLがhttpsではなくて、”http”から始まっている。

②httpの隣には鍵マークではなく、別のマークになっている。

→Macの場合、iに○がついたマークでした。

 

この場合、暗号化されていない通信なので、ある意味データが丸見え状態に。。!そうすると、例えばクレジットカード番号といった個人情報や機密情報が不正に入手されてしまう危険性が高まります。。。!

だから、大切な情報を守るためにSSL化は、とても有効な手段の一つとなるのですね。

 

2.サイトのURLをhttpからhttpsに変える8ステップ(X serverの場合)

photo by @priusshota

 

SSL化について学んだ後は、いよいよ変更するための設定に入ります。。!

 

これからお話する設定手順は、“Wordpressでブログサイトを作成し、レンタルサーバーはX serverを利用した個人サイト”のケースとして書いています。

 

※他のブログシステムやレンタルサーバーを利用している場合は、手順が違う可能性がありますので予めご了承ください。

 

SSL化をすることが難しそう。。」と私も最初は思っていたのですが、X serverの場合なら、WordPressのアドミン画面とX serverの「ファイルマネージャ」や「FTP」のページを行ったりきたりするイメージで必要な設定入力をするだけで、案外すんなりと終えることができます。。!

 

無事にSSL化ができれば、最後にあなたが利用しているサービス、Google Analytics(グーグルアナリティクス)の一部編集や、Google Search Console(グーグルサーチコンソール)の再設定をすればOKです!

 

<httpからhttpsへ! SSL化するための8ステップ(X serverの場合)>

 

①【Wordpress】設定変更の前に、必ずWordpressのバックアップをする 

②【X server】サーバーパネルを開いて、ドメインの”SSLの設定”で変更する

③ SSL設定が終えてから、サイトに反映されるまで待つ(10分〜1時間ほど)

④【Wordpress】設定の項目にある”一般”から、URLをhttpsに変更する

⑤【Wordpress】”Search Regex”というプラグインで、内部リンクを全て置き換える

⑥【X server】FTPから、”.htaccess編集”でリダイレクト設定する

⑦【Wordpress】SSL化できているか、エラーページがないかチェック

⑧【Google Analytics】の一部編集と【Google Search Console】の再設定をする

 

 

それでは、一つずつ手順を見ていきましょう!

 

①【Wordpress】設定変更の前に、必ずWordpressのバックアップをする

photo by @priusshota

 

まずはWordPressのアドミン(管理画面)から、バックアップをとりましょう!

 

バックアップの仕方

1,Wordpressのプラグイン “BackWPup” をインストール・有効化

2.BackWPupのダッシュボードから、”1クリックバックアップ”の青いボタンを押す

3.バックアップのファイルがダウンロードされる

 

※これを予めしておくと、何か問題があった時に元の状態に復元することができるようになりますよ。。!

 

②【X server】サーバーパネルを開いて、ドメインの”SSLの設定”で変更する

photo by @priusshota

 

続いて、X serverのサーバーパネルにログインをします。

そこからドメインの項目にある、”SSLの設定”へ進みます。

X serverログイン画面

 

1.ドメイン選択画面で、SSL化したいドメインを選択する

自分のドメインを選択する

 

2.独自SSL設定追加タブの、「確認画面へ進む」ボタンを押す

※CSR情報(SSL申請証明書情報)を入力する→こちらは何も入力せずにスキップでOKです。

 

③ SSL設定が終えてから、サイトに反映されるまで待つ(10分〜1時間ほど)

photo by @priusshota

 

独自SSL設定を追加後、「SSL新規取得申請中です。しばらくお待ちください。」と青い表示が出ます。

このように追加ボタンを押すと、申請中との青い文字が表示されます。

 

この後、SSL設定一覧のタブを開くと、SSL用のアドレスが出てきます。

SSL用アドレスを押すと自分のサイトへ飛びます。只、反映に時間がかかります。(10分~1時間程度)

 

サイトの反映は少なくとも10分〜1時間ほど時間がかかります。

(私の場合は、10分程度でhttps~のURLで問題なくサイトが反映されました!!)

https~から始まるサイトが無事にWebブラウザ上で反映されたら、ひと段落クリアです!

 

④【Wordpress】設定の項目にある”一般”から、URLをhttpsに変更する

photo by @priusshota

 

再び、Wordpressのアドミン(管理)画面へ戻ります。

 

1.設定の項目にある、”一般”のボタンを押す。

一般に進みます。。!

 

2.WordPress アドレスとサイトアドレスを、それぞれhttpからhttpsに変更する

最初訪れると、どちらもhttpになっているので、 httpsに変更しましょう!

 

3.入力後、”変更を保存”のボタンを押す。

 

 

⑤【Wordpress】”Search Regex”というプラグインで、内部リンクを全て置き換える

photo by @priusshota

 

SSL化をしたということは、httpで始まっていたURLがhttpsに変わったわけですね。

そうなると、ブログ記事中にある内部リンクや、挿入している画像のリンクも今の状態では、どれもhttpのままです。。。。

 

そこで、Wordpressのプラグインである”Search Regex”を使って、

httpからhttpsへ一気に変換していきます!!

とっても優秀なWordpressプラグインです。。!

 

1.プラグイン”Search Regex”をインストール・有効化

 

2.Search Regexの設定画面にて、以下を入力する。

・Search patternに、http://~ で始まるあなたのサイトURL。

・Replace patternに、  https://~ で始まるあなたのサイトURL。

それぞれ入力後、”Replace”のボタンを押す。

オレンジの箇所以外は、何もいじる必要はありませんよ。

 

 

3.置き換えていく赤文字のURLが間違っていないかどうか全てチェック。

※この後の”Replace & Save”のボタンを一度押してしまうと、元の状態に戻すことができないため、ここは慎重になってオレンジの箇所を一つずつ確認していきましょう。。。!!

 

→入念に確認して問題がなければ、”Replace & Save”のボタンを押す。

主にオレンジのラインマーカーで引かれている箇所が、置き換え後のリンクになります。特に赤文字が問題ないかどうか要チェックです。。。!

 

 

⑥【X server】ファイルマネージャから、”.htaccess編集”でリダイレクト設定する

photo by @priusshota

 

今度はまた再びX server の画面に移ります。先ほどとは違い、今回はファイルマネージャからログインをします。

 

これからWEB  FTPの画面にて、.htaccessファイルを編集し、リダイレクトするために必要なコードを追加していきます!

 

リダイレクトというのは、「転送」という意味。

 

httpから始まるあなたのサイトURLに飛んだとしても、このリダイレクト設定を行うだけで、SSL化したhttpsから始まるサイトURLに転送してくれるのです。。!!!

 

おまけに!これまでhttpで積み重ねてきた検索エンジン評価も引き継ぎをしてくれるという。。!(大変有難い設定です。。!)

 

1.WEB FTPの中にある、自分のサイトドメイン名、隣にある黄色いファイルを選択

 

2.次に、public_htmlディレクトリのファイルを選択

 

3.”.htaccess”というファイルを選択してダウンロード、その後は大事なデータなのでバックアップのためにコピーをしておきます。

 

4.WEB FTPの画面に再び戻って、.htaccessファイル隣にある小さなチェックボックスを選択後、右上にある、ファイルの操作から”編集”ボタンを押す

チェックボックスをつけた後、編集ボタンを押す

 

5.エディター画面先頭に、以下のコードをコピぺする

 

 

<IfModule mod_rewrite.c>

RewriteEngine on

RewriteCond %{HTTPS} !=on [NC]

RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

</IfModule>

 

 

コードをコピペ後、”保存する”のボタンを押す

上記のコードを先頭にコピペ後、保存するボタンを押して終了です。。!

 

お疲れ様でした!!これで大きな峠はクリアなので、ゴールまであと少しです。。!

 

⑦【Wordpress】SSL化できているか、エラーページがないかチェック

photo by @priusshota

 

このエラーページがないかどうかのチェックはとても大事です!

なぜなら、まだセキュリティが弱いエラーページがあるからです。。!

 

エラーチェックのポイントは以下の通り。

 

1.ブラウザでURLをみた時に、先頭のマークは鍵マークですか?

→もしこの時点で鍵マーク以外なら、エラーページがある証拠。。!

 

2.Wordpressのウィジェット編集にて、挿入されている画像のURLをチェック

→おそらくhttpのままが多いので、httpsに置き換えたり、もう一度画像を挿入し直しましょう。

 

3.Google Chromeのデベロッパーツールを開いて、右側にある”Console”タブを選択。

こちらが、デベロッパーツール起動時の画面です。画面右上のElementの隣に、エラーを確認できる”Consoleタブ”があります。

 

どこがエラー状態なのかというリンクを示してくれます。そのリンク先に進もうとすると、安全でないサイトからの画像によってエラーであることを知ることができます。

エラーはこのような表示で、リンクを押すと何がエラーなのか示してくれます。私の場合は、httpのままである画像や、安全でない外部サイトからの画像(=Feedly)が出てきました。

 

(例えば私の場合だと、Feedlyのボタン画像がエラー理由だったので、これを機に外してみると鍵マークが付くようになって嬉しかったですね。。!)

 

※Google Chromeのデベロッパーツールは、Macbookの場合だとトラックパッド上で二本指でタップ。その中にあるinspectをチェックすると画面が表示されますよ。

英語だとinspect を押すと、デベロッパーツールが起動します。

 

ここまでクリアできれば、あとは最後の砦のみです。。!

 

⑧【Google Analytics】の一部編集と【Google Search Console】の再設定をする

photo by @priusshota

 

※これらは、SSL化する前からサービスを利用されている方のみで大丈夫です!

私のケースだと、Google Analytics Google Search Console をSSL化する前から導入しているので、SSL化をした後にはこれらサービスの編集・再設定する必要があるということですね。

 

まずはGoogle Analytics にログインして、一部編集から始めましょう。

 

1.Google Analyticsの歯車マークである、管理画面を開く

 

2.アカウント設定内の、”プロパティ設定”を選択

まずはプロパティ設定をしてから、ビューの設定をしていきます。

 

3.プロパティ設定内の、デフォルトのURLでhttp://からhttps://に変更・保存

下矢印ボタンを押すと、「https」を選べるようになっているので、「https」を選択して画面下の”保存する”ボタンを押す。

 

4.同じように、ビューの設定内の、ウェブサイトのURLもhttp://からhttps://に変更・保存

こちらも全く同じです。下矢印ボタンを押すと、「https」を選べるようになっているので、「https」を選択して画面下の”保存する”ボタンを押す。

 

 

続いて、Google Search Consoleにログインして再設定をしていきます!

→Google Analyticsとは違って、SSL化したサイトURLは新しく登録し直す必要があります。。。!

少し手間がかかりますが、これを乗り越えればついにクリアとなりますので頑張りましょう。。!

 

1.Google Search Consoleにログインして、サマリーの上にある下矢印ボタンを選択し、プロパティを追加”を選択

 

2.プロパティの選択で、URLプレフィックスの空欄に https://から始まるあなたのサイトURLを入力して、次に進む。

https://から始まるあなたのサイトを入力。

 

3.所有権が自動確認される (私の場合だと、HTMLタグによる)

※その他の確認方法としては、HTMLファイルをアップロードや、Google Analyticsを使用など、人によって様々です。

 

4.新しく登録したサイトプロパティを開き、インデックス内のサイトマップを選択

新しいサイトマップの追加にて、sitemap.xmlと入力後・送信

 

5.新しいサイトマップの追加にて、sitemap.xmlと入力後・送信

※私の場合だと、Wordpressプラグインの”All in One SEO Pack”内にある、XMLサイトマップを利用しています。サイトマップについて詳しく知りたい方は、この記事とは別内容なので、一度google検索されてみてくださいね。。!

 

6.送信後、サイトマップのステータスが”正常に処理されました”になればOKです!

 

7.再びGoogle Analyticsにログインして、プロパティ設定内の”Search Consoleを調整”を選択

 

8.Search Consoleの設定画面にて、http://から始まる以前のURL横の”削除”を選択

 

 

削除した後に、”Search Console に追加“のボタンを押して、SSL化したhttpsのURLを選択し保存する

http~のプロパティを削除して、https~のプロパティを追加すれば、このような確認画面が出ます。
保存時にはこのような画面が表示されるはずなので、OKボタンを。

 

無事にhttps~始まるプロパティを保存することができれば、もう一度Search Consoleの調整に進むと、https~から始まるプロパティが登録されていることがわかります。。!

一番最初に確認した時は、httpから始まっていたが、ついにhttps~から始まる新しいプロパティが登録されました。。!

 

これにて、Google Analyticsの一部編集とGoogle Search Consoleの再設定まで全て完了することができました。。!!お疲れ様でした!!

 

 

まとめ

photo by @priusshota

 

今回は、「SSL化とは? httpからhttpsにする方法を、わかりやすく簡単に解説します」として書いていきました。いかがでしたでしょうか?

 

データを暗号化する通信手段であるSSL化

→大切なデータが暗号化されてロックされることから、他人によるデータの盗聴や改ざん、なりすましを防ぐことができるということでしたね。

 

SSL化するためにやるべきことは、ご紹介してきたように正直多いです。。。只、これまでにWordpressを1から立ち上げた経験がある方であれば、早ければ2時間ほどでクリアにできる作業量となります。

 

本来であれば、Webサイトを作成する過程でもできることですが、もしブログ運営の途中でSSL化する必要が生まれたとしても、この手順を踏めば大丈夫ですよ。

特にXserverのSSL設定は無料で簡単に設定できるので、利用されてみてくださいね。

 

プリちゃん

 

スポンサーリンク

 

|| こちらの記事も読まれています ||

未経験から独学でプログラミング、WEBデザインを勉強する方法

アーティストがプログラミング学習をすることによって得られる効果

令和元年、秋の京都で個展をする運びとなりました。

HSPの特徴を理解して、より自分らしく生きていく

人気のnoteはどうやって使うの? 使い方を簡単に解説!

夜眠れなくなっているとしたら、頑張りすぎているサイン

自信がなくなったときの私なりの向き合いかた。

 

 

 

Prius Shota (プリちゃん)
ARTIST

 

東京在住のアーティスト

写真と語学が大好きな28歳。
好奇心旺盛でフレンドリーな性格。

 

『心に灯す光と色彩のパレット』

写真創作活動オリジナルテーマ。(since 2016)
淡い光と豊かな色彩で描く幻想的な作品を通して、
穏やかな気持ちや癒し、日常にアートをお届け。
吉祥寺にて初個展開催、ロンドンの展示会にも出展経験あり。
 
令和元年11/21-26まで、京都個展開催。
 
お仕事依頼に関しては、“CONTACT+ABOUT ME”から。

 

 

★プリちゃんの撮影はこちらから!

 

 

★プリちゃんのInstagram、フォローしてね!

 

 

★プリちゃんと個別で連絡とりたい方

IDは @tlg0780j で検索!

 

Loading Facebook Comments ...

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です