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

当ブログではテンプレートに QooQ リスト版を使用しています。

今回、トップページの記事一覧のサムネイル画像がちょっと小さいかも... と思い、画像サイズを大きくしました。

このサムネイル画像のサイズ変更、最初どうやれば良いかがわからず実現するのに手こずったため、どのようにカスタマイズしたかをまとめておきます。CSS で画像サイズを修正するだけだと画像が粗いまま拡大されてしまうので、テンプレートで HTML の修正が必要になります。

※追記（2021/11/4）
現在、テンプレートは JetTheme を使っています。
【Blogger】テンプレートを JetTheme に変えました

記事一覧の画像サイズを大きくしつつ、解像度を保ちたい

QooQ のリスト版ではトップページの記事一覧がリスト形式になっていて、各記事の左端に小さな円形のサムネイル画像が表示されます。

この画像がPCで見ると小さく感じたので、もう少し大きくしようと考えました。が、CSS でサイズを変更したところ、小さな画像が拡大表示されて粗く見えてしまい、画像そのものを大きくすることができませんでした。

画像が粗くならないように、記事一覧の画像サイズを大きくする方法を調べました。

サムネイル画像のサイズ変更方法

ソースコードから以下を検索します。サムネイルの画像 URL を指定する部分です。

<img class='list-item-img' expr:src='data:post.thumbnailUrl'/>

data:post.thumbnailUrlの部分を以下のように置き換えます。

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

* 240 は画像サイズ（自由に変更可）
* 1:1 は画像の幅・高さの比率（自由に変更可。指定しなくても OK）

上記のように指定することで画像 URL が書き換えられ、画像を指定通りにリサイズすることができます。

トップページの画像まわりの CSS も調整します。以下は当サイトの例です。

.list-item-img-box{
    flex-basis: 110px;
}
.list-item-img{
    width: 100px;
    height: 100px;
}

以上で完了です。画像サイズや CSS はお好みで設定してください。

補足：Blogger サムネイル画像の仕様

記事一覧で使用されているサムネイル画像（data:post.thumbnailUrl）は、Blogger 側の仕様で 72px × 72px の正方形にトリミングされるようです。そのため画像サイズを CSS で単純に大きくするだけだと、72px の画像が拡大表示されるだけになり、画質が粗くなってしまいます。

そこで、サムネイル画像をリサイズしたい場合は、画像 URL を次の要領で指定する必要があります。

画像URL：resizeImage(URL, サイズ, 幅・高さの比率)
（例）
<img expr:src='resizeImage(data:post.thumbnailUrl, 1600, 1:1)'/>