SSL化

【2019年1月】ブログ初心者のSSL化(https化)のススメ

片足でのけぞって顎をそらせ赤いシャツを頭の上で両手ではためかせる女性

今日はSSL化を行っていました!

 

もう発狂寸前でした(疲)

が、無事にできましたああああああああぁぁぁ(喜)

httpsの緑の鍵

はい、私ができるならみなさんもできますよ~

シロネ
シロネ
誰あてにゃ
アカネ
アカネ
細かいことはいいから~♪

どうするん?どうするん?

は~頭がパンパンで説明するのも大変だよぉ~(逃亡)

SSL化ってなんですか?必要なの?

結論からいうと必要です。と私は思います。

まず私も最初SSL化という言葉すら知らなかったんですが

  1. 『「http」を「https」(これがSSL化)に変更した方がいいですよ』ってあちこちで目にしたのが一点
  2. 先輩方のブログをみにいくと「https~」が多くて、「あれ、みんなしてない?みんなしてるってことは必要なんじゃない?」と気配で察知したのが一点
  3. 説明読んでいってたらなんかブログ守ってくれるらしいんて!Google検索順位も優先してくれるぽいよ!!

っていう流れからすることにしました(単純)

特に③の理由が決めてでした☆

情報が守られるって、使う側にしても、見る側からしても安心☆ですもんね

SSL証明書とかよくわからないけど、手続きは簡単にできるの?

私が使ってる「Xサーバー」はこんなところでも優秀でした

簡単に言うとその証明書とかいうのが自動で更新される設定になってるので特になにかしなくていいのです!

更新に不具合があったときになにかしたらいいだけ~ってなってます。

特に料金もいらなかったし♪

まずドメインをSSL化

  1. まずはXサーバーの「サーバーパネル」にログイン
  2. ログインしたページにある「ドメイン」の欄にある「SSL設定」をクリック
  3. SSLにしたいサイトを「選択」
  4. 「独自SSL設定の追加」をクリックして、下の方に「すでに独自SSLが設定されています。」と表示されていたら、okな状態です☆(ちょっと私ここの記憶曖昧なんですけど、いろんな方のブログみると最近のXサーバーの画面の表示ちょっと変わっていますね。手間が省かれてる気がします)
  5. SSL設定が反映されるまでに時間がかかるようなことを書いてあるサイトが多いんですが、私の時はその時間なかったです!(すぐ反映されてました)
  6. 一応、「SSL設定の一覧」をクリックして、「SSL用アドレス」に表示されているアドレスが、「https~」になっているか確認をとると安心ですよ☆

詳しくはどなたかの画像が貼ってあるサイトでも参考にされてください!!

 

WordPress側のURLも変更がいる

  1. 「wordpress管理画面」の下の方にある「設定」から「一般」を開きます
  2. 【WordPress アドレス (URL)】と【サイトアドレス (URL)】のURLが「http」のままなので「https」に書き換えるだけです☆

下の「変更を保存」ボタンを忘れなく押しましょう♪

 

「.htaccess編集」を行う

これは「http(SSL化前)」のURLにアクセスしても「https(SSL化)」のURLに転送されるようにするために行う作業です☆

アカネ
アカネ
この作業超苦戦したぁ!

「.htaccess」を触るにあたって、バックアップをとるかどうかは自己責任でお願いします。

 

ちなみに私はバックアップ作業はすっ飛ばして直で行きました。(早く終わらせたかった)
Xサーバーはサーバーにバックアップ機能がついているという噂も耳にしましたし(詳しくは調べていません)

  1. また最初の「Xサーバー」の方にログイン
  2. 「ホームページ」の欄の「.htaccess編集」をクリック
  3. SSL化したサイト(https~になったやつ)を選択
  4. ここで「上級者向けの~」と警告が出ますがスルー
  5. 「.htaccess編集」の方をクリック
  6. 貼り付けるもの↓ これを一番上に入れます

    <IfModule mod_rewrite.c>RewriteCond %{HTTPS} offRewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R,L]</IfModule>

  7. この辺はヒトデさんのブログを参考にされた方が確実かと・・・
  8. 私が一番悩んだのはSetEnvIf Request_URI “.*” Ngx_Cache_NoCacheMode=off
    SetEnvIf Request_URI “.*” Ngx_Cache_StaticModeの2行が一番上に入ってたことかな
    これは「ナオトのブログ」さんを参考にしました

上の2行が予定外に記入されていてすごく悩んだ

ちなみに、↑の2行は、一番下に「1行開けて」貼り付けました

  1. 「.htaccessを編集する(確定)」ボタンを押して編集完了♪
  2. ためしに「http~」で自分のブログを検索して、「https~」で表示されていればokです。

 

鍵マークが表示されない

ここまでしても、まだ鍵マークが表示されていないと思うんですが

この原因の正体は「内部リンク」や「画像リンク」等が「http」のままになっているせいらしいので、これをやっつけます☆

プラグインの「Search Regex」を入れると即解決します。

これは

を参考にすると楽かと思います。

 

それでも鍵マークが現れない場合

  1. 私は「Chrome」でネット閲覧するので、自分のブログを「Chrome」で開きます。
  2. 「F12」を押すとなにやら画面が出てくるんですけど[Console]をクリックすると問題あるところを提示してくれるんですよ!!
  3. そこで「http」になっているところをあげてくれるので、それをクリックすると、自分の場合はプロフィール画像が「http」になったままでした。
  4. 画像をブログから削除して、またup
  5. もう一度[Console]
  6. なんかまた表示される・・・こっから先はしばらくよくわからない表示がでて(なにしろ全部英語だし)
    解決策がわからなくて何これ~どうすんの~とウロウロしてたんですが
    ふと鍵マークついてるんやけどこれってなんやろ

鍵マークについて検索しました

ずっと緑の鍵マーク「保護された通信」が表示されるとばっかり思ってたら、

鍵マークでてたらSSL化完成!保護されていたようです!!!!

シロネ
シロネ
鍵は緑と思い込んでたのが間違いだったにゃ

わからなくて他サイトみてまわってたときに気づきました。

SSL化について教えてくれている先輩達のサイト・・・

鍵マーク緑じゃないじゃん!!!笑

httpsの緑の鍵

試しにURL欄の鍵マーク自体をクリックしてみたら、とっくに保護されていた。↑のような表示がでます。

おそらく画像を削除してupし直した辺りでSSL化完了していたと思われます。

鍵マーク黒かった・・・・

 

終わる前にもう一つ、サーチコンソールとアナリティクスへの変更作業

これをやっておかないとあかーん!

もうだいぶヘロヘロですよ・・

これについては

を参考にしました☆

アカネ
アカネ

③Googleアナリティクスの設定

 ④Search Consoleの設定

  ④-①.httpsのサイトを新たに登録させる

  ④-②.Googleアナリティクスと連係しなおす

 

の辺りにわかりやすく書いてあっておススメです☆

 

サーチコンソールについては前回の記事では入れてなかったんですが、

いろいろ必要性を見直して入れました!

サーチコンソールにサイトマップ登録するとSEO効果(検索順位対策)あり!

私はこれが狙いでサーチコンソールを入れることになりました。

そうなるとアナリティクスとの連携が必要だったんですね。

上でリンクあげた方のブログだと私でも成功できるくらい丁寧に解説してくださっていたので、参考にされるとスムーズと思います☆

ロボットを巡回させるために「サイトマップ」を送信したりですね、してみると楽しいです。

ちなみにサーチコンソールで「新しいサイトマップの追加」とあるんですが、「サイトマップのURLを入力」のところは、「sitemap.xml」を打ち込むといけます!

私はこれ何を打ち込むか忘れていてまた苦戦してました笑

ステータスに「成功しました」って緑文字で表示されていたら完了です♪

ところでアドセンス広告についての変更はいるの?

2018年12月の末にコード取得して貼り付けましたが、昔は変更が必要だったみたいですが、最近新しく取得して貼り付けた人は特になにもしなくて大丈夫みたいです。

あ~タイミングよかった~!!!

 

さぁ終ろう

おつかれさまでした。

SSL化は早めにした方がいいそうですが、ブログし始めて何かとやることが多い中で、どれを優先してすればいいかに行きつくのもなかなかやっとですよね

私ももっと早い段階で「https~」にした方がいいっていうのはGoogleさんから通知もきていたと思いますし、知ってはいたんですが億劫でほったらかしていました(爆笑)

とりあえず、Googleアドセンスを通過するのには今のところ「http」のままでもいけますんで、そっちを優先していたのもありました♪

私が苦戦したところがどなたかの解決策になれたらと思います☆

ではまた~♪