オタクの戯言

オタクが思うがままに書き連ねていく、とりとめのないブログです

はてなブログをhttps化してやったことや初心者ゆえ苦労したこと一覧

スポンサーリンク

はじめに

当ブログにお越しいただき、恐悦至極にございます。あにおです。


f:id:aniota-alvarado:20170523171801j:plain

いやー!しんどかった!!

とりあえずいけるっしょと楽天的に考え、素人が不用意にhttps(SSL)化に手を出した結果酷い目に遭いました。

また同じことがないように、ここにやったこと等を細かくまとめておこうと思います。


それでは、最後までお付き合いいただければ幸いです。

まずやったのはアナリティクスとサーチコンソールの設定

いの一番にやらなければならないと思ったのが、アナリティクスとサーチコンソール(サチコ)の設定変更です。

何かわかり易そうな記事はないかな~と探した結果、ざっくりとしたチェック項目としてガンダムーン(id:gundamoon)さんの記事が参考になりました。

ただ、私は初心者過ぎてお話にならないため、


「サチコ サイトマップ登録」でググると「sitemap_xml」と出ることが多いのに「sitemap_index.xml」って結局どっちなんだ???


と早くも壁にぶち当たってしまいました。

結論からいうと両方登録したのですが、その点はいっしー(id:hometaka5657)さんが丁寧に解説して下さっていたので同じく混乱してしまった場合は参考にしてみてください。



さて、ここで新たな問題にぶち当たります。

昔にやりすぎてそもそもサチコってどんな感じで登録したんだっけ?状態になっていたのです。

その辺りをかなりわかり易く教えてくれ、更にサチコの詳細設定まで書いてくれている後藤さんの記事は本当に助かりました。

特に「検索パフォーマンスの改善」はよくわからなくて放置していたので、この機会に見直せて本当に良かったです。

ブラウザでの混在コンテンツ(Mixed Content)チェック方法

さて、次にあれこれと設定を修正する前に、まずはブログが保護状態になっていないのかを調べる必要があります(なっているなら別にいじる必要はないので)。

はてなさんはそのあたりについて「ブラウザの「開発者ツール」を利用すると確認できるよ!」と言っていますが、こちとら素人舐めないでいただきたい。

ここでもちょっと苦戦したので、ChromeとFirefoxそれぞれでのチェック方法を簡単に書いておきます。



まず、Chromeの場合はページを表示して[右クリック]→[検証]→[Console]で真っ赤になってエラーが出ていたら要修正です。

続いて、Firefoxの場合はページを表示して右上の三本線(メニュー)から、[ウェブ開発]→[開発ツールを表示]→[コンソール]で同じく真っ赤になってエラーが出ていたら要修正です。

アドセンスでブログの追加・変更をする?

アドセンスをやっていない場合は関係ないのですが、やっている場合URLが変わるわけですから変更手続とかあるのかな?と疑問が生じました。

そこで調べてみた結果、規約違反になっていなければ別段ブログの変更手続をする必要はないようです。

広告が掲載されているサイトの URL を変更した場合、AdSense アカウントを更新する必要はありません。アカウントから AdSense コードをコピーして新しいサイトに貼り付けするだけで済みます。ただし、新しいサイトが AdSense のプログラム ポリシーに準拠している場合に限ります。

出典:AdSenseヘルプ

ということでとりあえず無視。

ただ、他にもアフィリエイトを利用している場合は、サイトのURL変更やら貼り付けてる広告の見直しやらが必要な可能性があるのでご注意を。

ブログをカスタマイズする際自分で書き換えたり追加したコードを修正する

生意気にもブログのカスタマイズなんぞをしていたため、その辺りを修正する必要がありました。

チェックした項目は以下の5つです。

  • [設定]→[詳細設定]→[headに要素を追加]
  • [デザイン]→[カスタマイズ]→[ヘッダ]→[タイトル下]
  • [デザイン]→[カスタマイズ]→[記事]→[記事上&記事下]
  • [デザイン]→[カスタマイズ]→[サイドバー]→[フォローする](フォローボタン等)
  • [デザイン]→[カスタマイズ]→[デザインCSS]

もっとも、これはあくまでも私の場合なので、細かくチェックして「http」で始まっているものがないか調べてみてください。

headに要素を追加でjqueryを修正

ここでは、何に使ったのか完全に覚えていませんが「jquery」なるもののURLがhttp~となっていました。

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.3.min.js"></script>

↑こんなやつです


これは単純にsを付ければ良いのかそれとも別の方法があるのか判断できなかったのですが、頭のhttpの部分を取ってしまえば良いそうです。

この点は、ぬる太 (id:nuruta)さんの記事が大変参考になりました。

ヘッダに設置しているカテゴリーやリンクの修正

できるブロガーはみんなやってて格好良いので、私も真似してブログタイトルのすぐ下に「TOP」といったカテゴリーを設置しています。

そのURLは変更しなくてもそのままリンク先に飛べましたが、一応すべてhttps~と修正しておきました。

あとはその下に良く読まれている記事を3つ並べているので、それも同様に一応修正しました。

記事下のはてブやフォローボタンなどの修正

記事上は特にそれらしいものが無かったので、記事下にいきますがここが一番苦労しました。

まず、はてブやフォローボタンなどのコード中にある、当ブログのアドレスをhttpsに変更します。

続いて、前述した「jquery」がこちらにも含まれていたので、同じように頭のhttpを取り除きました。

ここまでは良かったんです。ここまでは。

はてブが表示されないしされても数字が0(ゼロ)のまま

最初、はてブの数字部分がずっと読み込み中でぐるぐる回ったままだったのは、土曜日のクマ さんのおかげで無事解決しました。

が、私は注意力が皆無なので以下のコード冒頭部をただ削るだけで良いと勘違いし、数字が何をやってもゼロのままという状況に陥ったのです。

http://api.

つまり、自分の不注意でかなり無駄な時間を過ごしたという事になります。残念にもほどがある。

「テスト」とかいって自分の記事にいくつもはてブしては途方に暮れるという、傍から見たら自分大好きかよみたいな事をやってましたからね・・・。

Facebookのシェア数が引き継げずに0(ゼロ)のまま

はてブは良いとして、いやよくないんですけど問題はこちらです。

Facebookのシェア数もまた、0(ゼロ)になってしまっているではありませんか。

こちらに関しても色々な角度から調べたのですが、WordPressでは手段が書いてあるもののはてなのほうは見つかりませんでした。

自分で試しにシェアしてみたところしっかりカウントされたので、リセットされた状態でまた始めなければいけないみたいですね。

中には結構な数のシェアをしてくれていた記事もあったので、「戦闘力・・・たったのゼロか・・・ゴミめ・・・」状態に戻ってしまったのは残念です。

もし何か手段を知っているかたがいれば、是非とも教えていただきたい!

最後まで残っていた混在コンテンツは虫眼鏡アイコンだった

さて、ここまであれこれ修正してきて残すところあと1つとなったわけですが、そのあと1つがまー分からない。

改めて調べてみたところ、

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

これが問題らしいんですけどどこの事を言っているのかサッパリなんですよ。

コード的に似たようなのが「headに要素を追加」にあるものの、頭のhttpを取っただけでは一切変化がない。

これはブログテーマが悪いのか、それとも別の要因なのかと必死になって調べ続けたのですが、これまた私の不注意が原因だったんですね。はい。



結果として、はてな公式でもお知らせされている「虫眼鏡アイコン」が問題だったようで、Plane Noteさんの方法その2とその3を実践したところ見事に解決いたしました。




そして以上を持って無事当ブログは保護された通信に生まれ変わりましたー!!!やったーーーーー!!!!!

f:id:aniota-alvarado:20180420181341p:plain

Chromeのほうでは

MIMEタイプ( 'text / html')がサポートされているスタイルシートMIMEタイプでなく、厳密なMIMEチェックが有効になっているため、 'https://aniota-alvarado.hatenablog.com/chrome.css'からスタイルを適用することを拒否しました(Google翻訳)。

というエラーを吐いていますが、ちょっと調べただけでは解決できなそうなのでとりあえず放置。

あと、[デザイン]→[カスタマイズ]であれこれいじっている時のプレビューですが、レイアウトがなんか崩れてるんですけどこれも放置。

f:id:aniota-alvarado:20180420181951p:plain

他にも画像などは記事を更新しないと混在コンテンツ扱いになる、みたいなことをはてなで言っていた気がするんですけど問題なさそうなので放置。

とりあえずこんな感じで、問題はまだありそうですが一応の目標だった保護された通信にできたところで作業を終了しました(というか心が折れました)。

おわりに

本当に、本当に長い戦いでした。

コードって何?エラー出てるけど具体的にどこ?英語じゃわかんないよ助けて!状態の私が手を出してはいけない領域だった気がします。

ただ、これでずっと気になっていたセキュリティ面が解決したわけですから、やってよかったと思っています。

この記事が同じようにこれ何?!どういうことなのヘルプミー状態となっているかたの参考になれば幸いです。



長くなってしまいましたが、最後まで読んでいただきありがとうございました。

それでは、またのお越しをお待ちしております。

Copyright © 2016-2018 オタクの戯言 All rights reserved.