はてなブログがSSL化(HTTPS化)するまでに準備しておくべきこと

スポンサードリンク

f:id:shiromatakumi:20170802212439j:plain

こんばんは。

staff.hatenablog.com

はてなブログがSSL化を予定しているようです。

SSL/TLSについてはこちらの記事が分かりやすいので、参考にしてください。

SSL/TLSってなんだろう?|SSL/TLS-総合解説サイト

差し替えが必要なコード

SSL化に伴い、いくつかのコードを修正する必要があります。

専門的な話は抜きにして、サクッと対処法を書いておきます。

 

追記:置換ツールを作りました。

 

コードを検索する方法

サイドバーに検索ボックスがあると思うので、該当するコードを検索してください。

サイドバーに検索ボックスがないブログは設置してください。ユーザビリティ的にもあった方が良いでしょう。

「デザイン」→「カスタマイズ」→「サイドバー」から設置できます。

検索ボックスから下で紹介しているコードを検索して、指定のコードに差し替えてください。

注意事項!!

  • 差し替え後はプレビューで表示確認してください!!
  • 不安な人はコードを書き換えるのではなく、再度コードを取得して丸々差し替えてください。
  • カスタマイズは自己責任で!

 

スポンサーリンク

Amazonアフィリエイト

おそらくカエレバ・ヨメレバでリンクを貼っていると思います。

AmazonがSSLに対応したのが2016年12月。それ以前の画像はhttpです。

以下のコードを検索ボックスで検索して差し替えてください。コードを書き換えるのではなく、再度カエレバ・ヨメレバでコードを取得するのが安心かもです。一応、書き換え方も載せておきます。

http://ecx.images-amazon.com

↓↓↓ヒットした記事の中にあるコードを書き換え

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

 

楽天アフィリエイト

こちらもカエレバ・ヨメレバ使っている人が多いでしょう。

以下のコードを検索ボックスで検索して差し替えてください。

src="http://hbb.afl.rakuten.co.jp

↓↓↓ヒットした記事の中にあるコードを書き換え

src="https://hbb.afl.rakuten.co.jp

 

サムネイル画像のURL。

http://thumbnail.image.rakuten.co.jp

↓↓↓ヒットした記事の中にあるコードを書き換え

https://thumbnail.image.rakuten.co.jp

 

ついでに…

www.wakatta-blog.com

以前、こういう事件があったので、ついでにチェックしておきましょう。

 

A8.net

A8がSSLに対応したのが2016年7月。それ以前のは差し替えが必要です。

以下のコードを検索ボックスで検索して差し替えてください。

http://px.a8

↓↓↓ヒットした記事の中にあるコードを書き換え

https://px.a8

 

以下は計測用の画像のURL。

http://www1

↓↓↓ヒットした記事の中にあるコードを書き換え

https://www1

 

以下はバナー画像のURL。

http://www2

↓↓↓ヒットした記事の中にあるコードを書き換え

https://www2

 

もしもアフィリエイト

もしもアフィリエイトがSSLに対応したのが2016年11月。それ以前の記事は該当する可能性があります。

以下のコードを検索ボックスで検索して差し替えてください。

結構直すところが多いので、不安ならコードを書き換えるのではなく、もしもアフィリエイトのコードを丸々差し替えても良いでしょう。その方が安心かも。

http://c.af.moshimo.com

↓↓↓ヒットした記事の中にあるコードを書き換え

//af.moshimo.com

 

上記コードの近くに以下のコードがあったら差し替え。

src="http://image.moshimo.com

↓↓↓

src="//image.moshimo.com

 

あと、これも。

http://i.af.moshimo.com

↓↓↓

//i.moshimo.com

http:は消してください。

 

YouTube軽量化

本当にごめん。これ使っている人差し替えてください。

www.notitle-weblog.com

data-video="http://www.youtube.com

↓↓↓ヒットした記事の中にあるコードを書き換え

data-video="https://www.youtube.com

 

同じ記事にある以下のコードも書き換えてください。

http://img.youtube.com

↓↓↓

https://img.youtube.com

 

はてなのカスタマイズ部分

ヘッダー、フッター、記事下、記事上にあるコードにhttpがあったらhttpsに変えてください。

例えば、ゆきひーシェアボタンのこれとか、

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

↓↓↓

<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script>

 

もしくは、

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.3.min.js"></script>

↓↓↓

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.3.min.js"></script>

jQueryを読み込んでいる箇所はhttpsにしてください。

 

あんまりいないと思いますが、記事内にjQueryを埋め込んでいる人もいるかもしれないので、記事内でも上記jQueryのコードを検索してみてください。

 

他にも、

www.du-soleil.com

こちらの記事にあるパンくずリストを使っている人は、

<script src="http://bulldra.github.io/commons.js" charset="utf-8"></script>
<script src="http://bulldra.github.io/breadcrumb.js" charset="utf-8"></script>

↓↓↓

<script src="https://bulldra.github.io/commons.js" charset="utf-8"></script>
<script src="https://bulldra.github.io/breadcrumb.js" charset="utf-8"></script>

 

httpsに書き換えては行けない部分

リンク先がhttpsに対応していない場合、httpsでリンクを貼るとリンク切れになります。

はてなブログがSSL化するまで、内部リンクはhttpのままにしてください。

リンク先がhttpなのは特に問題はないので、後回しで大丈夫です。

 


 

これが全てではないですが、やっておくと後々だいぶ楽になると思います。

また必要な箇所が見つかったら追記しておきます。

面倒だね。なんか便利なツールがあれば良いんだけど。

 

追記:作りました。

はてなブログ用の一括置換ツールを作りました - NO TITLE

 

もしこの記事に記述ミスなどがあったら教えてください。

 

他にもこんな記事書いてます。

必見!はてなブログのカスタマイズを一気に紹介する - NO TITLE

fin--