ロリポップの「Let's Encrypt」で独自SSL化

投稿日:

だいぶ前回の投稿から時間が空いてしまいましたが、この度我が『ガンプラ気分(仮)』も、なにやら話題の(?)「独自SSL」という物になりました!!

今回はその常時SSL化に至るまでを備忘録として記しておこうと思います。

 

独自SSLとは

まずは簡単にさわりを。
独自SSLってのは…えっと…アレです。 「セキュリティで保護されたページです」とかそんな感じのメッセージがURLあたりについてるやつ。 緑色の錠のマークが付いてるサイトのことですね。

もはや大手のサイトには当たり前のようについてるんじゃないですかね?
ここ数年くらいで個人のサイトでもかなり見かけるようになった気がします。

この緑のマークが付いてるサイトは、URLが "http" から "https" に変わります。
こうなっていれば、通常のhttpのサイトよりもセキュリティがしっかりとした、「安全なサイト」というお墨付きが得られたようなものです。

セキュリティといっても、個人サイトの場合で取り扱う個人情報なんてせいぜいコメント欄へのメールアドレスくらいなモンで、この点での恩恵はあまり無いんじゃないかと私は思います。

が、このhttpsとなったサイトは、Google先生が優先的に検索結果に表示させると仰っておられたので、SEO的にもこの常時SSL化というのは絶対にやっておいた方が良いらしいのです。

ただ、このSSL化の作業は、サイト内の外部リンクを除く、全てのURLをhttpsへと置き換える必要があるため、サイトが大きければ大きいほど、その作業は大変になってくると聞きます。

ロリポップのLet's Encrypt

この度当サイトを独自SSL化しようと思ったきっかけがこの「Let's Encrypt (レッツ・エンクリプト)」という物にあります。

このサイトは「ロリポップ!」レンタルサーバーを利用しているのですが(安いので)、そろそろレンタルサーバーの契約が切れるという事で、毎日その催促のメールが来るようになったので、契約更新しとこうと思い、久々にユーザーページへ行ったところ、この Let's Encrypt のニュースを見かけた、という次第です。
 

…いや~、レンタルサーバー借りてからもう6ヶ月経ってしまったんですか…
理想としては、1、2ヶ月くらいでサイトを完成させてガンプラレビューを始め、6ヶ月経った頃にまだ全くアクセスが無いようだったら、サーバーの更新をせずにもうこのブログやめちゃおうかなぁー…なーんて計画だったのですが、サイトの完成すら出来ずじまいときましたよ。
さすがにこのまま辞めたらほんとに何も残せずにただお金と時間を無駄にしただけって事になってしまいますからね。 自分を信じてもう6ヶ月追加で。 6ヶ月以上で契約すると1ヶ月あたりの料金が安くなるんでね。
 

おっと!話が脱線した。
Let's Encrypt ですね。 これはえーっと…よく分からないのですが、なんか去年くらいにアメリカあたりにできた組織?かなんかで、「全てのウェブサイトをSSL化しようぜ!HAHAHA!」みたいなそんな感じです。
これにより今までより簡単にSSL化できるようになったっぽいです。 詳しくは自分で調べてください。

んで、ロリポがこのLet's Encrypt に対応したって事で、ロリポユーザーなら誰でも無料で独自SSL化できるようになった、という訳です。 7月11日のニュースなので、最近の話ですね。

 

ロリポップでSSL化

こっからが本題。 サイトのSSL化を行なっていきます。

まずはサーバー側からの設定。 独自SSLの申請ですね。

これは非常に簡単で、メニューリストの[独自SSL証明書]>[証明書お申し込み・設定]から、独自SSL化したいドメインにチェックを入れて5分待つだけ。

ここには"www"の有りと無しの2つのバージョンのドメインが表示されていましたが、私は一応両方にチェックを入れました。 調べたけど何が正しいのかよく分かりませんでした。

ロリポのSSL無料化は始まったばかりなので、まだ情報が少ないんですよね。
私がSSL化したこの1週間ほどでも、日に日に「ロリポで独自SSL」みたいな記事がバンバン上がってきました。
 

WordPressをSSL化

サーバー側の設定が終わったら、続いてはWordPressでの設定。 こちらがメインですね。

おおまかな流れを書きますと、

・ サイトアドレスの変更
・ 記事内画像URLと内部リンクの置換
・ その他画像(AFFINGER4設定による物)の置換
・ 301リダイレクトの設定
・ サーチコンソールへの再登録

こんな感じです。

なお、実際の行う作業は人によって異なります。
上記はあくまで当サイトが行なった作業です。
 

サイトアドレスの変更

では面倒くさそうな事この上無いですが、時間が経てば経つほどより面倒くさくなる、というのがこのSSL化という作業らしいので、腹括りましょうかね。

まずはサイトアドレスを http から https へ変更します。

WordPress[設定]>[一般]より、「WordPressアドレス(URL)」と、「サイトアドレス(URL)」の2ヶ所を手入力で書き換えます。

書き換えると言っても "s" を足すだけですけどね。

ただ、この s を足すという作業を延々と繰り返す事になります…。

誰にでもできる簡単な作業です!!(嘘は言ってない)
 

記事内画像URLと内部リンクの置換

お次は…おそらくこれがSSL化の最も面倒な作業ですね。

今までに投稿した記事内で使われている "http" を全て "https" に置き換えます。

記事内で使われているhttpは、内部リンクだけでなく、記事内で使われている全ての画像が含まれます。
どうです?やめたくなってきません? 私はやめたい。

しかし!我が『ガンプラ気分(仮)』はそんじょそこいらのブログとは訳が違う!
なんと!(見て分かる通り)画像がいっさい使われていないのです!!
これにより当ブログは 見づらい・文が下手・タイトル詐欺 として話題になることすらなく日々一桁のアクセス数を叩き出しているのです!!!
 

……さて、そんな面倒くさい画像URLの置き換え作業なんですが、手作業で一個一個直していく事もモチロンできるのですが、SSL化の参考サイトを見るに、『Search Regex』という一括置換プラグインを使うのが一般的のようです。

ただこのプラグインには問題があるようで、一度置換を行なうと元に戻せなくなるらしいです。

私が現時点で公開した記事は49個。 手作業でもやれない量ではありません。
失敗のリスクを考え、ここはプラグインに頼らず手作業でやることにしました。
 

投稿記事内には画像をほぼ使っていないのですが、投稿一覧画面に表示されるサムネイル画像は途中から毎回設定するようにしていました。
この「サムネイル画像」もhttpsに置き換える必要があるのだとするとちょっと手間ですね。

自サイトを表示させサムネイル画像のURLを確認してみたところ、ちゃんとhttpsになっていました。
WordPressからサイトアドレスを変更した際に自動で置き換わったのでしょうか?

何にせよこれで私がする作業は投稿記事内に内部リンクを張った物と画像を貼り付けた物だけになりました。
 

たかが50個程度の記事数とはいえ、一つ一つ見て確認していくのはちょっと面倒。 なにより自分の過去記事とか正直読みたくない(-_-;)

なので投稿一覧から検索かけてみることにしました。
投稿一覧の右上にある「投稿を検索」と書かれた検索バーですね。 初めて使う機能です。

ここに「http」と入れて検索かけてみました。
するとヒットしたのはピッタシ20件。
どうやら実際に手を加えるのはこの20件だけで良いらしい。

いやー、記事に画像を使っていなかったことでこんなメリットがあるとは!
これからも画像は使わずに文字だけのクソ読みにくい記事を書いていこうと思います! …やっぱダメかな?
 

さて、それではいよいよ作業開始となるわけですが、まー地味~な作業ですよね。
内部リンク見っけては s を足し。 画像を見っけては s を足し。

画像の置き換えについてなんですが、最初は「カスタムリンク」の部分に s を足してみたんですけど、これだとリンク先の画像のURLはhttpsになるんですが、貼られている画像そのものはhttpのままだったんですよね。

そこで他の参考サイトにも書かれているやり方で、画像を削除→再挿入というやり方にしてみたところ、ちゃんと置き換えが成功していました。

このやり方でもまぁいいんでしょうが、私にはこれでもちょっと手間に感じたんですよね。
そこで他の方法も探してみたんですが、画像の詳細画面から、「置換」というボタンを押して、再び同じ画像を設定してもhttps化されてました!
こちらのやり方の方が早いし簡単だったので、私はこちらでやっていくことにしました。
 

それと画像の置き換えについてもう一点。 埋め込み式の画像についてです。

埋め込み式という名称で良いのかは分かりませんが、設定時にリンク先を設定しなかった場合の画像ですね。 クリックできないやつ。

この埋め込み式画像に関しては、なぜか最初からhttpsになっていました。
もしかしたらリンク先がない(クリックできない)画像は、httpsへの置き換え作業は必要無いのかもしれません。
 

その他画像(AFFINGER4設定による物)の置換

さて、記事内の画像、および内部リンクの地道な置換作業が完了したら、お次はそれ以外の部分で使われている画像リンクも置き換えていきます。

ヘッダー画像・ロゴ画像・見出し画像などですね。
カスタマイザーにて設定した画像、と考えると分かりやすそうかな?
 

まずはヘッダー画像。
これは既にhttps化されてました。

先の埋め込み式画像と同じ理由かもしれません。
ウチのヘッダー画像にはホームへのリンクを切ってあるので、クリックできないリンク無し画像だったので。
 

続いてロゴ画像。
こちらはhttpのままだったので、置き換えの必要有りです。

上記の通り当サイトはヘッダー画像からはホームへ戻れない仕様となっているため、代わりにロゴ画像をクリックすることでホームへ戻れるようにしてあります。 つまりリンク先有りの画像ってことですね。

カスタマイザーからは投稿記事のように「置換」ボタンでの一発置き換えができないため、参考サイトの手順通りに、いったん画像を削除したのち、再び同じ画像を設定します。
 

最後は見出し画像。
デフォルトのまま使っている人はここに画像は使われていないはずの部分です。

私は使用しているために置き換え。
…なんですが、ここも当然クリックできない画像なので、置き換えの必要無いんじゃないかと思っていましたが、ここはhttpのままでした。

うーん? どういうことかと思い、サイトを表示させ確認してみると、この見出し画像は、少し違う形式での埋め込み画像となっていました。

なんて言えばいいんでしょうねぇ? 「右クリックで保存できない画像」って言えば伝わるかな?
ともかく、ここは違うってことで(^^;

 

画像に関してはこれにて完了。
残るはちょちょっとした「カスタムリンク」――自分でURLを指定したやつですね、そこを手入力で s を足していきます。

これにはプラグインでの一括置換の対応外となっているため、おそらく全ての人が自分の手で行なう作業なんじゃないでしょうか。

私もメニュー(ヘッダー・フッター部)にそれぞれ「ホーム」というリンクをカスタムリンクでURL指定していますので、ここを置き換える必要があります。
 

…が!!
どういうわけか、このサイトのURLのところに緑の錠マークがすでに付いています!
先ほどまでは「!」マークが表示されている、「一部のみSSL化されているサイト」の表示だったんですが…

おかしいなぁ、他のページに移動してみても緑錠が表示されています。
まだhttpのままの部分は確実に残っているのですが…

ま、いっか(´゚∀゚`)
これにて『ガンプラ気分(仮)』、https化完了です(`・д・´)ゞ

……とはいかんよなぁ、やっぱ。
残りの修正箇所も分かっているんで、ささっとやっちゃいましょかね。
冒頭に書きましたが、常時SSL化はサイトが大きくなるほど大変になるので、今このタイミングでやるのがベストですからね。 あと一息!
 

ほんじゃ作業に戻りまして、メニュー内カスタムリンクの置き換えから。

最初[ウィジェット]を探してたんですが、これは[メニュー]からでしたね。
この辺は未だによく間違えます。

ちゃちゃっと s を足して完成。
一応サイト表示からリンク先のURLも確認しておきましたが、大丈夫でした。
 

そして最後、まるっと忘れていた、[固定ページ]です。

参考サイトをいくつか見ながら作業していたんですが、なぜかどこも「固定ページもhttps化させよう!」みたいに言ってないんですよね。
まぁ普通のブログだと、大抵はプロフィールだとか問い合わせページみたいな使い方でしょうし、人によりけりな部分ですもんね。

私はプロフィールページに内部リンクを貼りまくっていたので、ここも忘れずhttpsに。
 

301リダイレクトの設定

さーとりあえずこれでサイト内は全てhttpsに置き換えられたはずです!

ブラウザの「デベロッパー(開発者)ツール」だとかなんとかを使えば、サイト内の細かな部分までhttpのままになってないか調べられるらしいのですが、ウチはもう緑くなってるのでもういいや。メンドくせ(゚⊿゚)・∵ペッ
 

次に行なうのは、「301リダイレクト」。
詳しくは知りませんが、リダイレクトが設定してあるページにアクセスすると、指定されたページに自動で飛ぶような仕組みの事だと思います。

AFFINGER4だとページ毎に設定できるようにもなっていたはず。
普通は使うことは無いような気もしますが…

ここで設定するのは、「httpのページ」へアクセスされた時、「httpsのページ」へ飛ばすようにするためのリダイレクト設定です。

ページ単位でやるのはあまりに非効率ですね。
なのでここは「FTP」から「.htaccess」へ直接書き込みます。
かなり重要な部分らしいので、メモ帳にでもバックアップしておくのは必須ですね。

そしてリダイレクトのためのコードを一番上に追記。
一番上じゃないと上手くいかないそうです。

記載するコードに関しては自分で調べてください。
たしかプログラムコードって著作権的なのあるんでしたよね?無断では載せられなかったはず。
むかーし学校で習ったような…?
 

httpのページにアクセスしてみてhttpsのページが表示されたらリダイレクト成功!
これで常時SSL化は完了したようなもんです。
 

サーチコンソールへの再登録

こっからは外部サイトへの再登録。
今までhttpで登録していた自サイトをhttpsで登録しなおします。

私はサチコ(Google サーチコンソール)だけなので、大した手間ではありませんね。
たぶん多くの人はGoogleアナリティクスも合わせて設定する必要があるんじゃないでしょうか。
 

プロパティを追加

まずはhttpsでの新しいサイトのドメインを追加で登録します。

すでにhttpでのドメインがwwwの有りと無しのバージョンで2つ登録されているので、そこにさらにhttpsでもwwwの有りと無しで登録しておきます。

これで1つのサイトに対し4つのバージョンが登録されたことになりますね。

優先するバージョンを設定

これは以前httpで登録した際に設定を済ませておいたのですが、参考サイトに書いてあったので再設定が必要なのかと思ったのですが、以前の設定がそのままだったので、あらためて設定しなおす必要はなさそうです。

ちなみにウチはwww無しで登録しています。
前のサチコの記事で書いたような気もする。

サイトマップを送信

続いてXMLサイトマップを送信します。
"sitemap.xml" と入力すれば完了ですね。

あとはインデックスされるのを待つだけ。
私は少し前にhttpでこの作業をやったばかりでしたが、その時は丸1日かかりましたね。

Fetch as Google

お次は[Fetch as Google]にてインデックスをリクエストしておきます。
やはり早くhttpsのサイトの方が表示されるようになってほしいですからね。

ここも前回と同じく、PC、モバイル両方を「取得」し、PCのみ「インデックス登録をリクエスト」。

サイト全体をクロールしてもらうためのリクエストは、月10回までだそうです。

httpのサイトマップを削除

これでホントのホントに最後!

以前のhttpで登録していたサイトマップを削除します。

ただし、この作業を行なうのは検索エンジンからのhttpサイトへの流入が無くなってから。

これがどのくらいの期間でhttpsへと置き換わるのか、具体的なところを答えられる人はいないでしょう。
Google先生の気分次第ですね。

一応、2週間でhttpへの流入がなくなった、と言っている方がいらっしゃいました。
一つの目安程度にはなるかと。

 

それではこれにてサチコの再設定も完了。

私はまだこの作業を終えたばかりなので、httpsのインデックスは全然されてません。

ただ、httpの方のインデックスも一旦なくなってしまったんですよね。
検索結果には今まで通り表示されてるので、問題は無いと思うのですが…

 

おわりに

はーい、お疲れ様でした~、私。

インデックスの方がとにかく気になるのですが、まぁ2週間かかったって事なんで、私もそんぐらいは待たないといけませんね。

サチコに再登録したのが7月27日なので、これを書いてる時点で6日ほど経っているわけなんですが、httpsのサイトマップがインデックスされてるのは、61件の送信に対し、わずか1件のみ。

"site:gunplakibun.com" のgoogle検索でインデックスを確認してみたところ、1記事だけリンク先が "https" になっていました。
他のページはすべて今まで通り。

httpのサイトマップのインデックス表示が、httpsと同じく1件となってしまっていたのでちょっと焦りましたが、こちらもhttpsに置き換わるまではインデックスされているようで安心しました。

お、この記事書き終わってもう一度見てみたら、このサイトのトップページがhttpsへのリンク先に変わっていました!

サチコの[サイトマップ]からは相変わらず1件の表示なんですが、[インデックスステータス]という項を見てみたところ、そっちではインデックス2件となっていました。
なんで表示数違うんだろ?

まー時間かかりそうですね、特に弱小ブログってのはなかなかクロールされないみたいですし。
 

なにはともあれ、この『ガンプラ気分(仮)』は無事SSL化に成功した!!
この事実だけで今回は充分ですね。

思わぬ寄り道をすることになってしまいましたが、その甲斐はあったと思います。

独自SSLなんて、大手サイトとかアフィリエイトサイトとか、なんかこう「最先端~」って感じのサイトにしか出来ないような印象を持っていましたが、私にもできてしまうとはなぁ~。
 

今の最先端のサイトって「AMP」とか言うんだっけ? なんかモバイルページを速く表示させるんだとかなんとか?

このAFFINGER4ならそれもクリック一つで対応できるらしいのですが、だいぶ前に軽く調べてみたところ、AMPってのは必ずしもメリットばかりって訳ではないらしいですね。

ウチではデメリットの方が多いと判断したため、当サイトのAMP化の予定はありません。
 

うっへぇ~、8000字も書いちゃったよ。

それじゃ今回はこれにて。

次回からはまた本公開に向けて、この『ガンプラ気分(仮)』から(仮)が取れるように頑張っていきますかね(´゚∀゚)=3フンス

-ウェブサイト作成

Copyright© ガンプラ気分 , 2020 All Rights Reserved.