SimplicityのURLを「http」から「https」にする(Xserver)

最近、chromeが変わりましたよね。

どこが変わったかというと、そうです、URLバーです。

今まで「https」から始まるURLには鍵マークがついているだけだったのに、最近、表示が変わったんですよね。

なんと、「https」から始まるサイトには緑の文字鍵マーク、そして「保護された通信」という日本語が追加されたのです!!

「http」から始まるサイトにはURLの頭にびっくりマークが付く始末・・・

とうとうgoogleが本格的に「https」の推奨を始めましたね。

いままでも、早く「https」にしてねー保護された通信にしてねーと言ってましたが、今回ばかりは本気の模様です。

このままではSEO的に割とダメージ受けるかも・・・

と思った私は決意したのです。

サイトのhttps化もとい、SSL化を・・・!

でも、お金かかるしなぁ・・・

さて、そう決意したはいいものの、ここで問題が。

そう、SSL化にはお金がかかるのです。

どうしようかなーと思いながら、SSL化のやり方を調べていると、朗報が・・・!!!

なんと、Xserverは無料でSSL使えるんだそうな!!

うおお・・・

神か・・・

Xserver使っててよかったです。

そんなわけで、意気揚々とSSL化を始めたのでした!

やり方と流れ

SSL化の流れはこんなところです。

  1. Xserverの管理画面で、SSLの申請をする
  2. SimplicityでURLを変える
  3. 「Search Regex」を使って、サイト内リンクを書き換える

超簡単なので、すぐにできるかと思います。

さて、それでは早速、やっていきましょう!

1.Xserverの管理画面で、SSLの申請をする

これは余裕です。

なぜならXserverのHPにやり方が書いてあるからです!!

そのやり方はこちらから→https://www.xserver.ne.jp/manual/man_server_ssl.php

ポイントは、ちょっと時間がかかるので、気長に待っていることでしょうか。

自分の場合は1時間もかからず、30分弱くらいで終わった気がします。

なので、30分くらいしたら、一度ページを見に行ってみるのもいいかもしれませんねー

2.SimplicityでURLを変える

さて、SSL化が完了したらきちんとできているかをチェックするために、一度「https」にしてアクセスしてみましょう。

うまくできていいればきちんとアクセスできるはずです。

アクセス出来たら、SimplicityのURLを変えていきましょう。

管理画面から設定 → 一般 の画面に移動して

  • WordPress アドレス (URL)
  • サイトアドレス (URL)

のURLを「http」から「https」に変えます。

これで、サイトの基本設定が「https」に変更になったので、次から新しくページを作るとき、画像を挙げるとき、全てのURLが「https」のものになります。

また、ここのURLを「https」に変えると、アイキャッチ画像のURLがすべて「https」に置き換わります!

この段階で、「http」から「https」に置き換わっていないのは、自分で記載したページ内リンクと、ページ内画像のリンクです。

なので、最後に、この二つのURLを変更したいと思います。

3.「Search Regex」を使って、サイト内リンクを書き換える

プラグインである「Search Regex」を使って、残りの「http」のリンクを書き換えていきましょう!

このツールは正規表現を使って、差分を検索、置き換えることのできるツールになってます。

使い方は、プラグイン→新規追加で「Search Regex」を検索してインストールします。

インストールが終わったら、ツールから「Search Regex」を選択します。

そうするとこんな画面になるので、

「Search pattern」に自分のHPのURL

「Replace pattern」にhttpsにした自分のHPのURL

を入力します。

こんな感じですね。

こんな感じで入力したら、「Search」ボタンを押して「http」のURLを検索します。

検索結果におかしなものがなかったら、「Replace」ボタンを押して「http」を「https」に置き換えます。

これで、自分のサイトの画像とサイト内リンクのすべてが「https」に置き換わりました!!

よーし、チェックしてみようと、ページを表示したのですが、ここで悲劇が・・・

なぜか保護された通信にならない

そうなんです。

これですべてのURLが置き換わったはずなんですが、保護された通信にならなかったのです。

きちんと「https」と表示されてるのになー、なんでかなーと思い、色々調べていたところ、なんとエラーを調べる方法がありました。

それは、検証ツールを起動して、consoleを見ればいいということでした!

chromeはF12キーを押すと起動するので、F12を押して上の方にあるconsoleを選択してください。

そうすると、黄色のびっくりマークでエラーが表示されていると思います。

私も上記のようにエラーを調べると、私の場合はヘッダー画像が原因でした・・・

URLが「http」のままになっていたようです・・・

おそらく、これはカスタマイズから設定していたので、置き換えがうまくいっていなかったのではないかと思います。

なので、一度画像を削除して、もう一度設定しなおしたら、無事に保護された通信になりました!!

いやー、これで一安心です。

もし1~3まで作業して、保護された通信にならないときは、F12キーのconsoleでエラーを確認してみてくださいね!

まとめ

まー色々と書いてきましたが、結局何が言いたかったかというと

Xserver 優秀

ってことです。

まさか無料でできるとは思ってなかったですからね、ちょっと感動しました。

ありがとう、Xserver。

なにはともあれ、これでSSL化はできたので、少しはサイトの評価も上がってくれるといいなと思ったり。

そんなにうまくいかないとは思いますが、少しでもいい方向に向いてくれたらなと思います。