SSLに対応していないページが7月24日からChromeで警告開始｜お小遣い稼ぎSite

インターネットブラウザの「Chrome68」が7月24日にリリースされます。それに伴い、SSLに対応していない全てのページで警告が表示されるようになります。

SSLに対応しているページとは「https〜」で始まるアドレスで、入力フォームがあるページには必ずといってhttps〜のアドレスになっています。

そのSSL対応が全てのページに求められるようになり、SSLに対応していないページが警告されるようになるということですね。

上がSSLに対応していてきちんと保護されているページ。
下がSSLには対応しているが、完全には保護されていないページ。
SSLに対応していないページは、黒文字で「保護されていません」と表示されるようになります。


当サイトでも常時SSL化にしてみましたが、鍵マーク付きの保護された通信と表示させるにはいくつか条件があるようで難しい。結構面倒だったりするので、全てのページで鍵マークを表示させるには時間がかかりそうです。


常時SSL化については、随分と前からお話があったみたいですが私は全く知りませんでした。数日前に私が借りているレンタルサーバー「ロリポップ」から警告についてのお知らせメールが届いて、そこで初めてSSL化を知ったんですね。（ほんと助かかりました）

ロリポップでは無料で独自SSLを利用できるので、早めに設定することをお勧めします。（申し込むと数分で完了します）

https://〜で表示されるようになったら、いくつかやることがあります。このことに関しては、当サイトより詳しく説明されているサイトさんがたくさんあるので、ググったほうがよいです。

（だけど大まかにいうとこんな感じ）

httpからhttpsへの301リダイレクト

リダイレクトではなく301リダイレクトなので気をつけて。

Search Consoleに「https://」と「https://www.」の2つを新規登録

2つ登録するとパフォーマンスの改善メッセージがくるので、優先するバージョン（wwwありかなしか）を選択してください。あと新しいサイトマップの送信を忘れずに！

アナリティクスの「プロパティ設定」と「ビューの設定」の設定

URLの設定をプルダウンで「http://」から「https://」に変更

jQueryの読み込みの記述変更

jQueryを使っている方はhtmlにこんな記述をしていると思います。

src="http://ajax.googleapis.com/ajax/libs/jquery/●●●/jquery.min.js"

どうやらhttpsのサイトだとこれが読み込めない（jQueryが動かない）そうなので、記述の変更が必要となります。
「http:」を省略して「src="//ajax〜」と記述するか、jsファイルを自分のサーバーに上げてそこから読み込んでもOK。

type="text/javascript" src="●●/jquery.min.js"

（カッコで囲むと表示されなくなっちゃうので省略しています！ちゃんとスクリプトで囲ってね）



今回のSSL化で、このブログツール（SereneBach）にログインできなくなったりとめちゃめちゃめちゃ苦労しました。（6時間くらい悩みました）

結局、dataフォルダの「configure.cgi」のパスを2か所「https」に変更するだけで全てが動くようになったので、もしもSereneBachを使っている方がいたら見てみるといいかもしれません…。


7月24日のChrome68では、保護されていませんの文字が比較的目立たない黒色。しかし10月リリース予定のChrome70では、赤文字と▲マークで保護されていない通信と表示されるようになるので、それまでには常時SSL化しておきたいところです。

面倒だとは思いますが、赤色で警告が出たら見ている人もビビって逃げると思うので、対策はしたほうがいいですね！

やはりスマホからもPCサイトを見れないと不便だと思うので、スマホで見たときだけPC版に切り替えられる「ボタン」を用意してみました。


ボタンは最下部のフッターのところにあります。

これまたとってつけたような急きょ対応したものなので、もっと分かりやすいように変更するかもしれませんが･･･。

やっぱり最上部に切り替えボタンがあったほうが便利でしょうか。（悩む）


レスポンシブデザインへの変更方法、PCサイトとスマホサイトの切り替えボタン設置方法はググればすぐに出てきますが、スマホで見たときだけ「切り替えボタン」を表示させる方法が少し手間取ったので、そのうちまとめてみたいと思います！たぶん！

[追記]
ちょろっと色々とまとめてみました。

グーグルさんから「モバイル ユーザビリティ上の問題が検出されました」という件名のメールが届きました。

どうやら「スマホで見づらいから何とかしなよ」という内容らしく、「スマホユーザーにもそんな風にランク付けするからね？」と言ってきているらしいです。

とりあえず、現在はランキングに影響はないようですが、4/21から「スマホ対応」しているかどうかをランキング要因にするそうです。


というわけで、メインサイトのほうだけ急きょ「レスポンシブ対応」にしてみました。
やっつけでちょろっとCSSを書き足しただけなので、見づらいです。

時間ができたら少しずつ修正したいと思いますが･･･そもそもレスポンシブ対応にすると縦長になって逆に見づらくないですか！

Googleが提供するサービス『ウェブマスターツール』の構造化データが激減しました。

原因は全くもって分からないんですが、7月8日に426アイテムあったのが14日には6アイテムに。

エラーが発生しているようでもないので、お手上げ状態です。

検索順位に関係しないようなのでこのまま放っておいてもいいんですが、なんだか気持ち悪いですよね。



･･･という記事を一昨日書いていたんですが、本日再度確認してみたら元に戻っていました。

グラフを見てみると、15日に一旦0個になり同日に444個まで復活。

元々エラーは出ていなかったので対処は何もしていなかったんですが、構造化データが激減中もアクセス数が落ちることはなかったので、あまり気にする項目じゃないですね。


グーグルは、構造化データのマークアップは検索結果に影響を与えないと宣言しているものの、マークアップをすることでページをより理解するために役立つとしています。

構造化データ？マークアップ？とサッパリ分からない方は、ウェブマスターツールをいじくり回してみると面白いですよ。

ようやくSerene BachのCGIが直りました。

記事の表示は正常だったんだけど、カレンダーや月間アーカイブ等のCGIが動いてなかったんです。

本当に死ぬかと思った。

全部丸投げしたいくらいに、もう諦めていました。

事が起こったのは、昨日の夜22時くらい。


以前からもう1個サイトを作ろうかなぁと思っていまして、ロリポップの独自ドメインの設定をいじっていたんです。

ロリポップで独自ドメインをお使いの方はご存知かと思いますが、設定項目の一つに、『公開（アップロード）フォルダ』というものがあります。

これは、借りたサーバーの中にお部屋を作るようなもので、マルチドメインを使うなら絶対に設定が必要となっています。

が、私が設定した当時は何のことか分かっておらず、空欄のままでも正常のサイトを公開出来ていたので、全く気にしていなかったんですね。

これがいけなかった！

空欄のまま設定していたということは、サーバーの最上層（ルートディレクトリ）に、そのままバン！っと「お小遣い稼ぎSite」を置いてしまったということ。

つまり、借りているサーバーはあくまで1つなので、最上層に置くべきindex.htmlファイルをそのまま最上層に置いてしまうと、1つのサイトしかアップロード出来ません。

じゃあ2つ目のサイトのindex.htmlファイルはどこに置くのー？となるわけですが、そこで公開フォルダの設定が必要になってくるんですね。

公開フォルダは、独自ドメイン設定の『公開（アップロード）フォルダ』から設定でき、同じフォルダ名をサーバー上に作ると、そこがサイトの最上層フォルダとなります。

つまり、サイトごとに各々の公開フォルダを作成し、サイトはその公開フォルダにアップロードすると、1つのサーバーで複数のホームページを管理できるようになります。


ちなみに、この公開フォルダの名前はサーバー上に作る架空フォルダのようなものなので、適当な名前でOKです。
（パソコンの中に上記の架空フォルダを作る必要はありません。）

公開フォルダ名はアドレスに反映されることはなく、サーバー上は

/公開フォルダ名/index.html

ですが、アドレスは

http://独自ドメイン/index.html

となりますのでご安心を。


また、私のように公開フォルダを空欄のまま設定して使っていても、後からなんとでも変更が可能です。

まず先にサーバーに公開フォルダを作成しておいて、その中にサイトのファイルデータをアップロードします。

次にロリポップの独自ドメイン設定から、先ほど作った公開フォルダ名を入力すれば、設定完了。
不要になったルートディレクトリのファイルデータは全部削除しちゃいましょう。

手順は逆でも構いませんが、公開フォルダの設定は反映されるまで数分かかりますので、404（ページが見つかりません）を避けるためにも上記の方法がよいかと思います。


ってなわけで、色々ファイルデータを移していたらSereneBachで管理しているデータファイルも少々ごにょごにょしてしまい、文頭で書いたようにCGIが動かなくなってしまいました！っていうお話でした。

（dataフォルダに入っていたinstall.tempというファイルを削除したらすっかり直りました。）

突然IEのレイアウトが崩れた！
何もしていないのにどうして！？

と、あたふたすること丸1日。

以前にもこんなことがあって、そのときはいつの間にか直っていました。

が、今回はその原因を突き止めてやりましたよ。

原因は、IE独自機能の「互換表示機能」。

「互換表示」とは、古いブラウザ用に作られたサイトを正しく表示させるための機能で、なぜかIEの設定が互換表示になっていたんですね･･･。

はぁもう。

たった1個ボタン押すだけで直っちゃうなんて、この悩んだ1日は何だったの。

このボタンは間違って押しやすいので注意です。

また上部の[ツール]からも互換表示の設定ができます。