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

アフィリエイト広告を利用しています

はてなブログがSSL化(HTTPS化)するまでに準備しておくべきことのアイキャッチ画像

こんばんは。

はてなブログへの接続をすべてHTTPSにできる機能の実装予定と、利用を検討するユーザー様に準備いただきたいこと – はてなブログ開発ブログ

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

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

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

差し替えが必要なコード

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

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

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

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

コードを検索する方法

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

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

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

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

注意事項!!

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

Amazonアフィリエイト

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

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

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

http://ecx.images-amazon.com

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

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

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

https://rcm-fe

楽天アフィリエイト

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

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

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

ついでに…

カエレバご利用者へリンク貼替のお願いとお詫び

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

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:は消してください。

バリューコマース

リンクのURL

http://ck.jp.ap.valuecommerce.com

↓↓↓

//ck.jp.ap.valuecommerce.com

画像のソースURL

http://ad.jp.ap.valuecommerce.com

↓↓↓

//ad.jp.ap.valuecommerce.com

YouTube軽量化

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

YouTubeを埋め込んでも重くならないようにする方法がめっちゃ良かった | SHIROMAG

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のコードを検索してみてください。

他にも、

はてなブログでGoogleにパンくずリストを認識させるカスタマイズ – 太陽がまぶしかったから

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

<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なのは特に問題はないので、後回しで大丈夫です。


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

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

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

追記:作りました。

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

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

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

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