cBlog

Tips for you.

HTTPSに移行しました@はてなブログ そのためにやったこと

スポンサーリンク

更新:2018-03-31

タブレット端末を操作する男性と鍵のイラスト

当ブログ「cBlog」をHTTPSに移行しました。私は臆病なのでソースの改ざん書き換えを手作業でやりましたが、すでに偉い人が作ったツールもあります。

www.notitle-weblog.com

昨年の10月下旬から作業を開始し、今年の始めには後述のTeX記法部分以外は完了しました@約500記事。うん、非効率。

いずれにせよ置換すべき部分の予習が必要になるので、私がやったことをまとめておきました。

 

前提

SSL化/HTTPS化にはソースからhttp://...を一掃し、https://...に置き換えなければなりません(埋め込みコンテンツのみ。他サイトへのリンク(<a href="http://...">)は不要)。例えば以下の記述。

<xxx src="http://...">
@import url(http://...)

詳しくは公式ブログをご覧ください。

staff.hatenablog.com

 

非公式デザインテーマ

デザインテーマのCSSの中身には手が出せないので、内容によっては各テーマの作者様対応になるかと思います。当ブログでも非公式テーマ「DUDE」を使用していますが、後述の虫眼鏡アイコンが混在コンテンツになります。じゃあどうやったのかなんですけど、あまり大っぴらに勧められる方法じゃないので… ヒントはソースをご参照ください。

 

テーマ制作者の方にお願い

Mixed Content回避のために、虫眼鏡アイコン画像をはてなフォトライフにアップロードし、そのURLを指定する、もしくは、Boilerplate最新版にあるインラインSVGに置き換えるアップデートをお願いします。

参考

help.hatenablog.com

 

はてな記法

私は主に見たままモードを利用しているため、この記事は見たままモードで書かれたブログを前提としています。ですが、asin記法を使用した古い記事にあるAmazon商品画像のsrcは単に記事を更新するだけでhttpsに書き換わったので、はてな記法の方は記事を再更新すればいいんじゃないでしょうか。

 

未対応部分

TeX記法で書かれた数式の<img>のsrc

2018/02/27付で対応されました。記事の再更新で置換されます。

 

サイドバーの検索モジュールの虫眼鏡アイコン
http://blog.hatena.ne.jp/images/theme/search.png
http://blog.hatena.ne.jp/images/theme/search@2x.png

ご自身でデザインCSSを書かれている方は以上をhttps://に置き換えてください。

 

バックアップ

作業を開始する前にまずはバックアップ。それが一番大事。

記事は、設定 > 詳細設定 > エクスポートの「記事のバックアップと製本サービス」 > 「…エクスポートする」ボタンをクリックし、「ダウンロード」ボタンをクリックしてダウンロード。

あと、これらをどこかにコピペ。

  • aboutページ
  • headに要素を追加
  • タイトル下
  • 記事上
  • 記事下
  • サイドバーのHTMLモジュール
  • フッタ
  • デザインCSS

 

「http://→https://」置き換え方法

上のリストにあるものについては手作業で置き換え。

作業の大半を占めるのは記事ですが、「記事の管理」画面の「記事を検索」ボックスではHTMLソースも検索できます。「src="http:」と検索すれば絞り込めますね。

テキストエディタも併用するといいかも。私は「Atom」を使いました。

 

はてなフォトライフ

http://

https://

 

iTunes商品紹介

複雑なのでサイドバーから貼り直し

 

Amazon商品紹介

http://ecx.images-amazon.com

https://images-fe.ssl-images-amazon.com

 

カードリンク

http://hatenablog-parts.com

https://hatenablog-parts.com

//hatenablog-parts.comはOK)

 

デザインCSSの<system>内@import

http://hatenablog.com/theme/....csshttps://blog.hatena.ne.jp/-/theme/....cssにリダイレクトされます。

 

その後

Google アナリティクス

管理 > プロパティ設定 > デフォルトの URLで「https://」を選択する。

 

Google Search Console

「プロパティを追加」から自ブログのhttps版URLを追加する。等。

所有権の確認は、別の方法 > HTML タグでOK。

サイトマップを送信。

Search Consoleとアナリティクスをリンクする。下のサイトの「Search Console を調整」ではうまくいかない。ダッシュボード > 歯車マーク > Google アナリティクスのプロパティから自ブログにチェックを入れて置き換える。

参考

nelog.jp

 

Google AdSense

URLスキームを入力しないので変更不要。

 

Amazonアソシエイト・プログラム

AdSenseと同様、変更不要。

 

iTunes アフィリエイトプログラム

設定 > パブリッシャー > ウェブサイト/データベース > ウェブサイト > 「クリックして編集」をクリック。

ウェブサイトから「http://...」を選択し、ウェブサイトのURLで「https://...」に変更して「保存」をクリック。

「ウェブサイトを編集」を閉じた後、画面下の「適用する」をクリックする。

 

Ptengine

「http://」「https://」の変更はできず、サイトの追加が必要。しかし、無料版あるいははてなブログ特別プランでは設定できるドメインが1つまでのため、一旦現プロファイルの削除が必要となる。もちろん、この場合計測データは削除されるので、CSVにエクスポートするなど別途保存しておく。

 

気づいたこと

はてなスター、はてなブックマーク、Pocketは大丈夫だが、Facebookのシェア数が飛んだ。

アクセス解析にhttp版からのアクセスが表示される。内部リンクをhttpsに置き換えればよい?

アクセス数への悪影響なし(約10日経過時点)。変わらないか、気持ち増。