【bloggerカスタマイズ】QooQリスト版のサムネ画像のサイズを変更する方法

【bloggerカスタマイズ】QooQリスト版のサムネ画像のサイズを変更する方法

bloggerテンプレートのQooQを利用しています↓


リスト版を使用していますが、トップページの記事一覧ページでサムネイルの画像が少し小さいなと思っていました

もう少し大きくして見やすくしようと調べていたらカスタマイズする方法がありましたので紹介します




リモスキさんのブログを参考にしました

カスタマイズ方法

bloggerカスタマイズページ　＞　テーマ　＞　HTMLの編集

HTMLの編集をしますので念のためバックアップをしましょう

編集画面に移ったら
「Ctrl」＋「F」で検索ボックスを出し「img class='list-item-img'」と検索



<img class='list-item-img'>が黄色くハイライトされます


ハイライトされた以下のコードを置き換えます

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

置き換えたコードの
300は画像サイズ
1:2は画像の比率です
お好みの大きさに設定可能です

表示サイズを調節する

サムネに表示するサイズを調節します

再度「Ctrl」＋「F」で検索ボックスを出し「list-item-img」と検索
以下のような項目が表示されますので編集します


私のブログではこんな感じに編集しました

.list-item-img-box{
flex-shrink: 0;
flex-basis: 120px;
}
.list-item-img{
display: block;
border-radius: 0%;
width: 120px;
height: 120px;
object-fit: contain;

プレビューを見ながら好きなサイズに調節しましょう

これでデフォルトのものよりサムネイルの画像が大きくなったと思います

画像のトリミングについて