Blogger:人気の投稿ガジェットのサムネイル画像を大きくする

イントロダクション

Blogger の人気の投稿ガジェットでは、投稿内に含まれる画像をサムネイル画像として、各投稿の横に表示させることができます。

人気の投稿：画像のサムネイル表示あり

この時のサムネイルの画像サイズは、縦72ピクセル × 横72ピクセルです。

通常のガジェット自体の設定などで、そのサムネイル画像のサイズを変更することはできません。

そこで、今回は Blogger のテンプレートの HTML を編集して、この画像ファイルの表示サイズを大きくしてみます。

コード

Blogger の設定のテンプレートより、HTML の編集を行います。


テンプレートの HTML より、人気の投稿ガジェットの表示に使われているコードを探し出します。

人気の投稿ガジェットの表示に使われているコードは、

<b:widget id='PopularPosts2' locked='false' title='人気の投稿 - 過去 7 日間' type='PopularPosts'>

から始まり、

</b:widget>

で閉じられる間の部分です。
（title='' の中身は各自が設定した人気の投稿ガジェットのタイトルが入る。）


そのコードを見てみると、

            <!-- (3) Show only thumbnails -->
            <div class='item-thumbnail-only'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            </div>
            <div style='clear: both;'/>

という部分があることが分かります。
コメントで書かれているように、表示の設定として、投稿のタイトルと画像のサムネイルのみ表示させる場合（記事の抜粋は表示しない）にブログページのソースコードとして出力される部分です。


そのコードの中で、

<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>

の部分がサムネイル画像を表示させている部分です。

では、サムネイル画像を大きくするように改造してみましょう。
今回は、サムネイル画像を縦100ピクセル×横100ピクセルのサイズで表示させてみようと思います。


その場合には、上記の img タグを次のように書き換えます。

<img alt='' border='0' height='100px' expr:src='data:post.thumbnail' width='100px'/>

height と width の expr: を削除したのと、属性値に直接サイズである 100px を指定しました。


これでテンプレートを保存して、ブログを表示させてみると、次のようにサムネイルのサイズが大きくなったことが分かります。

変更前 人気の投稿 サムネイル画像のサイズ（72px×72px）

変更後 人気の投稿 サムネイル画像のサイズ（100px×100px）

以上のように、Blogger のテンプレートの HTML を編集し、直接人気の投稿ガジェットのサムネイル画像の表示サイズを指定することで、サムネイルの表示サイズを大きくすることが出来ました。

これで、ブログを見ている人に対して、人気の投稿の各投稿を目立たせることができ、各投稿を見てもらえる可能性が増えるはずです。


しかしながら、この方法の注意事項として、表示サイズを大きくしただけで、サムネイル画像に使われている画像サイズは 72ピクセル × 72ピクセルのままだという点です。

一例として、一つのサムネイル画像の URL を見てみると、

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV4lbYLNzM1Hhrjn5wA-TtzraRiPZmVik5Hgocqku2gOlQzOTMilNX9QCWwUyuvlulUxoHOrtrdq8fhoWXl9NNX1lFg2bw954bOachR2SEA1l7v_tnRtfIbdmwywRq90dEwYHGWOgiuww/s72-c/niconico_fullscreen_url.png

となっています。
URL の途中に、"s72-c" という文字列が入っており、これは縦横72ピクセルに画像を縮小するという意味です。従って、この URL で読み込まれる画像は常に縦横72ピクセルに画像サイズが縮小されています。

"s72-c"という部分についての参考文献：

ウェブに残したもの: picasaWEBアルバムの画像のサイズをURLで指定
http://nokoshitamono.blogspot.jp/2012/10/picasaweburl.html

Blogger で画像の表示サイズを変更する方法 | クリボウの Blogger Tips
http://www.kuribo.info/2008/01/blogger.html

Blogger で画像の表示サイズを変更する方法（改） | クリボウの Blogger Tips
http://www.kuribo.info/2010/10/blogger_10.html

従って、画像の表示サイズを大きくすると、画像によっては引き延ばされたときの画質の劣化が目立つ可能性があります。


では、この s72-c という部分を、s100-c のようにして、縦横72ピクセルに縮小するのではなく、縦横100ピクセルに縮小することはできないのでしょうか？

テンプレートの HTML を見てみると、サムネイル画像の URL を指定する部分は、

expr:src='data:post.thumbnail'

となっています。
これは、data:post.thumbnail という変数に収められたデータ（サムネイル画像の URL）を展開して、src 属性に代入していることを表しています。

従って、サムネイル画像の URL の途中を s72-c から s100-c に変更するようなことは、テンプレートの HTML の修正では行えなさそうです。


一つ、サムネイル画像の URL を変更する方法として考えられるのは、JavaScript を使用して、動的に URL の s72-c を s100-c に変更することです。

しかしながら、この場合には一度縦横72ピクセルの画像が読み込まれてから、縦横100ピクセルの画像が読み込まれることになります。

そのため、JavaScript コードの実装方法によっては、ページ読み込み時の読み込み負荷が増え、ページの読み込みに時間がかかることにつながるので注意が必要です。

まとめ

Blogger のテンプレートの HTML を修正することで、人気の投稿のサムネイル画像の表示サイズを大きくすることが出来ました。

但し、画像のサイズ自体は変わらないので、表示倍率を上げ過ぎると画像によっては画質の劣化が目立ってしまう場合があります。


追記：
人気の投稿のサムネイル画像の表示サイズを指定する方法として、CSSで設定する方法もあるようです。

[Blogger]標準の「人気の投稿」ガジェットのスタイルを自分好みに変更する方法！ - Sunabox
http://www.sunabox.net/2012/08/popularpostscustom.html