bloggerのサムネイル画像の画質が粗く、ぼやけてしまう件【解決!】

2021年7月11日日曜日


ああ、やっとできた!



これまでブログのトップページの記事一覧のサムネイルが、どうも画像が粗くて困っていました。



なんかギザギザ、ぼやぼや…(^^;



bloggerでは、ラムネグ様の「Tokyo」というテンプレートを使わせて頂いているのですが、私は HTML や CSS の知識は全然なく、どこをどう直せば画質が良くなるのか、ずっと分かりませんでした。

が、本日ようやく解決したので、誰かのお役に立てればと思うので、書き残しておこうと思います。

ただ私は知識がないので、あっていない部分ももしかしたらあるかもしれません。そこはすみませんがご了承ください。



さて、まず 、bloggerの「テーマ」から、テンプレートの編集をしていきます。

こういう編集をする場合、まずはバックアップをとるようにとのことなので、「カスタマイズ」の右の▼ボタンから「バックアップ」を選択して、まずバックアップをとってください。








その後、「カスタマイズ」の右の▼ボタンから、「HTML の編集」を開きます。(上の画像の④)


そして、これは人によってもしかしたら違うかもしれないのですが、1471行目に、こういった部分があります。

(※もし1471行にこれがなくても、たぶんそう離れていないところに同じ部分があると思うので、この辺りの数行を探してみてください)


<img expr:src='data:post.thumbnailUrl'/>


こちらを、下記のように変更します。


<img expr:src='resizeImage(data:post.thumbnailUrl, 240, &quot;1:1&quot;)'/>



(こちらのサイトを参考にさせていただきました。

本当にありがとうございます!m(_ _)m


【Blogger】QooQリスト版 トップページ記事一覧のサムネイル画像サイズを変更する方法

https://www.limosuki.com/2020/01/blogger-qooq-photosize.html)



私の場合、画像サイズは上記のサイト様で書かれているのと同じ240にしました。くっきりとはいかないまでも、以前よりかなり良くなっています。


パソコンで見る場合は、もっと数値を大きくした方がくっきりした画像になるかもしれませんが、あんまり画像が大きいとページが重くなるし、スマホで見る方も多いと思うので、それならそんなに大きな画像サイズのサムネイルでなくてもいいなと思い、このくらいの数値にしてみました。




はー、これでめちゃめちゃすっきりしました!!笑


bloggerでサムネイルの画質の粗さに困っていらっしゃる方がいらしたら、ご参考になれば幸いです!(^o^)