【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)'/>
  • URL:変更したい画像の元URL
  • サイズ:変更したいサイズ
  • 幅・高さの比率:指定したい比率(1:1、2:1、4:3など。オプションなので入力しなくてもOK。)

今回は、記事一覧のサムネイル画像が class="list-item-img" で記載されていることを確認し、対応する HTML、CSS を書き換えて完了となりました。

他にも data:post.thumbnailUrl で指定されている画像のサイズを変更したい場合は、同様の方法でできると思います。

▼ こちらの記事もどうぞ。

【Blogger】おすすめテンプレート QooQ カスタマイズ参考サイト一覧

【Blogger】おすすめテンプレート QooQ カスタマイズ参考サイト一覧

Blogger のテンプレート QooQ をカスタマイズする際、参考にさせていただいたサイトをまとめました。

【Blogger】JetTheme カスタマイズ方法一覧

【Blogger】JetTheme カスタマイズ方法一覧

JetTheme を導入するにあたって、いくつかカスタマイズを行いました。 当ブログでのカスタマイズ内容・修正方法をこちらで紹介していきたいと思います。

こちらの記事もよく読まれています
ブログに画像を載せるときに知っておきたいこと

ブログに画像を載せるときに知っておきたいこと

今回は、画像をブログに載せるときの注意点を紹介します。 画像を適切に載せることでページ表示速度の向上が見込めますし、SEO 効果も期待できます。

記事へのコメント・ご質問は こちら まで
NEXT PREV