さくらインターネットでSSL化（https）した時にcss崩れが起きるのを防ぐ方法

常時SSLにしないとiOSのアプリ内ブラウザで開けなくなるなどのアナウンスや、googleもSEO判定にSSL化を用いるようになるなど、一般的なサイトでもSSL(https)化せねばならない時代になりそうなので、とりあえず対応することにしたのだが、さくらインターネットのレンタルサーバでは、いろいろ特殊なようで苦労した。

まず、SSL化して、https〜でURLを開いてみるとトップページ以外CSSが適応されておらず、レイアウトが崩れていた。どうもトップページ以外は、ソースコードを確認してみると、cssをhttpから読み込んでいるのが原因のよう。トップページだけはきちんとhttpsからcssを読んでいる。

これを防ぐにはwordpressのconfig.phpに以下のコードを書き込むと解決した。
// SSL対応
if( isset($_SERVER['HTTP_X_SAKURA_FORWARDED_FOR']) ) {
$_SERVER['HTTPS'] = 'on';
$_ENV['HTTPS'] = 'on';
}

書き込む場所は「/* 編集が必要なのはここまでです ! WordPress でブログをお楽しみください。 */」のすぐ上あたりでいいと思う。

これでトップページ以外もhttpsからcssもjsも読み込むようになった。

さくらインターネットのレンタルサーバでは、SSLであることを明示しないと自動的にhttp接続だと判断してしまうらしい。