トップ > Web > はてなブログ独自ドメインのHTTPS化手順まとめ

はてなブログ独自ドメインのHTTPS化手順まとめ

Web

こんにちは。

ついにはてなブログを独自ドメインで運用しているユーザーもURLをhttps化できるようになりました。

staff.hatenablog.com


「さっそくやってみよう！」と思ったのものの、勢いでやって失敗しちゃうと困るのである程度下調べをして取り組みました。

結果として「そんなにビビるようなもんじゃなかった」のですが、それでも時間がかかる作業なので私が取り組んだ内容をまとめておきます。

既に有用な情報が出てはいますが、誰かの参考になれば幸いです。

まずは先人に学ぶ

何はともあれ、とりあえずは先人に学ぶことが大切です。

私は以下のブログでやることをひととおり確認しました。

blog.minimal-green.com

www.notitle-weblog.com

こちらを見ていただければ当記事を見なくてもほとんど大丈夫です。（ドヤッ）

HTTPS化までの手順

ここからは私が実施した手順を紹介します。なお紹介する手順はあくまで「私の場合」ですので、必ず各自で確認し、各自の責任で取り組んでください。

ちなみにこの作業内容でだいたい2時間ほどかかりました。

記事のバックアップ

まずは記事をバックアップします。

ブログの管理画面から「設定」→「詳細設定」から「エクスポート」項目のリンクをクリックします。 "エクスポート"

するとエクスポート画面が出ます。過去にエクスポートを行っている場合は「エクスポートしなおす」をクリックしてバックアップを更新しましょう。
"エクスポート"

「ダウンロード」をクリックすればテキストファイルとしてブログ記事のバックアップデータがダウンロードされます。 "エクスポートファイル"

ただしエクスポートは記事データのみであって、カスタマイズ用に設定したスクリプトやCSS情報は保存されないので注意してください。

はてなフォトライフ（はてな記法）のURL更新

この作業が一番時間がかかりました。

はてなフォトライフの画像をはてな記法で埋め込んでいる記事を片っ端から更新していきます。はてな記法の画像URLは記事を更新することで、勝手にhttps化されます。

記事の管理画面から検索ボックスに src="http:// と入力してヒットした記事を全て更新しました。もしかするとフォトライフじゃない記事もあるかもしれませんがそれを確認しているとめちゃくちゃ時間がかかるのでとりあえず全部やりました。

"フォトライフ更新"

残りの「http://」を手動更新

前述の作業が終わったら、再度管理画面の検索ボックスから src="http:// で記事を検索します。

これでヒットした記事について、記事内に記載のURLを直接 https:// に修正していきます。

ただし https:// に対応していないリンクも有り得るので、直接アクセスするかプレビューで確認しておくのがベストです。


なお href="http:// は修正の必要はありません。

Amazonアフィリエイトリンクの場合

Amazonアフィリエイトの画像URLについても、2016年以前のものは http:// となっていますが、はてな記法でAmazonアフィリエイトリンクを埋め込んでいると、URLが修正できません。

そのため一旦、今の状態で再度記事をエクスポートしてテキストファイルから対象を探します。

古いAmazonリンクは、画像URLが

http://ecx.images-amazon.com

となっているので、エクスポートのテキストファイルから上記URLで見つけ出し、

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

に修正して、アフィリエイトリンクのHTMLを直接記事に貼り付けましょう。具体的にはこんな感じのHTMLになっているはずです。

<div class="hatena-asin-detail">
  <a href="http://www.amazon.co.jp/exec/obidos/ASIN/B00INTNSR2/xxxxxx/">
    <img src="https://images-fe.ssl-images-amazon.com/images/I/41SaHHs5rLL._SL160_.jpg" class="hatena-asin-detail-image" alt="世界一の映画館と日本一のフランス料理店を山形県酒田につくった男はなぜ忘れ去られたのか (講談社文庫)" title="世界一の映画館と日本一のフランス料理店を山形県酒田につくった男はなぜ忘れ去られたのか (講談社文庫)">
  </a>
  <div class="hatena-asin-detail-info">
    <p class="hatena-asin-detail-title">
      <a href="http://www.amazon.co.jp/exec/obidos/ASIN/B00INTNSR2/quotto-22/">世界一の映画館と日本一のフランス料理店を山形県酒田につくった男はなぜ忘れ去られたのか (講談社文庫)
      </a>
    </p>
    <ul>
      <li><span class="hatena-asin-detail-label">作者:</span> 岡田芳郎</li>
      <li><span class="hatena-asin-detail-label">出版社/メーカー:</span> <a class="keyword" href="http://d.hatena.ne.jp/keyword/%B9%D6%C3%CC%BC%D2">講談社</a></li>
      <li><span class="hatena-asin-detail-label">発売日:</span> 2014/03/07</li>
      <li><span class="hatena-asin-detail-label">メディア:</span> <a class="keyword" href="http://d.hatena.ne.jp/keyword/Kindle">Kindle</a>版</li>
      <li><a href="http://d.hatena.ne.jp/asin/B00INTNSR2/xxxxxxx" target="_blank">この商品を含むブログを見る</a></li>
    </ul>
  </div>
  <div class="hatena-asin-detail-foot"></div>
</div>

カスタマイズ部分のURL修正

ブログに採用しているテーマも含めて、カスタマイズ部分をhttpsに修正します。

私が確認したのは「詳細設定のヘッダ」と「デザイン」の部分です。

なお修正する際は必ず https://～ のURLにブラウザからアクセスして、当該のCSS/JavaScriptがhttpsに対応していることを確認しましょう。

詳細設定

管理画面から「設定」→「詳細設定」と進み、「head」項目に記載したスクリプトのURL部分を確認して修正しました。

"headスクリプト"

デザイン

管理画面の「デザイン」→「カスタマイズ」から、各CSS、スクリプトのURL部分を確認して修正しました。

タイトル下
"タイトル下のスクリプト"

フッタ
"フッタのスクリプト"

デザインCSS
"CSS"

HTTPS化

ここまで準備は整いました！いよいよ独自ドメインの設定をHTTPSに変更します。

管理画面の「設定」→「詳細設定」→「HTTPS配信」項目の「HTTPS配信の状況を確認する」リンクをクリックします。
"HTTPS配信の状況"

「変更する」ボタンをクリックします。
"HTTPS化"

「OK」ボタンをクリックします。
"HTTPS化"


これでHTTPS化は完了です！！

自分のブログにアクセスしてブラウザのURL部分が「保護された通信」となっていれば問題ありません。
"HTTPS化の確認"

Upgrade Insecure Requestsの設定

これは記事内に http://～ となっている部分がある場合、ブラウザ側で強制的に https://～ に修正する機能です。

これまでの作業で漏れていたり、今後作成する記事で誤って http:// としてしまった場合を考慮して設定しました。

管理画面の「設定」→「詳細設定」→「head」項目に以下のスクリプトを貼り付けます。

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

"Upgrade-Insecure-Requests"

なお元々 https://～ に対応していない場合、画像やリンクが非表示になるので注意してください。

外部サービスの設定

これはブログの見え方には関係ありませんが、忘れずやっておきましょう。

私はGoogle AnalyticsとGoogle Search Console、ASPなどの設定を変更しました。ここではみなさん共通で使っているであろう「Google Analytics」と「Google Search Console」の設定をご紹介しておきます。

Google Analytics

Google Analyticsの「管理」→「プロパティ設定」→「デフォルトURL」のスキームをhttpsに変更しました。
"Google Analytics"

Google Search Console

Google Search Consoleは既存URLの設定変更ができなかったため、新規に追加しました。

"Search Console"

"Search Console"

同じドメインなので所有権の確認は基本的に設定不要です。
"Search Console"

"Search Console"

無事追加されました。
"Search Console"

さあ、みんなでやってみよう

以上、はてなブログ独自ドメインのHTTPS化について手順をご紹介しました。

あくまで私が実施した範囲の話であり、人によっては異なる手順が必要だと思いますので必ず各自の責任で実施してください。


また最初にご紹介した記事の中では一括変換ツールの話もあるので、中身を確認の上使ってみるのも有りだと思います。

時間に余裕を持って取り組みましょう。

はてなブログ Perfect GuideBook

はてなブログ Perfect GuideBook

WorldWorldWorld 読者になる

コメントを書く