さくらインターネットサーバが平成29年10月17日から無料SSL証明書「Let's Encrypt」を設定できる機能を提供開始しました。
これまで有料のものしかなかったSSLが、無料で使えるようになったのです。
「さくらのレンタルサーバ／マネージドサーバ」 無料SSL証明書「Let's Encrypt」簡単設定機能の提供開始のお知らせ
こだたま行政書士事務所で保有するウェブサイトは全て、エックスサーバーで運営しているので関係ないかと思いきや、当事務所が所属する小平商工会青年部のサイトはこのさくらインターネットで運営していました。
そこで、さっそくSSL証明書を取得し、今はやりの「https化」を行うことにしました。
目次
https化とは
https化という言い方が、正式名称かどうかは分かりませんが、当事務所ではこう呼んでいます。
一部では「SSL化」と呼ばれているようです。
ここでは本日経験した手に汗握るトラブルを主にしたいので簡単に。
https化というのはサイトやブログのURLが今までの「http://～」から「https://～」にすることであり、それにより通信のセキュリティ力をアップさせることとご認識いただければ幸いです。
下の画像のように、従来の「http://」だとブラウザに「保護されていません」と記載される一方、「https://」だと「保護された通信」となります。
特にメールフォームなどで個人情報を記載していただくことがあるサイトにとってはこういうセキュリティに気を遣うことは重要でしょう。また、httpsは今後の主流になります。対応できるのであれば、対応した方が良いですね。
下層ページの表示が崩れた
そんなわけで早速作業してみました。
当事務所では既にちょこちょこ自社サイトのhttps 化を進めているので、作業自体はお手のものです。
「ま、使っているレンタルサーバは違うけど、だいたいは同じだろ」とタカをくくっていました。
実際、https化の作業自体は簡単でした。
※簡単とは言っても不慣れな方には間違いや面倒もあるでしょうから、例えば以下のようなサイトを参考にして慎重に行ってください。
（参考サイト）
WordPressをhttpからhttpsにSSL化した全手順まとめ（エックスサーバー環境）
そして、ご満悦のご様子で「ちゃんと表示されるか見てみるかあ」と確認してみました。
お、ちゃんと表示されているな。大成功！
…と油断して下層ページのリンクをクリックした直後…
あれ？
明らかに表示が変だ。ちょうどガラケー（フューチャーフォン）サイトのようなたたずまいになってる。
他の下層ページも確認してみましたが、
やはり崩れています。
テキストや画像などの内容自体は維持されているのですが、レイアウトが崩れているのです。
もう一度トップページに戻ってみると、依然として正常に表示されています。
下層ページだけが崩れる、これは、とんでもないことになったなと直感したわけです。
解決は簡単だった？wp-config.phpにコードを追加するだけ
いろいろ試行錯誤はしてみたわけですが、太刀打ちできんなーと思っていたところ、株式会社リブリッシュの高橋社長が良い情報を持ってきてくれました。
wp-config.phpの末尾に、以下のコードを追記しろ、と。
if( isset($_SERVER['HTTP_X_SAKURA_FORWARDED_FOR']) ) {
$_SERVER['HTTPS'] = 'on';
$_ENV['HTTPS'] = 'on';
}
同じトラブルに見舞われた方は、上記のコードをコピペしてみてください。
すると…
下層ページが戻ってきた！！
あの悩みに悩んだ小一時間は何だったのか。こんな魔法のコードがあったなんて。
他の下層ページも以前のように整然と表示されています。
何事もなかったかのように。
こうして、小平商工会青年部のウェブサイトは無事にhttps（SSL）化を果たすことができたのです。
なぜ下層ページの表示が崩れたのか
これは、さくらインターネットサーバの仕様によるもののようです。
当事務所で自社サイトをhttps化したのは、エックスサーバー上のことなのでこういうことは起こりませんでしたが、さくらインターネットの仕様で今回のタイプのSSLを導入するとこのようなトラブルが発生します。
さくらインターネットの場合は、然るべきところに「これはhttps（SSL）での接続ですよ」ということが分かるようにしてあげないと、サーバが「ああ～いつものhttpね」と判断してしまい、表示をつかさどるCSSに正しく行きつかないという現象が起こるようなのです。
正しいCSSに行きつかないということは即ち正常な表示を指示できず、よって、wp-config.phpに「SSLで接続しますわ」ということを追記することで、正しいCSSに導いてあげた、というわけです。
おまけ：wp-config.phpにコードを記載する手順
一応、さくらインターネットのコントロールパネルやファイルマネージャーに不慣れな方のために、wp-config.phpにコードを追記する手順も書いておきますね。
まずはコントロールパネルの左側にある「運用に便利なツール」から「ファイルマネージャー」を探してクリック。
中に入ります。
次に、よほどごちゃごちゃ何やかんや入れていない限り、wp-config.phpというものがすぐに見つかるはずです。それを適当にダブルクリックでもすると、左側の小窓にphpファイルの一部が表示されます。
そして、鉛筆みたいなマークをクリックし、ファイルの中身の編集画面が出てきます。
下のようなものです。
これが表示されたら下手にいじらず、一番末尾に持っていき、慣れない方は何度か改行ボタンをおして間隔をあけてもいいので、とにかく最初から書いてあったものには一切触れず、末尾に先ほどの魔法のコードをコピペしましょう。
もう一度書くと、これ。この4行。最初の if から最後の } まできっちりコピペです。
if( isset($_SERVER['HTTP_X_SAKURA_FORWARDED_FOR']) ) {
$_SERVER['HTTPS'] = 'on';
$_ENV['HTTPS'] = 'on';
}
そして、保存ボタンをポチ。
これで完了です。
やっぱりエックスサーバーがいいなあ（個人的独断）
実際に作業全体を比べたから分かるんですけど、個人的にはやっぱりエックスサーバーが良いですね…。
https(SSL)化についても、こんなwp-config.phpまで編集することはなかったですし。
そもそも、これって普通にやると誰でも罠にかかってしまうのでは…。見た限りではさくらインターネットのサイトにもこのこと書いてなかった気がします。
やはりワードプレスを運用するんだったらエックスサーバがお勧め。
ますますサイトが大きくならないうちに、皆さんもエックスサーバーに乗り換えてしまっては？
