Google でかねてから警告していたように、今年2018年7月から、Google Chrome でSSL化されていないサイトのURLの頭に、「保護されていない通信」という表示がされるようになりました。SEOでも不利になります。
すぐにもSSL化が必要です。さくらインターネットの無料SSL をもう一度試してみることにしました。
実は1年ほど前試みたのですが、PHP のバージョンを上げる必要があって、上げたら一部表示がくずれてあきらめて戻していました。その後PHPのバージョンを上げましたが、表示のくずれは発生しなくなっていました。
無料SSL化は、さくらインターネットのサーバコントロールパネルから簡単にできます。ログインして「ドメイン/SSL設定」から、独自ドメインの「証明書」の「登録」をクリックするのですが、私は前回登録しているので、すでに登録された状態になっていました。
私はすでに設定済みですが、ここで「無料SSL設定へ進む」をクリックします。
無料SSLは Let’s Encrypt を使用しています。利用規約を確認して、「無料SSLを設定する」をクリックします。
しばらくして証明書の発行が完了すると、メールが届きます。
次に、常時SSL化のために、http→httpsのリダイレクト設定やサイトコンテンツのURL変更が必要です。これをやってくれるプラグインが用意されています。
SAKURA RS WP SSL プラグインをインストールして有効化し、「設定」の SAKURA RS SSL を設定します。
チェック項目を確認してチェックし、有効化します。確かに、https:// で示されたサイトにアクセスできました。
Google Chrome でアクセスした時、このように「保護された通信」と出るようになりました。http も https になっています。
ここで一つ問題が発生しました。
今までページの先頭に戻る右のようなボタンを設置していたのですが、これが表示されなくなったのです。
SSL化とどのような関係があるのでしょうか。まったく関係ないように思えます。さっぱりわかりません。もしかしたら、プラグイン(SAKURA RS WP SSL)の影響かもしれません。（後で関係ないことがわかる）
調べていくうちに、IEでは画面一番下に下記のメッセージが表示されていることがわかりました。
「すべてのコンテンツを表示」をクリックすると、PAGE-TOP が表示されるようになります。デフォルトは表示されません。
Google Chrome では、このメッセージも表示されず、「セキュリティで保護されていないコンテンツ」とみなしているようです。（後で違うことがわかる）
ローカル環境ではSSLを導入していませんので TO-TOP が見えています。、Google Chrome のデバッグツールで比較してみました。
下は、ローカル環境で表示したものです。
デバッグツールの関連記述部分にマウスオーバーすると、左の PAGE-TOP がマークされます。
ところが、本番サーバー環境では下のようになります。
必要な領域が確保されていません。
２つのソースを比較してみますと、ローカル環境では、<p> タグも <a> タグも、
style = “display: block !important;”
があるのに対して、本番サーバの <a> タグにはありません。
これは、display の block(表示) と none(非表示)を Javascript(jQuery) で切り替えているのですが、SSL の環境では、これが無視されているためと思われます。ソースを書き換えることになりますから、SSL では禁止していると考えられます。SSL の仕様かもしれません。（今回この見方は、後で否定されます）
という仮定で、「ssl Javascript」でGoogle 検索してみると、やはりJavascriptが効かなくなることがあるようです。その中で、
Javascript を参照しているURL が、https でなく、http であると、Javascript の読み込みが無視される
という記述がありました。ソースを見てみますと、
src=”http://code.jquery.com/jquery-3.2.1.min.js”
というjQuery の参照がありました。これを、
src=”https://code.jquery.com/jquery-3.2.1.min.js”
とすることにより、PAGE-TOP が表示されるようになりました。
原因は、jQuery の参照 URL が http のままであったことでした。
なお、css、画像のURLは、http部分を省略できるので、
src=”//code.jquery.com/jquery-3.2.1.min.js”
とするとよいという投稿がありました。こうすれば、http でも https でも有効になるということです。
