「TiMEZ」をお読みいただきありがとうございます。”nocco“です!
「SSL化は、やった方が良い」と言われていたものの、この手の話はあまり詳しくないので放置していましたが、やっと「常時SSL化」を設定してみました。
設定方法はシンプルで非常にわかりやすかったのですが、SSL化した後の作業なども漏れがあって慌てて修正したりしていたので、一連の流れをまとめてみました!ご参考になれば幸いです。
目次
無料SSL化の条件について。
さくらインターネットのレンタルサーバーを利用していて、独自ドメインであること。新規でSSL登録するのはもちろん、有料SSLからの乗り換えも可能になっています。
作業も非常に簡単で、「さくらのレンタルサーバ」のコントロールパネルからボタンワンクリックでOK。即日発行で、かつ自動更新ととってもらくちんです。
設定方法について。
- さくらインターネットにログイン
- 「契約情報」→「契約サービスの確認」を選択
- ドメインを登録しているサーバーを選択し「サーバコントロールパネル」へ
- サーバコントロールパネル内にある「ドメイン設定」の「ドメイン/SSL設定」を選択
- ドメイン一覧からSSL化したいドメインの「SSL」の欄の「登録」を押す
- 「無料SSLの設定に進む」を押せば完了です。
流れとしては上記の通りです。
書き出すと6項目もあるように見えますが、作業的には一瞬で終わります。私の場合、この作業をした10分後くらいに「SSLサーバ証明書発行のお知らせ」というメールが来ました。
「SSLサーバ証明書がレンタルサーバにインストールされたよ。現在はhttp/httpsの両方でアクセスできるから、必要に応じてリダイレクトかけてね!」
という内容のメールが送られてきますので、これをもってSSL化のサーバコントロールパネル側での作業はおしまいです。
WordPressサイトを「www付きのドメイン」で運営している場合、レイアウトが崩れる場合があるそうです。その場合には、以下をちぇくしてみてください!
リダイレクトをかける。
「SSLサーバ証明書発行のお知らせ」のメールにも記載されていますが、こちらでもご紹介しておきます。WordPressを利用している場合、さくらインターネットが「プラグイン」を用意しているので非常に簡単でした。
WordPressの管理画面で「プライグイン」「新規追加」を選択し「さくらのレンタルサーバ 簡単SSL化プラグイン」で検索してください。
上記のプラグインをインストールすると「SAKURA RS WP SSL」という名前で一覧に表記されます。有効化して設定をしてください!
注意点としては、さくらのレンタルサーバー上で「古いPHPのバージョン」を選択している場合「重大なエラーを引き起こしたため、プラグインを有効化できませんでした。」と表示されます。
このプラグインは、「PHPバージョン5.6、7.1(2018年1月現在)」で動くそうです。サーバコントロールパネル上でPHPの設定をお願いします。
さて、WordPress上でプラグインの設定を行います。
細かい設定を行うというわけではなく「ちゃんと https:// になってる?」という確認を行い実行するだけです。
- サイトURL設定の変更(サイト内リンクのリンク先が、http://~からhttps://~に変更されます。)
- 過去の投稿のURL書き換え (SSL化前に投稿した画像ファイルなどのURLがhttps://~に変更されます。)
- サイトURLのリダイレクト (http://~でのアクセスを、https://~にリダイレクトします。)
上記の作業がこのプラグインで完了しますので、本当に便利です。ちなみに、プライグインをオフにすると上記の設定も解除されます。
さくらインターネットは、かなり細かく解説してくれているので本当にわかりやすい。何かあったら、以下をチェックしてみてください。
SSL化後にチェックしたこと・起こったこと。
- WordPress管理画面の「設定」「一般」を確認し、アドレスが「https://」になってるかチェック
- 各ページがちゃんとリダイレクトされているかチェック
- デザイン・レイアウトのチェック
- 「保護された通信(鍵マーク)」が表示されているかチェック
上記4つをチェックしたところ、1と2は問題なし。ただし、3と4で問題が起こりました。
問題1:デザイン・レイアウトが崩れた。
私の場合、アイキャッチ画像が表示されなかったり、右カラムがなくなったり、変なスペースが生まれたりと結構な崩れっぷりだったんですが「キャッシュ」をクリアすることですべて解決しました。
「WP Fastest Cache」というプラグインを使っていまして、これの「Delete Cache and Minified CSS/JS」を選択したところデザインが通常状態に戻りました。もしかしたら時間の問題?とも思いましたが、念のため記載しておきます。
問題2:「https://」になってはいるが「保護された通信」にならない。
ちゃんと設定できた場合には、上記のような表記(Google chrome)または鍵の表示が出るはずでした。しかし、なりませんでした・・・。原因は、サイト内で「http://」を利用しているからとのこと。
サイトのトップページで、右クリック「ページのソースを表示」を選択してください。ソースを表示したらWindowsの場合「Ctrl+F」で「http://」を検索してください!
そうすると、必ず見つけることができます。
主な原因としては、サイトロゴ、OGP画像など過去「画像URL」を手入力で入力していた個所については、自力で変更しなくてはいけないということです。
「All in One SEO Pack」などのプラグインを使っている場合、OGP設定等で画像URLを入力することもあると思います。そういった部分をチェックし、完全に「http://」がなくなると一瞬で正常状態になりました。
SSL化後にチェックしたサービス
主に、Google周りのサービスのチェックになります。
- Googleアナリティクスについて:「プロパティ設定」「ビュー設定」で「http://」を「https://」に変更
- アドセンスについて:かなり前に設定したもの以外はそのままでOK。タグの中に「http://」の標記がある場合には、新規で発行するか、書き換えが必要。(参考:Google)
- Google Search Console:新規でサイトの登録が必要。
- アフィリエイトサービスの登録:必要に応じて確認してみてください
これでいったん終了です。
ちなみに、AMPプラグインを利用していますが、そちらのリダイレクトもうまくいっているようです。何か起こったら、また書きたいと思います!