[Blogger] 人気の投稿ガジェットでサムネイル画像のサイズを変更する簡単な方法

How To Easily Resize The Blogger Popular Posts Thumbnail Image Size

あれこれ盛り込んだモバイルテンプレートのカスタマイズがなんとなくいい感じに落ち着いてきた矢先、ちょっとした表示不具合の修正で難儀していたら、ふとした弾みで HTML の編集中にすべて消えてしまい（消してしまい）、、しかも "そういうときに限って" のお手本といわんばかりに、テンプレート編集の前にテンプレートのコピーを保存していなかったので、復元できず。。。

まあ、こればかりは悩んでも仕方ないので、先のカスタマイズを始める数ヶ月前に保存したテンプレートのコピーで復元して心機一転、つまり開き直って本家 web version 側のカスタマイズを久々に再開すると、以前からやりたくても中々実現できず志半ばで終わっていたことが、意外なまでに上手く = あっさり簡単にできたので、次の "そういうとき" に備えて、まとめることにしました。

というわけで、そのできたこと、つまり本題の『 Blogger 人気の投稿ガジェットで表示されるサムネイル画像を任意の画像サイズへ変更する』簡単な方法の手順は、次の通りです。

1. [テンプレート > HTML の編集] 画面を開き、次の文字列を検索する。
   

   expr:src='data:post.thumbnail'

2. 1. で検索した文字列を含む img タグの中に次のコードを追加する。
   

   class="resizethumbnail"
   

3. 次の文字列を検索する。
   

   </body>

4. 3. で検索した文字列の前に次のコードを追加する。
   

   <script type='text/javascript'>
    $(document).ready(function() {$('.resizethumbnail').attr('src', function(i, src) {return src.replace( 's72-c', 's160-c' );});});
   </script>
   

   コード中の「s160-c」は、変更後の画像サイズを指定する箇所で、この場合は 160 x 160px の画像へリサイズする例
   
5. [テンプレートを保存] ボタンをクリックする。

ちなみに、サムネイル画像をオリジナルのアスペクト比で表示させたい場合は、上記手順4. で「 s160-c 」を「 s1600 」にするだけです。

以上、Blogger で用意されている基本のガジェット「人気の投稿」に表示されるサムネイル画像のサイズをデフォルトの72 x 72pxから任意の大きさへ自由に変更する簡単な方法でした。

• How To Easily Resize The Blogger Popular Posts Thumbnail Image Size | Tudor Anghelina