Dragon Island

Dragon Island

日々是修行。

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

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

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

そんなわけで備忘録。

過去記事リンク

↓こういうの。

dragonisland.hatenablog.com

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

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

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

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

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

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

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

Amazonの商品リンク

↓こういうの。

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

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

 

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

YOUTUBEなど

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

その他の外部サイト

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

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

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

アイキャッチ画像

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

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

まとめ

そんなわけで、それぞれ対処の仕方が異なるので、混乱しないようにまとめてみました。

技術系記事を流し読みしてなんとなく分かったつもりでいましたが、全然わかっていなかったわけですね。
実際やって初めて理解することってあるよね!

ここに書いたものより、もっといい方法があるかもしれませんが、僕の頭ではこれが精一杯でした。


TOP