普段、よくブログに写真をあげているのですが、クリックして拡大しない限りちょっとボケているのが、長い間めちゃくちゃ気になっていました。

これって...ちょちょいとコード書き換えたらなんとかなるんでないの?(๑╹ω╹๑ )

ということで、Let's 改良です。



写真のぼやけを改良する


レイアウトから[HTML / JavaScript] ガジェットを追加し、以下のコードを貼り付けます。
タイトルは空欄でOKです。



何をしているのか

そもそもなぜ画像がぼやけているかというと、表示されている画像の解像度が低いからです。

画像のURL、新しいものには/w300-h400/の形式のパスが、
古いもの(2019年くらいより前?)には、/s320/という形式のパスが含まれているのですが、これが画像の解像度に当たります。

ということで、これを正規表現を使って取得して、後からJSで書き換えて、s1600という大きなサイズにしています

これにより、ぼやけがなくなります!

※ただし、後から書き換えているので、画像読み込みが2回発生し、ロードがわずかに重くなるというデメリットもあります。
SEO的にはちょっと良くないかも...





今回は、.post-body.post-contentというクラスがついている、つまり投稿のメインページのimgを取得していますが、

同じ原理で、サムネイルや固定ページの画像も取得して、書き換えることができます(URLの画像解像度指定サイズがどうなっているかを見て、適宜正規表現を書き換えてください)。



結果

Before / Afterをご覧ください。

ぼやけもにじみもなく読めるようになりました。

Bloggerの投稿写真のぼやけ・にじみを改善する前
Before

Bloggerの投稿写真のぼやけ・にじみ改善後
After




Bloggerの投稿写真のぼやけ・にじみを改善する前
Before

Bloggerの投稿写真のぼやけ・にじみ改善後
After



古い記事でも問題なく改善されていました。

文字も格段に読みやすいぞ!!

Bloggerの投稿写真のぼやけ・にじみを改善する前
Before

Bloggerの投稿写真のぼやけ・にじみ改善後
After

Bloggerの投稿写真のぼやけ・にじみを改善する前
Before

Bloggerの投稿写真のぼやけ・にじみ改善後
After


まとめ


ということで、長いこと気になっていたBloggerの写真のぼやけを、いい感じに直せたよ、というお話でした。

やったね!٩( 'ω' )و