ロリポップ、下位プランに変更したいとき、CSSが反映しない!それは独自SSLのせい、それと自分のせい

前回書いた、ロリポップ、下位プランに変更したいとき、CMSを利用していて403エラーが出る、WAFについての続き。

新ドメイン、新サーバーのまっさらな状態でブログを始めるならば、独自SSLを最初から付けたいなと思いますよね。
私もそう思ったんですよ~。
そうしたら上手くいかないのなんのって;;

旧サイトでは普通に見れたページが、新サイトに持っていくとスタイルシートが反映されない。
もう、何度もCSSの内容なリンク先を確認したけどダメ。
っていうか、テスト用に作ったCSSがサーバーに物理的に出きてない!
エラーも出ないし、空回りているかのようになんの手応えもない。
Movable Typeの最新バージョンを入れたんだが、のれんに腕押しというか、全然反応しているように見えるときがあるのはナゼ?
もしかして、何度も再構築しているので、これもWAFで引っかかってるのかも?
とりあえず、またWAFを無効にしてみた。

WAFの件もあったので、これは何かおかしいと「ロリポップ 独自SSL CSSが反映しない」で検索してみた。

あった!
これだよ、これ。

参照:SSL化したらサイトの表示が崩れた!?独自SSL設定後の注意点

せっかくSSL化しても、ページ内のリンクにhttp://から始まるURLが存在すると、完全に通信が暗号化されないためブラウザが安全でないと判断します。
そのためにブラウザ側で、「http://から始まるURLへのリンクをブロック」、「警告を表示」などを行うことがあります。
リンクがブロックされることによって画像やCSSが読み込めなくなり、その結果表示崩れが発生します。
解決策としてMixed Contentが発生しているかを確認し、リンクのURLを修正する必要があります。

さて、考えられるところは全部直したのに、まだ直らない。
どこかに修正もれがあるらしい。
CSSが入れ子になっていたので、何気なくリンク先をどんどん開いていったら、404エラーが出ていることに気がついた。
あれ?これって、物理的にサーバーにファイルがないだけなんじゃ?
MTのバージョンがどんどん増えているうちに、CSSの位置が変わっていたらしい。
引っ越しで、ファイルのリンク先を手動で直していたからずれたのかも。
正しい位置に該当ファイルをアップしたら、直りました。

散々悩んだのに、最後は自分のせいかよ、ガックリ。