はてなブログのHTTPS（SSL）化に関する備忘録

f:id:kei-alex:20160505213029j:plain

こんにちは。
理解が浅いまま感覚的に作業していたら、いよいよ混乱してきたKei Alexです。

そんなわけで備忘録。

過去記事リンク

↓こういうの。

dragonisland.hatenablog.com

【方法１】丸ごと張り替える

単純に、埋め込まれている範囲を削除して、改めて埋め込み直す方法です。
打ち間違いなどのミスを回避できますが、少々面倒かもしれません。

【方法２】「http:」を「https:」に書きかえる

僕が今やっている方法です。
記事編集の、HTML編集画面で、直接書き換えます。

はてなフォトライフの画像

はてなブログでは、画像を記事に掲載する場合、はてなフォトライフという姉妹サービスと自動的に連携されます。
端末から記事に直接ドラッグしたものは、はてなフォトライフに自動でアップロードされます。
また、はてなブログの写真一覧は、はてなフォトライフの一覧とリンクされています。

これははてな側で対応してくれたようで、相対URL（パス）で処理すれば反映されます。

Amazonの商品リンク

↓こういうの。

トンボ鉛筆色鉛筆 36色ロールケース入りミニ削り器付き MJ-CRNQ36CQAAZ

出版社/メーカー: トンボ(Tombow)
発売日: 2018/02/28
メディア: オフィス用品
この商品を含むブログを見る

これがね、HTML上ではこういう記述なんですよ。

<div class="freezed">
<div class="hatena-asin-detail"><a href="①http://www.amazon.co.jp/exec/obidos/ASIN/B079Q9M8DX/hatena-blog-22/"><img class="hatena-asin-detail-image" title="トンボ鉛筆色鉛筆 36色ロールケース入りミニ削り器付き MJ-CRNQ36CQAAZ" src="②https://images-fe.ssl-images-amazon.com/images/I/41AxdDLw8nL._SL160_.jpg" alt="トンボ鉛筆色鉛筆 36色ロールケース入りミニ削り器付き MJ-CRNQ36CQAAZ" /></a>
<div class="hatena-asin-detail-info">
<p class="hatena-asin-detail-title"><a href="①http://www.amazon.co.jp/exec/obidos/ASIN/B079Q9M8DX/hatena-blog-22/">トンボ鉛筆色鉛筆 36色ロールケース入りミニ削り器付き MJ-CRNQ36CQAAZ</a></p>
<ul>
<li><span class="hatena-asin-detail-label">出版社/メーカー:</span> トンボ(Tombow)</li>
<li><span class="hatena-asin-detail-label">発売日:</span> 2018/02/28</li>
<li><span class="hatena-asin-detail-label">メディア:</span> オフィス用品</li>
<li><a href="③http://d.hatena.ne.jp/asin/B079Q9M8DX/hatena-blog-22" target="_blank">この商品を含むブログを見る</a></li>
</ul>
</div>
<div class="hatena-asin-detail-foot"> </div>
</div>
</div>

①https化された、商品ページに繋がる。
②商品の画像URL
③はてなキーワードの、この商品に関するページ。（HTTP＝非SSL）

①のhttp:～は、https:～に書き換えることで、警告を回避できるようです。（httpsの商品ページに繋がる）
②は変更不要です。
③のhttp:～は、https:～としても、相対パスで記述しても、どちらでも、はてなキーワードの該当ページ（ページのURLはあくまで、http:～）へ繋がります。

問題は古い時期に埋め込んだもので、画像URLがhttpになっているものでした。
これはファイル自体が変わってしまっていて、単純にhttpsと書きなおしても駄目です。
また商品ページにアクセスできない場合もあって、一旦タグを削除してから埋め込み直す必要があるようです。
その上で、①と③のurlを修正する手間が加わるかと思います。
（一括で変更できるサービスもあるようですが…）

Amazonの商品リンクについては、全商品に変更が行き届いておらず（点数が多いからねｗ）、httpのままのページもあります。
その場合は、楽天ショップなど、他のマーケットで代用したり、最悪は掲載しないということで対応します。

YOUTUBEなど

僕はあまり、動画やSNSの埋め込みを使わないので、今のところ問題はありませんでした。
古い記事でYOUTUBEの動画を埋め込みましたが、相対パスでの記載になっていて、書き換える必要がありませんでした。

その他の外部サイト

ここで頭を悩ませています(笑)。

こればっかりは、そのページを管理している人が、SSL化しない限り、どうすることもできないようなのです。（まあそうだよね）

リンクを貼ってしまえば一発なんですが、それができないとなると、僕の中のありったけの日本語力を駆使して、上手に紹介するしかないようです。
場合によっては、記事を丸ごと書きなおすことになるかもしれず、頭が痛いです。

アイキャッチ画像

すっかり忘れていたのがコレです。
はてなブログでは、ありがたいことに、記事内に埋め込まれた画像をアイキャッチとして自動的に設定してくれます。
ところが、今回のように任意で記事を修正した場合、アイキャッチは自動で更新されません。
古い画像のままなんです。
僕のように記事一覧にアイキャッチを表示する形式を採用している場合、古い画像のままだと困ります。
当然、アイキャッチもソースのどこかにタグで埋め込んでいるわけですから、混在コンテンツの対象になります。（アドレスバーの鍵マークでわかる）

というわけで、こいつを手作業で設定し直す必要があります(笑)。地味に面倒ですｗ