Spoon & Fork

「人気の投稿」でサムネイル画像のアスペクト比を変更する

Category:

「人気の投稿」とはBloggerで閲覧数の多い記事をリスト表示してくれるパーツのことです。記事タイトルと72x72pxのサムネイル画像、記事のスニペットが表示できます。

このサムネイルが大きさはちょうどいいけど、このブログでは微妙な位置でトリミングされるのが気になっていました。とりあえずアスペクト比を変更できたのでメモしておきます。

今回はサムネイル画像のアスペクト比をデフォルトの 1:1 から 4:3 に変えてみます。

前提

  • 管理画面の「レイアウト」から「人気の投稿」を追加済み
  • widget? gadget? はバージョン 2

編集箇所

管理画面から「テーマ -> HTMLを編集」で編集画面を開きます。

編集画面上で ctrl + F して「snippetedPostThumbnail」をページ内検索します。位置的には<b:widget id='PopularPosts1'...の中の下の方。

<b:includable id='snippetedPostThumbnail'>
  <div class='item-thumbnail'>
    <a expr:href='data:post.url'>
      <b:include data='{
        image: data:post.featuredImage,
        imageSizes: [72, 144],
        imageRatio: &quot;1:1&quot;,
        sourceSizes: &quot;72px&quot;
      }' name='responsiveImage'/>
    </a>
  </div>
</b:includable>

あとはこの中のimageRatioを好きな比率に書き換えるだけです。1:1を4:3に変えてプレビューするとこうなります。

サムネイル画像のアスペクト比ビフォーアフター

分かりづらいですが、個人的にはいい感じに収まりました。画像のサイズ自体もここで変更できそうです。