【QooQリスト版】記事一覧のサムネイル画像を大きくするカスタマイズ【Blogger】

Bloggerのテンプレート「QooQリスト版」ではトップページなどのブログ記事一覧で72*72のサムネイル画像が表示されます。この画像を大きくするためのBlogger独自タグ変更方法と、cssの修正例を紹介します。

HTML変更内容

img class='list-item-img' expr:src='data:post.thumbnailUrl'となっている箇所を変更するので、HTML編集でこのコードを検索してください。

テーマのカスタマイズボタンの右側にある▼をクリックすることでHTMLの編集が行えます。必ずバックアップを取得し、自己責任で修正をお願いいたします。

変更前コードの解説

▼ 変更前コード

<b:if cond='data:post.thumbnailUrl'>
  <div class='list-item-img-box'>
    <a expr:href='data:post.url'>
      <img class='list-item-img' expr:src='data:post.thumbnailUrl' height='72' width='72'/>
    </a>
  </div>
</b:if>

data:post.thumbnailUrlには、72*72でトリミングされたサムネイルのURLが格納されています。cssのみで画像のサイズを変えると画像が荒くなってしまうので、新たに指定サイズでトリミングするように変更します。

変更後コードの解説

▼ HTML変更例

<b:if cond='data:post.firstImageUrl'>
  <div class='list-item-img-box'>
    <a expr:href='data:post.url'>
      <img expr:alt='data:post.title' class='list-item-img' expr:src='resizeImage(data:post.firstImageUrl, 240, "1:1")' height='120' width='120' />
    </a>
  </div>
</b:if>

このコードではresizeImage関数を使って、投稿の一番始めの画像を横幅240px、縦横比1:1（横：縦）でトリミングし、120*120で表示しています。数字は好みに変えてください。画像を綺麗に表示するために倍のサイズでトリミングしたサムネイルを縮小表示していますが、データ容量を減らしたい方は表示するサイズでトリミングしてください。

横長の画像にしたい場合は、16:9（YouTube動画）や1.91:1（Xのsummary_large_image）、4:3（コンデジで撮った写真）などの縦横比で設定すると綺麗に見えると思います。

cssの変更内容

cssにも画像のサイズを指定している箇所があるので、こちらも変更します。list-item-img-boxやlist-item-imgの設定をしているコードを探し、72が指定されている箇所を好みのサイズに変更します。widthが横幅でheightが高さです。

▼ 変更前css

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

▼ css変更例

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

▼ビフォーアフター画像です。（画像を丸くする設定も削除しています。）

スマホ用の設定

スマホで見たときの画像サイズを指定する場合は、次のように@mediaを使います。元々のcssのlist-item-imgの少し下に@media ( max-width : 480px )というコードがあると思うので、その中に追記すると良いかと思います。

※元々設定されているコードを消してしまわないように注意してください。

@media ( max-width : 480px ) {
    .list-item-img-box{
        flex-basis: 100px;
    }
    .list-item-img{
        width: 100px;
        height: 100px;
    }
}

PCで見たときは横長画像で、スマホで見たときは正方形にしても良いかと思います。元々のcssでサムネイル画像に「object-fit: cover;」が設定されているので、元画像と異なる縦横比で指定しても良い感じにトリミングしてくれます。