はてなブログにアップロードしたサムネイル画像は圧縮処理されてトップページに表示されます。
この圧縮処理の性能がいまいちなので、処理前の元の画像を表示させる方法を説明します。
圧縮処理
JPGE画像の場合には、あまり違いが分からないかも知れませんが、256色に圧縮したPNGなどだと顕著に違いが表れます。
例えば、先日のエントリーに使った以下のサムネイル画像をご覧ください。


拡大すると分かりやすいのですが、特に「ONLINE」という文字付近がボヤッと表示されます。
このサムネイル表示を処理前の元の画像に切り替えます。
コード
以下のコードをデザイン設定のフッタへ貼り付ければ動作します。
HTTPSのURLを前提にしているので、HTTPの場合はHTTPSの部分を変更してください。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> var element = document.getElementsByClassName('entry-thumb'); for (var index = 0; index < element.length; index++) { var imageUrl = element[index].style.backgroundImage.replace(/"|'|\)/g, '').split('https'); if (imageUrl.length == 3) { var newUrl = 'https' + imageUrl[2].replace('%3A', ':').replace(/%2F/g, '\/'); element[index].style.backgroundImage = 'url(' + newUrl + ')'; } } </script>
以上、はてなブログのサムネイル画像を圧縮前の元の画像に変更する方法についてでした。