HTTPS化しました！！ で、失敗中．．．（はてなブログ無料版）
無料版のはてなブログのドメインを使っている私の管理画面ではなかなかHTTPS化のボタンが有効にならなかったのですが、半月ほど前にやっと有効になりました。
まとまった時間が取れるG.Wになるのを待ち、昨夜5月1日に、満を持してHTTPSに切り替えました。
そしていろいろ不具合が発生中です！(*´∀｀*)
この記事では、無料版のはてなブログをHTTPS化する時にやった事と、現在の不具合を記録しておきます。
事前の準備
はてなブログをHTTPSに切り替えると元のHTTPには戻せません。進むしかないのです。
したがって準備が重要です。
公式情報の確認
まずは公式ページを見て基本的な影響を確認しました。
はてなブログの機能を使っている部分に関してはあんじょうやってくれそうな感じです。
Amazonや楽天のリンクの確認
私の記事にははてなブログの機能を使わずにAmazonや楽天の商品の紹介を挿入していたりします。
その為はてなブログのカスタマイズなどで以前から参考にさせていただいているこちらのサイトを参考にして準備をしました。
上の記事の中では、サクッと一括置換してくれるツールも紹介してくださっているのですが私はあえて手作業で、PC画面のサイドバーの検索ボックスに置換元の文字を入力・検索してポチポチと置き換えていきました。
カスタマイズで仕込んだCSSやJavaScriptを修正
こちらも上の紹介記事に書かれている通り、管理画面のデザインのカスタマイズ画面や詳細設定などのあちこちに仕込んでいるCSSやJavaScriptで該当する部分を書き換えてゆきました。
以前の記事にも書きましたが私のはてなブログは無料版ですがスマホ画面をカスタマイズしています。なのでGoogle Tag Managerのほうに仕込んでいるCSSやJavaScriptもポチポチと変更しました。
テーマの対応状況を確認
このブログはテーマに Spirea を使わせていただいています。
そこでこのテーマがHTTPS化に対応しているのか確認しました。まずはサクッとこちらの記事で状況を確認しました。
はい Spirea にはおもいっきり❌がついてました。
そこで実際に Spirea のスタイルシートを見てみると、上の記事の最後に書かれているように虫めがねボタンの画像のURLがHTTPと直書きされているパターンでした。
そこで同記事に書いてくださっている回避策にならい、デザインのカスタマイズ画面の「デザインCSS」に以下のスタイルシートを追記しました。
.global-search-module .search-module-button {
background: transparent url(//blog.hatena.ne.jp/images/theme/search.png) no-repeat center center;
}.hatena-module-search-box .search-module-button {
background: transparent url(//blog.hatena.ne.jp/images/theme/search.png) no-repeat center center;
}@media (-webkit-min-device-pixel-ratio: 2) {
.hatena-module-search-box .search-module-button {
background: transparent url(//blog.hatena.ne.jp/images/theme/search@2x.png) no-repeat right center;
}}
HTTPS配信を有効にする
ひととおり準備ができた気がするのでいよいよHTTPS化です。
これはもう簡単で、はてなブログの管理画面の「詳細設定」で「HTTPS配信」を「有効」にするだけです。
ポチッとな。
HTTPS化後の作業
まずはアフィリエイトサイトに登録してあるURLの変更をしました。
Googleのツールについてはこちらの記事を参考にして設定しました。
こちらのGoogleのツールの設定ではうまく進まなかった事がありますので以下に記録しておきます。
Google Srach Console
上の記事を参考に Google Srach Console に新しくHTTPS のサイトを登録しようとすると、とっぱちのサイト所有権の確認でいきなりつまずきました。
書いてあるとおりに「Googleアナリティクス」で確認しよしとしてもトラッキングコードの設定がおかしいというエラーになって確認ができません。
時間をおいて何度か試しましたがダメでした。
トラッキングコードの埋め込みははてなブログのシステムが実施してくれているのでいじれません。（というかいじる必要がないはずです）
それで「Googleアナリティクス」ではなく「HTMLタグ」で確認をしてみたら一発で確認できました。
Google アナリティクス
設定のプロパティでHTTPSに変えるのはすぐにできたのですが、その後の「Search Consoleを調整」がうまくいきません。
上の記事ではサイトのURLの横に「編集」リンクが表示されるようなのですがそれは無く、代わりに「削除」リンクが表示されています。
しかも記事ではURLは「HTTPS」で表示されていますが私の Search Console では「HTTP」のままです。
このようになっています。
他の記事を探してみると以下の記事では「サーチコンソールのプロパティにはhttp（旧）のものとhttps（新）の2つができてしまっている状態かと思います」と書かれていますが、上のスクリーンショットのようにひとつしか表示されていません。
こちらは今も未解決のまま放置です。
【2018/05/03 追記】
以下のフォーラムの記事が見つかりました。
こちらの質問の回答に書かれている以下の内容を試してみたら無事にHTTPSのサイトを登録できました。
GoogleアナリティクスとリンクできるSearch Consoleのプロパティは1つ
という制限があるためと考えられます。
現在、GoogleアナリティクスとSearch Consoleのhttpプロパティがリンクされているのでこちらを一度、「削除」からリンクを解除し、再度、Googleアナリティクスの管理画面からSearchConsoleと連携するプロパティにてhttpsのプロパティを選択しなおす必要があります。
HTTPS化後の不具合
HTTPS配信に切り替えた後、問題がないかブログを見て回りました。
発見したのが以下の不具合です。
はてなスターが表示されない
このブログでは、はてなスターをカスタマイズしていました。
もちろんそのカスタマイズしたはてなスターの画像のURLもHTTPS対応にしたのですが、ブロク上ではなぜかはてなスターを押してくださった方々のアイコンごと表示されなくなってしまいました。
こちらはサクッと諦めてカスタマイズのコードを削除する事で対応しました。
【2018/05/04 追記】
解決しました。
原因は、はてなスターのカスタマイズ画像のURLをHTTPS対応にした事自体でした。
これはHTTPのままでないと表示されないようです。
このカスタマイズをした2015年の私のスキルでは無料版のはてなブログのスマホ画面をカスタマイズすることはできませんでした。しかし今の私はできます。
という事でついでにスマホの方もはてなスターをカスタマイズしました。キラッ☆
デザインのカスタマイズ画面でブログの表示が崩れる
現在使っているPCの解像度が低いためにデザインのカスタマイズ画面を開くとタブレット向けの表示になるのですが、その時にブログの表示が崩れてしまうのです。
普通にブラウザで表示させて横幅を縮めてタブレット表示にした場合は崩れません。
ただしこれはHTTPS化が原因かどうかは怪しいです。
タブレット表示時のグローバルメニューが開かない
これもHTTPS化が関係ないかもしれないのですが、横幅が狭い時に表示されるメニューアイコンをクリックしてもグローバルメニューが展開されません。
上のデザインのカスタマイズ画面と原因が共通しているのかもしれません。
読み込みが終了しない
上のはてなスターの問題を対応している時に気づいたのですが、記事が表示されてもブラウザの読み込みがいつまで待っても終わらないのです。
よく見るとサイドバーのAmazonの広告のいくつかが表示されていません。
何度か試しても表示されないのはAmazonの広告です。それで数を減らしてみた所読み込みが終わるようになって広告も表示されるようになりました。
ただそれでも広告が表示されても読み込みがしばらく終わらないこともあり関連性はハッキリしません。
今はそんな事も無いのでたまたま昨夜の私が作業している時間帯だけ重かっただけなのかもしれません。
「過去記事」のブログカードが表示されない
今も継続中でイタイ不具合がこの貼り付けた過去記事のブログカードが表示されない問題です。
この件をつらつらと書いていたら長くなってしまいこの時間になってもまだ書き終わらないので別記事にする事にしました。
書き終わったら後ほど公開します。
なので今回はここまでとなります。*1
【2018/05/03 追記】
書きました。
【関連記事】
このブログのカスタマイズ関係の記事はこちらからどうぞ。
