ごめんなさい、カード型にするカスタマイズにバグがあったみたい。アプデしたのでご確認ください

こんにちは、つばさ（@tsubasa123）です。

えーっと、先日公開したカスタマイズコードに不備があったようでして、ご迷惑をお掛けしました。修正・改良版を作成しましたので、私のコードをご利用いただけた方はこちらに差し替えていただけますようよろしくお願いいたします。

問題点は

EdgeとiPad（サファリかな？）でアイキャッチ画像が表示されないってバグがあったみたいでして。

こんな感じです、スッカスカですね。お恥ずかしい限りです。

修正しますた

ごめんなさい、修正しました。修正ついでにちょっとだけ高速化を狙いました。jQueryの利用を止めて、ドキュメントの読み込みを待たないようにしています。これでアイキャッチ画像のちらつきを幾分か抑えることができるようになったと思います。

今回のコードは「デザイン > カスタマイズ > フッタ」に入れるようしてください。「ヘッダ」では正常に動作しませんのでお気をつけあそばせ。

if (! document.URL.match("/archive")) {
[].forEach.call(document.querySelectorAll('.entry-thumb'), function(n) {
let img = n.style.backgroundImage;
img = img.substring(4, img.length - 1).replace(/"/g, '');
n.style.backgroundImage = 'url(' + img.split('/').pop().replace('%3A', ':').replace(/%2F/g, '/') + ')';
});
}

修正した、と言いましたがiPad（サファリかな？）での確認ができていない状態です。持ってないんです、すみません。今回の修正コードはChromeとEdge、IEの最新版で動作を確認しています。iPad（サファリかな？）をお持ちの方、まだ問題があるようでしたらそっと教えていただけると助かります。ご協力のほど、よろしくお願いいたします。

おまけ

カスタマイザーさんのために今回のバグの原因を共有しておきますと、

let img = $(this).css('background-image');
console.log(img);
// Chromeの場合
// url("https://cdn.image.st-hatena.com/image/square/50809ab2401cc90d37cfb198b6cc76905ea59620/backend=imagemagick;height=120;version=1;width=120/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Ft%2Ftsubasa123%2F20170423%2F20170423192841.jpg")
// Edgeの場合
// url(https://cdn.image.st-hatena.com/image/square/50809ab2401cc90d37cfb198b6cc76905ea59620/backend=imagemagick;height=120;version=1;width=120/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Ft%2Ftsubasa123%2F20170423%2F20170423192841.jpg)

この部分、jQueryで背景画像のパスを取得していたんですが、どうも「”」の有無で差があるようでして。

• jquery-1.12.3.min.js
• jquery-2.2.3.min.js
• jquery-3.1.1.min.js

メジャーバージョンは3つとも試してみましたがどれも同じ結果になりました。あれ？これってjQueryのバグ？

ちなみに、IE11はといいますと、Edgeと同じ動きをすると思いきや、Chromeと同じ動きをしました。ん？Edgeのバグ？

さいごに

まぁ、なにはともあれ、私のコードに不備があったことに変わりはありません。改めましてご迷惑をお掛けし申し訳ございませんでした。まだまだ実力不足です。

とはいえ、コードは書かなければ上達しないというのが私の考え。はてなブログのカスタマイズはなかなかいい勉強の機会でして。これからも役に立ったりおもしろいと思っていただけるようなコードをお届けする所存です。どうぞ、お付き合いのほどよろしくお願いいたします。

あれですね、バグフィックスの記事で謝ると重たいですね。えーっと、反省はしてるけどこれからもおもしろいコード書くよ、iPad（サファリかな？）で確認できないけど興味ある人はこれからもよろしくね！ってことです。いや、ほんとすいませんでした。

ではでは、最後までお付き合いいただきありがとうございました。