はしくれエンジニアもどきのメモ

情報・Web系技術・Englishの勉強メモ・備忘録です。

はてなブログをhttps化する

はてなブログhttps化する

今更ながら,はてブhttps化したのでそのメモである. 最も気を付けるべきことは,Mixed Content(httpからリンクしてる画像, css, jsなど)のようだ.

公式の移行方法は以下のページにある.

HTTPSで配信する - はてなブログ ヘルプ

移行できるもの

「変更する」を選択した場合、はてなスターおよびはてなブックマークHTTPSのURLに自動的に変更します。はてなブックマーク数によっては、移行完了までに時間がかかることがあります。

はてなスターはてなブックマーク以外のSNSでのアクション数(例: Facebookのいいね!やシェア数など)は移行できませんのでご注意ください。

とある.

よって,移行できるものは,

他サービスのSNSなどのアクション数は移行できないもよう.

など

Mixed Contentの注意

httpsへ移行するにあたって,今まで使用していたhttpサーバにある画像, css, jsなどのコンテンツが読めなくなる.

そのため, - そのコンテンツがhttpsにもあるのか - (自ブログ内の)リンク先がhttpsの方も読めるようになっているのか

を確認する必要がある.

つまり,リンク先はhttps://または//にしておけばいい.

<img src="https://...">

@import url('https://...' .....

<script src="https://..." ...>

or

<img src="//...">

@import url('//...' .....

<script src="//..." ...>

「設定」>「詳細設定」> 「検索エンジン最適化」>「headに要素を追加」の確認

web fontなどの<link>を設定している場合に,http://でなく//またはhttps://になっているかを確認する.

例えば自分の場合,googleのweb fontである「Noto Sans JP」を設定したので,以下の設定になっていることを確認した.

<link rel="preload" as="style" href="//fonts.googleapis.com/earlyaccess/notosansjp.css" type="text/css" media="all" onload="this.rel='stylesheet'">

カスタイズ(css, js)の確認

httpになっている画像,外部css, jsを探す.

  • ヘッダ > 「タイトル下」の確認
- 記事 > 「記事上」「記事下」の確認 ブログ村などのリンクを置いている場合,画像のurlに注意する. 例えば,httpsに対応させると以下のようになる.
<a href="//english.blogmura.com/ranking.html"><img src="//english.blogmura.com/img/english88_31.gif" width="88" height="31" border="0" alt="にほんブログ村 英語ブログへ" /></a><br /><a href="//english.blogmura.com/ranking.html">にほんブログ村</a>
  • 「サイドバー」でhtmlを埋め込んでいる場合の確認
  • 「フッタ」 の確認

Google Photoの画像の確認

このブログでは,基本的に画像はGoogle Photoからリンクされているので確認する.

はてなブログの連携からGoogle Photoの画像を埋め込んでいればhttpsになっているので特に問題なし.

Google Adsenseの確認

埋め込みscriptが以下のようになっていれば問題ない.

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

Google Analyticsの確認

「詳細設定」でトラッキングコードを設定していれば特に問題ない.

移行方法

  1. 「設定 > 詳細設定 > HTTPS配信」から「HTTPS配信の状況を確認する」をクリック.

  2. 変更するかどうかの画面になるので,右側の「変更する」をクリック.

  3. 問題なく有効化すると以下の画面になる.