『1日でSSL化が… オワッチャッタ』 そう、Simplicity2 と エックスサーバーならね。 WordPressならサクっと httpsに

シェアしてもらえると嬉しいです!

kero-icon
こんにちは! ケロケロです。
(@kerokero_DIY)

ある朝、メールが来てたので確認してみると、グーグル先生からでした。

見てみると、私が運営している「DIYでプチカスタム(このブログ)」に関する内容です。

カンタンに言うと、「SSL化が出来てないから、10月以降にchromeでセキュリティ警告だすわー」とのこと。

これ、色んな「ブロガーさん」や「WEBサイト運営者さん」にも来てたみたいですね。

きっと、多くの方がゾッとした内容でしょう。

もしこのようなセキュリティ警告を出されると、読者さんが離れてしまう可能性がありますからね…

しかし、SSL化って言ってもカンタンに出来ることじゃないです。 だから私も二の足踏んで今に至ってました。

でも、グーグル先生にここまでズバッと言われたら、やらないわけには… いかんわなぁ。

というわけで、やってみたんですけど…

1日で終わった…

すっげぇカンタンでした。  私の環境はWordPress で、テーマが Simplicity2 、サーバーがエックスサーバーなんですけど、この組み合わせなら余程のトラブルにならない限り、1日で終わります。

はい、というわけで今回の内容は、私のブログがSSL化するまでを、まとめてみましたよ。

それでは本編スタート!

スポンサーリンク

そもそもSSL化って、なんぞや?

んなもん知ってるわ! という方は、こちらから読み飛ばしてください

私もよく知らないので、ザックリとイメージでお伝えします。

SSLにすると何がいいって、セキュリティに強くなるんですよ。

ブログとかを見てると、上にURLが確認できますね? その左端が「https」ならSSL化されてます。 今現在の私のブログはこの「https」になってますが、以前は「http」でした。

この「http」であったために、グーグル先生からご指摘を頂いたわけですね。

じゃあなんて、httpだとダメなんだ? って話になりますよね?

ここがダメだよ、http

httpによる通信は、情報をそのまま送るんですよ。

例えば、ショッピングサイトで買い物して、住所・電話・クレジット情報などを入力しますね? これがもしhttpで通信してたら、そのまま送っちゃうんですよ。

第三者から見てもバレバレです。 危ないやん、危ないやん。

例えば、「嫁のお菓子を勝手に食べた」という情報を送るとします。

もう、この文章そのまま送ります。 嫁にバレますやん。 なんかちょっと暗号っぽくしてくれたらいいのに…って思うやん?

はい! そんな時に役立つのが「https」です!

これで安心! https

さっきの文章を例にしてみましょう。

「嫁のお菓子を勝手に食べた」

httpsだと、通信する前にコレを暗号化してくれるんです。 例えばこんな感じで。

「まよまめのままおかましまをかまっままてにまたべまたま」

なんのこっちゃ分からんでしょ? でも、情報の送り手と受け手は、この暗号を解くヒントを知ってるんです。

ヒントは、「私のことを一言で言うと?」

これをヒント通りに「ま」を抜かしてみると、

「よめのおかしをかってにたべた」

「嫁のお菓子を勝手に食べた」

と、なるわけですねって誰が間抜けだコノヤロウ

知らんがな

SSL化のメリット

セキュリティが強化されるのは、上述の通りです。

でも、私のブログって、ショッピングサイトってわけじゃないんですよね。 そこまでセキュリティが必要なのか、と。

それに暗号化するってことは、ひと手間加えるので通信が遅くなるんです。

… … と、従来は言われていました。

今は技術革新が成されたためか、通信速度は「http」「https」も変わらないそうです。

それなら「https」の方がオトクじゃん? ってことになりますよね。

グーグル先生は、全てのWEBサイトを「https化」させるように舵を切ってるみたいなんですよ。

「httpsに対応したサイトは、検索時に上位表示させるように優遇する」みたいなことも名言してます。

つまり、SSL化させれば、

  • セキュリティに強くなる(読者さんに安心してもらえる)
  • アクセスが増える(かもしれない)

ってことになりますね。

… まぁ、 … むしろSSL化してないと、10月以降はchromeで警告出されちゃいますからね…

SSL化、やぁってやるぜ!

SSL化を始めますが… 情報が無くては何もできません。 人間だもの。

というわけで、このブログのテーマで利用している「Simplicity」のホームページを参照させてもらいます。

というか、この手順通りにやれば出来ちゃいます。

Simplicityの「簡単SSL対応」機能を用いてサイトをSSL化する方法

サーバーでSSLの設定をしよう!

まずは、使用しているサーバーに、「SSLを使わせておくれ!」と設定をしないとダメです。

ちなみに、SSLを利用するためには、通常は追加料金になります。

ところがどっこい!

私が利用しているエックスサーバーは、SSLが無料で利用できるんですよ!

無料… ツマが好きな言葉だ…

知らんがな

設定もカンタンです。 まずは、サーバーパネルへログインして、[ドメイン] – [SSL設定]にアクセス。

SSL化させたいドメインを選択。

独自SSL設定を追加します。

設定をした後、反映されるまでしばらく時間がかかるので、ジョジョリオンの最新刊を読みながら待ちましょう。

しばらくして確認してみると、無事にSSLが反映されてました。

これでサーバーの設定はOK!

WordPressでアドレスの設定をしよう!

管理画面から[一般] で、アドレスを変更します。 httpの後ろに「s」をくっつけるだけなんですけど、もしミスして反映させてしまうと、後々がメンドクサソウなので、慎重に…慎重に…

これでWordpressの設定はOK!

リダイレクトの設定をしよう!

「https」にしたことでアドレスが変更されていますが、もしブックマークをして頂いてる方がいるとすれば、「http」のアドレスでアクセスすることになります。

これを、httpsにリダイレクトする設定をしておきましょう。

.htaccessへの編集が必要になりますが、エックスサーバーだと管理パネルから編集可能です。

ここから、先ほどのSimplicityのサイトを参照して、.htaccessの冒頭にコードを追記しましょう。

バックアップなどを忘れずに…

私もコピペさせてもらいました…

SSL化はOK! しかし、本番はこれからだったりする…

ここまでくれば、サイトもhttpsでアクセスできます。

お疲れ様でしたー。

ってまだ終わりじゃないのだよ。

例えるならば、

バラモスを倒してアリアハンに帰ったら「我が名はゾーマ」とか言われちゃった感じ?

ドラクエ知らないと分かりにくい

今の状態は、「httpsが使えるようになった」だけなんですよ。

記事の中で使ってる内部リンクとか、画像の読み込みとか、確認してごらんなさいな。

あれ、全部httpでしょ?

httpが混じってると、こんなことを言われます。(ブラウザはfirefox)

そう、httpを全部httpsに変えなきゃならんのですよ。 そう、全部!

これが大変だろうな… と思って中々SSL化が出来んかったんです。

でも… しんぱ〜い、ないさ〜!

WordPress のテーマが Simplicity2 なら、あっという間に終わります。  ホントだよ。

「簡易SSL対応」機能で一括変換

プラグインで変換することも出来るみたいですが、データベースの中を書き換えるみたいでちょっとコワイ…

でも、Simplicityの機能を使えば、ページが表示される前にhttphttpsに置換してくれるんです。

そして、何がいいって、設定がめちゃめちゃカンタン!

WordPress の管理画面から、[外観] – [カスタマイズ] – [その他] にアクセス。

後は、「内部URLをSSL対応(簡易版) 」をチェック!

これだけ!

ちなみに、最初に確認した時にこの項目が無かったのですが、バージョンが2.4でした。 最新の2.6にすれば、この設定ができます

ちょっとトラブル発生

トラブル1. Simplicity が考慮できない画像

設定後、ワクワクしてブログを確認してみると… … … あれ、変わってないな。

これ、確認してみると、ブログランキングへの画像リンクが「http」だからでした。

これはさすがにSimplicityも考慮できないよね… ということで画像を外してみると…

Yeeeeeeeeeah!!! ジャスティス!

緑の鍵アイコンになりました。これは完全にSSL化できたよ、ってことです。

記事内のhttpリンクには一切触っておりません。 これをSimplicityが全部変換してくれたんです。

… すごくね?

全部のページは確認できてないですが、見るページ見るページ、全て対応できてます。

… すごくね?

トラブル2 モバイルヘッダーが引っかかる

はぁ、めでたしめでたし。

と思って、スマホでも確認してみたら…

「安全ではありません」のメッセージが… あわわ。

でも、PCではOKなのに、なぜスマホはダメなの?

トップページを含めて、全てのページでエラーが出てる…

スマホレイアウトの画像が影響してる?

これは、もしかして、スマホのヘッダー画像?

はい、これがビンゴ!

確認してみると、スマホのヘッダー画像がhttpのままでした。 登録し直しましょう。

WordPress の管理画面より、[外観] – [カスタマイズ] – [ヘッダー] – [モバイルヘッダー背景画像]

同じ画像を登録し直すだけで大丈夫。 httpsとして登録されます。

これでスマホもSSLに対応!

今回のまとめ

はい。一日で終わりました。 いや、正確には半日ですね。

小さなトラブルはありましたが、ホントにサクッと終わっちゃったよ。

では、今回のまとめをカンタンに。

SSL化、やぁぁってやるぜ!

とりあえず、10月までにSSL化してないとグーグル先生に「めっ!」って言われちゃうので、無事に終わって良かったです。

とりあえず現状はSimplicityに助けてもらうとして、過去記事はリライトするタイミングで修正していけば良いかな。

ブログがWordPressで、テーマがSimplicity2、サーバーがエックスサーバーなら、サクッとSSLにできるので、ぜひやってみましょう!

いや、ホント、こんなことなら早めにしときゃ良かった…

おしまい。