Bloggerでアイキャッチ(サムネイル)のサイズを変更する

去年末から Google が無料提供しているブログサービス「Blogger」でサブブログを始めたわけですが。

新たに WordPress の環境を作るのが面倒だったためこのサービスを利用してみることにしました。

カスタマイズ性が高く一切広告がないのが魅力とのことで、確かにカスタマイズ性は高いのですが、すごく独特かつ日本語の情報が少ないため結構苦労します。

そんな中で自分が今回苦労したのがトップページの記事一覧に表示したアイキャッチ(サムネイル)のサイズ変更。

記事内の一番初めに埋め込まれた画像のサムネイルを取得し表示するには

<img expr:src='data:post.thumbnailUrl'/>

という制御構文を使用します。

しかし、これをそのまま使用するとサイズが縦横 72px づつしかありません。

サイズを変更するには「resizeImage」という画像をリサイズするための関数を使用します。

指定する引数は下記の様になっています。

resizeImage(イメージURL, 新しい画像の横幅, 画像のアスペクト比)

例えば、縦横 120px の正方形なサムネイルを表示したい場合は

resizeImage(data:post.thumbnailUrl, 120, "1:1")

の様になります。

第3の引数「画像のアスペクト比」は省略可能で、省略した場合はオリジナル画像のアスペクト比が適用されるようです。

ちなみに、サムネイルを取得するものとして「data:post.firstImageUrl」というものがありますが、こちらは記事内の一番初めに埋め込まれた画像をオリジナルサイズで取得するものの様です。

こちらも同様の方法で好きなサイズに変更することができます。

コメントを残す