XSERVER上のサイトをSSL化(https)したときの覚え書きとか雑感とか～後半・SSL化作業

Xサーバー上のサイトをSSL化したときの作業の覚え書きです。

SSLを導入しようと決めたときに考えたことは前半で。

Xサーバー上（コトコトねっと）には、
・HTML＋CSSのサイト
・HTML＋CSS＋javaScript(jQuery)のサイト
・PHPのサイト
・WordPressブログ
があり、サイトもページ数も少なく、大部分のリンクは相対パスで記載してあり、アフィリエイトリンクもほぼないので、そんなに書き替えと確認作業は多くないだろうと思いつつ、SSL化作業を開始！

＊

1　サーバパネルでSSL設定を追加

2　サーバパネルでWebサイトの常時SSL化
（.htaccess編集しhttp://〜からhttps://〜のURLへ転送する）

3　WordPressのURLをhttpsに変更設定する

4　WordPressブログをFirefoxでチェックしつつエラーが出る箇所を修正
　4-1　サイドバーのウィジェットのアフィリエイトリンクを差し替え
　4-2　ファビコン画像のURLを修正（テーマの編集　header.php）
　4-3　WordPress内でWEBフォントが効かなくなっている部分を修正（style.css）
　4-4　各記事をチェックしてアフィリエイトリンクを差し替え

5　javaScriptが動かなくなっている部分を修正

6　Google Analytics の変更（http→httpsの変更）
7　Google Search Console の追加登録

こんなかんじの順番で進めていきました。
後日、この変更も必要だったーって抜けに気づくかもしれないので、作業済チェックリスト的に置いておきます。

＊

1　サーバパネルでSSL設定を追加

XサーバーでのSSL設定は、手順を見ながらサーバパネルで簡単にできました。

◆ 無料独自SSL設定

2　サーバパネルでWebサイトの常時SSL化
（.htaccess編集しhttp://〜からhttps://〜のURLへ転送する）

今まで通りhttpのURLでアクセスして来た場合も、httpsのサイトに跳ばすように設定。
ソースをコピーして.htaccessに追加するだけ。

◆Webサイトの常時SSL化

3　WordPressのURLをhttpsに変更設定する

管理画面から設定＞一般で、WordPress アドレス(URL)、「サイトアドレス(URL)」をhttp://からhttps://に変更するだけ。

ここまで一気にやってしまったのですが、サーバ設定が反映されるまで、安全な接続ではありませんと出てサイトが表示されなかったり、404エラーやら403エラーやら出ました。30分ほど待っていたら、無事にhttps始まりでのサイトが表示されるようになりました。

4　WordPressブログをFirefoxチェックしつつエラーが出る箇所を修正

Search Regex というプラグインで、http://aaa.net → https://aaa.netと一括置換する方が多いようなのですが、今回はどんなところに混在エラーが出ているのか知りたかったので、一括置換はひとまずしないことにしました。

Firefoxで見ると、SSL化して保護された通信ができているページはアドレスバーで緑の鍵マークが付くのですが、

httpとhttpsの混在などで安全な通信ができていない場合には、鍵に！が付きます。

4-1　サイドバーのウィジェットのアフィリエイトリンクを新しく作って差し替え
4-2　ファビコン画像のURLを修正 テーマの編集から（header.php内）

全ページ共通で表示されるウィジェットのアフィリエイトリンクを張り替えて、ファビコンのURLをプロトコルを指定しないパス（//で始まる絶対パス）に書き替えたところ、だいたいのページで緑の鍵マークが付くようになりました。現時点では、画像の内部リンクはhttpのままでもエラーにならないし、記事中の他のhttpサイトへのリンクも、httpのはてなブックマークボタンでも混在エラーは出ないようです。

4-3　WordPress内でWEBフォントが効かなくなっている部分を修正 テーマの編集から（style.css内）

Webフォントが表示されなくなっていたので、style.css内のWebフォントを呼び出している箇所のURLをプロトコルを指定しないパス（//で始まる絶対パス）に書き替えて反映。SafariとFirefoxではOK。Chromeでは効いたり効かなかったりするけど、別のフォントで表示されて読めるので、キニシナイ。

4-4　各記事をチェックしてアフィリエイトリンクを差し替え

ばっちり鍵に！マークが出たのが、画像つきのアフィリエイトリンク。全部探して新しく作ったリンクに差し替えました。このブログ内にはそんなに数は無かったけど、それでもめんどくさい。

WordPressブログのチェックと修正が終わったら、次はHTMLやPHPで書いたサイトの方のチェックと修正。内部リンクはもとから相対リンクで書いているものがほとんどなので、修正はほぼなし。ですが、javaScriptが動作していない箇所がちょこちょこありました。

5　javaScriptが動かなくなっている部分を修正

jQueryのライブラリを外部から呼び出している箇所のURLをhttp://〜から//〜に書き換えると動くようになりました。

◆https(SSL)通信の環境下でjavascriptが動かなくなる場合の原因と解決方法

後は、アナリティクスとサーチコンソールの設定をして終了。疲れたので省略。

6　Google Analytics の変更（http→httpsの変更）
7　Google Search Console のhttpsサイトの追加登録

ふー、お疲れさま。久々にjQueryやらPHPやら、勉強になりました。Xサーバー上のサイトのSSL化はこれで一旦終了。後日、通信で警告が出るようになったらやり残しを潰していくことにします。

＊

さくらサーバ上のサイトの方は、レンタルサーバに付属しているさくらのブログが大部分を占めるため、ブログサービスの方で全体をSSL化してくれないと手が出せないんですよね。2017年3月のブログ管理画面のSSL化に続いて、記事表示の方でも進めてくれるといいなぁと期待して待っているところです。yahooブログとアメブロはもうhttpsになってるんですよね。

いざSSL化をするとなると、各記事内にあるアフィリエイトリンクの張り替え（一つ一つ手作業）が多量で気が重くはあります。内部リンクの差し替えも元から相対パスで書いておけば修正しなくて済んだけど、若かりしころの自分がしたことだから、仕方ないですよねぇ。

その時が来たら、やらなきゃね。