ブログをSSL化対応しました

やっとここのブログのSSL化対応いたしました。
いやー、大変だった。めんどくさかった。

でもね、今後やる作業を考えるとSSL化は避けて通れないわけでありましてー

だが、どこをどう読んだのか分からんが、手順を大いに間違えるorz
というか、参照したブログの4番目の「WordPressの設定からURLを変更する」が
なぜか自分の頭からすっぽり抜ける。。。
.htaccess設定後に気が付いて、あーやらなきゃなーっと思ったところで、なぜかXサーバがダウンしたよ!
いや、.htaccess設定後の30分ぐらいは動いてたからね!
きっとうちのせいじゃない。。。(と思いたいzzz




いくらか経ったあとにXサーバ復旧したので、
一旦、.htaccessをもとに戻して、
→ 4番目の「WordPressの設定からURLを変更する」を行い、
→ 再度.htaccessを変更しなおす
という、処理しちゃったよ。めんどくさzzz

まず、ここブログの環境

レンタルサーバ:Xサーバ
ブログエンジン:WordPress
WordPress使用テーマ:cocoon
という環境でブログ運営しています。

SSL化手順まとめの参考記事紹介

さてと、本題。
まず、↓のブログ記事を参考です。

WordPressをhttpからhttpsにSSL化した全手順まとめ(エックスサーバー環境)
エックスサーバーが独自SSLを無料かつ無制限で利用できるようになりました。 この、エックスサーバーの「ユーザー…

このブログの環境も、全く一緒のXサーバ上なので。
特に、ここのブログで使ってるテーマcoccon作者さんのブログ記事なので、安心。
かなり分かりやすい親切説明です。

ただ、一部補足として以下記載。

プラグインSearch Regexによるブログ本文の文字列置換

まず、5番目の「内部リンクをSearch Regexで全て置換する」については、
現在のHTML内のaタグやimgタグのリンク部分のURLを、
Search Regexで”http://”から”//”に変更します。

“//”なら、元のページが”http://”なのか”https://”なのかを考慮しなくても良さげ。
ですが、”https://”のページは無理やり”//”に変更する必要はありません。

ということで↓のように、
「Serch pattern」には”http://”を、「Replace pattern」には”//”を入れて、
置換処理することで、自分のブログの内部リンク以外も対応することが可能となります。

この置換方法なら、下述のブログ記事内に手動で入れたAdSenseのURLコードにも対応できて、オススメ。

SSL化したあとのGoogle各種ツール設定変更方法

8番目「SSLエラーのチェック方法」と、9番目「テーマなどの設定を見直す」は
長くなりそうなので一旦放置して、10番目「その他サービス・ツールの設定の変更など」へ。

Google Analytics

については、
ほとんど、ブログ記事の説明のままで、簡単に設定変更できました。

Google Search Console

については、
また、色々フロントエンドの操作が変わっていて、つらい。。。ので、ここで説明。

1.まず、Google Search Consoleにログインします。

2.↓の左上の赤枠をクリック。

3.↓の「プロパティを追加」をクリック。

4.↓のウィンドウが表示されるので、ドメイン側にサイトのURLを入力します。
このとき、”https://”や最後の”/”は入力しないでください。
入力できたら、「続行」をクリック。

5.↓この画面がでたら、2の「コピー」ボタンをクリックします。
(すでにここのサイトを追加済みのため、別サイト情報でサンプル画面を表示させています)

6.あとは、↓を参照して、DNS設定のTXTレコードを追加します。(by Xサーバ設定用)

ドメインプロパティ登録確認用 エックスサーバー DNSレコード 設定方法 - ブロギングライフ
Search Console ドメインプロパティの登録確認は、DNSレコードを使用します。エックスサーバーのDNSでのドメインプロパティ所有権確認用の設定方法、手順を紹介します。ドメインプロパティを登録すると、登録したドメインのプロトコル(httpsとhttp)やサブドメインを含めて一括してデータを見ることができます。...

DNS設定を変更するので、最大1時間ぐらいは変更に時間がかかります。
5の画面表示の右下にある「確認」ボタンでDNS設定が終わったかどうかを確認します。

7.「確認」ボタンをクリックしてDNS設定が終わっていれば↓の画面が表示されます。

ここの「開始」ボタンをクリックして、設定は完了です。

8.あとは、以前のhttp://側を消すだけです。
↓のように、左上からhttp://のを選択し、「設定」に入って、「プロパティを削除」をクリックします。

9.↓の表示がでたら、「プロパティを削除」をタップします。

これで、以前の設定を削除できました。

Google AdSense

については、
特に設定変更することはないんですが、ブログに貼った広告コードを修正する可能性があります。
↓のブログ記事のように、コード内にあるURL部分の”http://”で始まるURLを”//”に変更することで、解決します。
ただし、最近の広告コードのURL部分は”//”から始まっているようなので、その場合は修正しなくてOKです。

SSL変換したhttpsブログはアドセンスコードも変更が必要?広告の設定方法を解説 | MIHAYA OFFICIAL BLOG

各記事に手動でブログ記事に貼っている場合は、そちらも全部確認&修正が必要になります。
特にWordPressのウィジェット等に貼った広告コードは、忘れがちなので必ず確認しましょう。

URLアドレス確認

ここで戻って、8番目「SSLエラーのチェック方法」と、9番目「テーマなどの設定を見直す」を。

まず、ChromeでF12のConsoleから”Mixed Content”から始まるエラーを探して、
しらみつぶしで各コードを修正する必要があります。
基本は、ブログ記事にあるaタグやimgタグのURL部分を修正すればいいのわけです。

すでに上記でも書いた通り、5番目の「内部リンクをSearch Regexで全て置換する」で
ブログ記事部分のHTMLを”http://”を”//”に変更してあります。
が、どうも、各ブログ記事を編集モードにすると”//”になっていない。。。
でも、そこの部分は”Mixed Content”のエラーは出ないという不思議。
これは、特に問題なさそうなので後々本文見直し時に修正するとして。
  

テーマcocoonのAMP設定のno-amp-logo.png

問題は、ブログ本体にいる”no-amp-logo.png”。
ブログTOP表示でもブログ記事を開いてもエラーがでるのです。
これはテーマcocoonの内部にいるpng画像のようで、解決には↓が参考となりました。
https://wp-cocoon.com/community/cocoon-theme/ssl%E5%8C%96%E3%81%99%E3%82%8B%E3%81%A8%E4%B8%8D%E5%85%B7%E5%90%88/
  

アイキャッチ画像を設定してないブログ記事

このほかに、
あと、うちのブログでは、アイキャッチ画像を設定していないブログ記事が残ってまして、
そういう記事は設定された画像(ファビコン画像)を使用するようにしていて、
SSL化設定後にその設定をhttps://で始まるリンク(こぎん画像)に変更したのですが、
以前のhttp://で始まる画像(ファビコン画像)が残ってるというエラーが出るzzz
それもアイキャッチ画像なのに、ブログ記事を開いたときにそのエラーが発生。

最初、なんでファビコンのアイコンが?と思いましたが、
ファビコンのアイコンをアイキャッチ画像設定してたのをやっと思い出しました。
SQLのどこかに情報が残ってしまってるんでしょうねzzz

これはもう、アイキャッチ画像設定してないブログ記事1つ1つ全てに
アイキャッチ画像を設定すれば解決するので、これもおいおいと。

なので、SSL化前に、WordPressで使用してるテーマなどで
(cocoonでは)「NO IMAGE設定(アイキャッチの存在しない投稿のサムネイル画像設定)」を設定してる際には、
同様なエラーで悩む可能性がありますので、注意が必要です。

この現象が出ている場合は、ブログ記事だけでなく固定ページでも同様ですので、
固定ページもすべてアイキャッチ画像を設定することでエラーが解決します。

総括

とりあえず、うちのブログは比較的対応が楽だったような気がします。
ただ、時間はかかることが多いので、土曜日&日曜日の両方の予定を潰すぐらいの勢いでやらないと厳しいです。

あと、SSL化するとAdSenseの収益が少なくなるとか言われてますが、
まだAdSenseがスズメの涙状態なので、変わっても問題なしzzz

SSL化は、自分のサイト内のリンク先URL表記も考慮しなきゃいけない。
っというのが、多少のネックになるんでしょうね。
ブログ記事が増えることによって、対応する量が増えますので。
これは、力業だけでなく、多少の技術力も必要になります。
なので、これからブログを持つ方は、ぜひとも最初からのSSL化対応をお勧めします。
  
  
※この記事の一番上の画像は、写真素材ぱくたそ(www.pakutaso.com)からお借りしています。

この記事が参考になった場合は、下の「Like!」アイコンをクリックしてください~

コメント