この接続は保護されています ブログのSSL化(https~)してみた話

sponsord link
エンタメ
この記事は約10分で読めます。

前回ブログのテーマを変更した話について投稿しました。

wordpressだとテーマの変更をするだけで、AMP化SEOを強化することなど専門的な知識が必要なことが誰でも簡単に導入できるというお話でしたが、今回はサイトのSSL化についてお話したいと思います。

sponsord link
  1. そうだ!ブログをSSL化しよう
    1. サイトのSSL化をする方法
      1. エックスサーバーで無料で簡単にSSL化する
        1. 1.まずエックスサーバー(インフォパネル)にログインし、さらにサーバーパネル(サーバー管理)を開きます。
        2. 2.サーバーパネルにあるドメインの項目の中にSSL設定の項目があるのでクリック。
        3. 3.SSL化したいドメイン(自分のサイトのアドレス)を選択する。
        4. 4.独自SSL設定追加のタブを開きサイトのURLを選択(自動で選ばれていると思います)
        5. 5.しばらく待つと自動でSSL化をしてくれます。
    2. 初心者にありがち?SSL化エラーの罠
      1. 403エラーの原因はサブディレクトリに入れたままだからなのかも?
        1. 1.エックスサーバーにワードプレスをアップロードする
        2. 2.このままだとブログのURLの語尾に「/wp」が付いたまま
        3. 3.SSL化したサイトのURLには「/wp」が付いていない表記になっている
        4. 4.「/wp」が付いていないとサイトを表示することができない
        5. 5.よって403エラーになっている
          1. ひとつはワードプレスのファイルをサブディレクトリの上に移動させること。
          2. あるいは問合せでいただいた回答にあったようにエックスサーバーの「WordPress簡単移行」で「/wp」なしのURLに変更すること
          3. サブディレクトリのままで「/wp」のURLにリダイレクトさせる方法
    3. SSL化した「/wp」のURLを対処し常時SSL化する方法
      1. まずは「/wp」をなくす方向で考えてみます
      2. 仕方ないので「/wp」の付いたURLのまま常時SSL化を目指す

そうだ!ブログをSSL化しよう

人って不思議なもので、
今まで面倒くさくて放置していた
ことを重い腰を上げて動くと
あんなに面倒くさかった作業が
だんだん面白くなっていくんですよね。

掃除とか片付けとかみなさんにも覚えがあるのではないでしょうか?

今回私がSSL化しようと思った
きっかけはテーマの変更でしたが
実はその前に一度は考えたことがあったんですよね。

確かその時は2年ぐらい前で、
Googleconsoleからの提案で
メールが来ていたことを機に
調べたんだったと思います。

私はプログラミングやウェブデザインなどの知識がないので、すぐにどうすればそのSSL化とやらをすることができるのかと検索したんです。

でも検索でヒットした記事には、サイトのSSL化(https~のアドレスにするため)にはお金がかかると記載してあったのです。

ワードプレスは自分でレンタルサーバーと契約して月額1000円ぐらいのお金を払って、なおかつドメイン料といってサイトのアドレスにも月額いくらかの費用がかかります。

私の場合無料ドメインサービスの期間を利用しているのでサーバー料金のみですが、それでも年間1万円以上の運営費用が掛かっています。

詳しくは覚えていませんが、
確かその時見た記事では
SSL化するだけでさらに
年間5000円ぐらい費用が
かかるとのことだったので
その時はSSL化を断念しました。

しかし、今回改めて調べるととんでもない事実が発覚しました。

実は私が契約している
エックスサーバーではなんと!
契約しているドメインを無料で
SSL化してくれるサービスを行っていたのです!

サイトのSSL化をする方法

エックスサーバーを含め
レンタルサーバー各社無料で
SSL化のサービスを行っているそうです。

私はエックスサーバー
契約しているのでエックスサーバーでの方法を軽くお話します。

エックスサーバーで無料で簡単にSSL化する

やり方はとっても簡単かつ公式のQ&Aにて丁寧に教えてくれています。

簡潔にSSL化の流れをまとめると。

1.まずエックスサーバー(インフォパネル)にログインし、さらにサーバーパネル(サーバー管理)を開きます。
2.サーバーパネルにあるドメインの項目の中にSSL設定の項目があるのでクリック。
3.SSL化したいドメイン(自分のサイトのアドレス)を選択する。
4.独自SSL設定追加のタブを開きサイトのURLを選択(自動で選ばれていると思います)
5.しばらく待つと自動でSSL化をしてくれます。

注意点としてはそこそこ時間がかかるので1時間前後みて待つと良いと思います。

また、cloudflareなどのCDN(コンテンツデリバリネットワーク)を利用している人は、ネームサーバーCDNのものに変更していると思うので、デフォルトのネームサーバーに戻しておかないとエラーになっちゃうのでご注意ください。

コンテンツデリバリネットワーク(content delivery networkCDN)とは、ウェブコンテンツをインターネット経由で配信するために最適化されたネットワークのことである。コンテンツ配信網とも。

引用:Wikipedia

ちなみに私はcloudflareを利用していたのでエラーが出ました。

ヘルプや検索などでネームサーバーに戻さないとエラーになると知ってすぐに戻しましたが、ネームサーバーの変更は反映されるまでに少々(1時間ぐらいはかかった)時間が必要になるのでまあまあ時間がかかるつもりで挑んだ方が良いかもしれません。

それから契約したばかりのサイトサーバー移行したばかりのサイトは反映されるのに時間がかかるみたいなので、その場合も反映されるまで時間を空けてからじゃないとエラーになることがあるとのこと。

でもSSL化自体はそれほど難しくないので初心者の方でも大丈夫だと思います。

初心者にありがち?SSL化エラーの罠

先ほどネームサーバーのエラーについてお話しましたが、私は公式のヘルプにもなく「wordpress ssl化」などでGoogle検索をしてもヒットしない謎のエラーに見舞われました。

厳密にいうとエラーではないのですが、なぜか反映後に表示された自サイトのURLが403エラーで表示されない事態が起きてしまったのです。

いくら検索してもどのサイトも「SSL化は簡単」「〇クリックでできる」「無料で誰でも」などと言う言葉ばかりで、私にとって全く実りのない検索結果ばかりでした。

原因がわからなかったためエックスサーバーのサポートにお問合せもしましたが、初心者の私にとっては「え?どういうこと?」と思うような内容でよくわかりませんでした。

しかし、結果としてこのお問合せで得た回答がヒントになりエラーを解消することができたのです。

そのヒントというのが、自サイトのドメイン語尾についている「/wp」の表記です。

ワードプレスはサーバーにワードプレスのファイルをアップロードすることで始めることができるのですが、ただアップロードしただけではサイトのURL(このサイトの場合filia-blog.com)契約の際に決めた独自ドメインのファイルの中にワードプレスのファイルをアップロードしているようで、このままでも利用できるのですがURLの語尾に「/wp」が入っちゃうんです。

説明が下手くそで申し訳ないのですが、このブログを例にすると「filia-blog.com」で独自ドメインを契約しているのに「filia-blog.com/wp」がこのブログのURLになっちゃっているわけです。

専門用語でいうとサブディレクトリに入っていると言うそうですが、そんな専門用語を私は知りませんしただアップロードすれば良いとしか思っていませんでした。

403エラーの原因はサブディレクトリに入れたままだからなのかも?

わかりやすいようにまとめますと。

1.エックスサーバーにワードプレスをアップロードする
2.このままだとブログのURLの語尾に「/wp」が付いたまま
3.SSL化したサイトのURLには「/wp」が付いていない表記になっている
4.「/wp」が付いていないとサイトを表示することができない
5.よって403エラーになっている

つまり、このエラーはSSL化が原因ではなく最初からおかしかったということ。

そもそも「/wp」が付いているのが正常なURLになってしまっていたというわけです。

この事実に気が付かないと、どんなにSSL化に関するエラーの情報を検索しても全く関係ないエラーの情報しか出てきません。

もしSSL化して表示された自サイトのURLがエラーで表示できない方は、自分のサイトのURLに「/wp」が付いているか付いていないかを確認してみてください。

それと「https~」のURLに「/wp」を語尾に付けた場合に表示されるかどうか確認し、もし表示されるようならこのエラーは単にURLが違うだけということ(可能性)になります。

これをどのように対応するかはいろいろあると思いますが、

ひとつはワードプレスのファイルをサブディレクトリの上に移動させること。
あるいは問合せでいただいた回答にあったようにエックスサーバーの「WordPress簡単移行」で「/wp」なしのURLに変更すること
サブディレクトリのままで「/wp」のURLにリダイレクトさせる方法

といった対応方法があると思います。

このままでは「http~」「https~」常時SSL化することができませんので「/wp」をどうにかすることが先決ですね。

そのために必要な対処方で私が参考にした記事を紹介します。

この中で1つ目と3つ目は私が参考にしたサイト、2つ目はエックスサーバーのヘルプにありますのでそちらのリンクを載せておきますね。

SSL化した「/wp」のURLを対処し常時SSL化する方法

まずは「/wp」をなくす方向で考えてみます

実際どちらでもいいと思いますが、なんとなく「/wp」が付いているのは自分が決めたドメインと違うのでなんか嫌だなって思う人もいると思います。

その場合は自分のサイトのドメイン(このブログの場合「filia-blog.cpm」)の下、「public_html」のさらに下にある「wp」ファイルの下から「.htaccess」「index.php」を上に移動させる必要があるとのこと。

何を言ってるのかわからないかもしれませんが、私も何を言ってるのかわかりません…()

ということで詳しくはこちらの記事をご覧ください。

私もこちらのサイトさんの方法に倣ってやってみましたが、無事に「/wp」を抜いて想定していた「filia-blog.com」のURLで自分のブログを表示することが出来ました。

しかし、私は結局この方法は後で辞めることになります。

なぜなら「/wp」ありのURLから「/wp」なしのURLにリダイレクトするのと同時に、「http~」のURLから「https~」のURLにリダイレクトさせる必要があったからです。

この時点で2日ほど経っていましたし、何度も調べてわからないながらもいろいろ試してやっていたので疲れて早くやらないとサイトが二重になった状態ではマズイのでこの方法は断念しました。

仕方ないので「/wp」の付いたURLのまま常時SSL化を目指す

5年も「/wp」が付いたまま運営してきたブログですし、もうこの際付いててもいいやと思ってそのまま「https~」のURLにリダイレクトし常時SSL化をする方法を探しました。

ちなみにエックスサーバーのヘルプやグーグルなどの検索で「wordpress 常時ssl化」とか「エックスサーバー 常時ssl化」などと検索しても「/wp」が付いていない体でやり方を紹介している記事ばかりです。

正直なんにも得られずむしゃくしゃしました(^^;

この時は自分のケースと前提が違っているなんて頭にありませんし、なんでこのやり方で出来ないんだとため息しながら調べていました。

私のように「/wp」が付いたままサブディレクトリに入ったままでブログを運用している人は書いてある通りにやっても常時SSL化することができません。

「/wp」が付いているのと付いていないのとではエックスサーバーやその他サイトで紹介されているhtaccessに記述するコードじゃリダイレクトされないのです。

やっとのことで見つけた記事で「/wp」で運用している場合のhtaccessに記述するコードを紹介していてついに私も常時SSL化、「http」から「https」にリダイレクトすることができました!

その参考にした記事がこちら。

本当に助かりました( ;∀;)

ブログは誰でも簡単にできますが、ワードプレスはやはりある程度プログラミングやウェブの知識がないと素人には難しいですね。

私のようなガチの素人だと何が問題でどこが間違っていて、自分がどんな状況でどんな環境なのかきちんと把握できていないことがあると思います。

今回も「サブディレクトリ」なんて5年もやってて今まで知りませんでした。

なんで「/wp」って付いてるんだろう?と疑問に思ったことはありましたが、そういうもんだと適当に片付けてそのままにしてたのです。

今までプラグインの不具合で画面が真っ白になったのも自力でどうにか対処して、コピペしながらもcssやphpなどのコードをいじったこともありました。

それで「あ、結構自分もできるようになってるじゃん」って錯覚していたのですね。

今回はなんとかあれこれ検索ワードを変えつつ調べてヒットしたから良かったものの、コピペして出来たからといってなんの知識も得ずそのままにしておくのは危険ですね。

今後は単語や一文だけでも専門用語を少しは知っておかないといけないなと思った一件でした。

みなさんのエラーはどんなエラーかはわかりませんが、私もなかなか苦労して得た情報だったので自分のブログにも残しておきたいと思います。

もし、キャッシュのクリアをしてもダメ、紹介してあるコードをhtaccessに追加してもダメ、なんでエラーになっているのかもわからない、とお悩みでいらっしゃる方がいたら「/wp」の有無を確認してみると良いかもしれません。

コメント

タイトルとURLをコピーしました