Blogger:人気の投稿ガジェットで画像のサムネイルが無い場合には指定した画像を表示する

イントロダクション

Blogger の人気の投稿ガジェットを使用すると、人気のある（アクセスの多い）投稿の一覧を表示させることができます。

なお、人気の投稿ガジェットの表示のオプションで、画像のサムネイルを人気の投稿一覧のそれぞれの投稿の隣に表示させるように指定することができます。

この時に、投稿のサムネイルとして使用される画像は、その投稿の本文中に挿入されている画像です。従って、本文中に画像が使われていない投稿の場合には、サムネイル画像は表示されません。

すると、以下の画像のように、サムネイルがある投稿と、サムネイルの無い投稿とで異なった表示になってしまいます。

人気の投稿：画像のサムネイル表示あり
画像のサムネイルのある投稿と、画像のサムネイルの無い投稿で、
タイトルの表示開始位置や項目の高さなどが異なっている。

そこで、画像のサムネイルが無い場合には、こちら側で指定した画像を表示させ、人気の投稿ガジェットのすべての記事にサムネイルが表示されるようにします。

今回は、画像のサムネイルが無い場合には、以下の画像を表示させます。

投稿にサムネイルが無い場合に、代わりに表示する画像

コード

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;'/>

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

<b:if cond='data:post.thumbnail'>という部分が示すように、サムネイル用の画像がある場合には、そのタグで囲まれた中身であるサムネイル画像の出力用の HTML コードがブログに出力されます。

従って、サムネイル画像が無い場合には、

<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>

という投稿のタイトルのみがブログに出力されます。


そこで、画像のサムネイルが無い場合には、こちらで指定した画像を表示するようにするため、以下のようにコードを修正します。

            <!-- (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:else/>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' src='～画像のURL～' 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;'/>

なお、'～画像のURL～'の部分には、各自のブログで用意した画像を指定してください。


以上の修正を加えたうえで、テンプレートを保存してブログを表示してみると、以下のように、人気の投稿ガジェットで画像のサムネイルが無い場合には、指定した画像が表示されるようになります。

人気の投稿：サムネイルの無い投稿に、指定したサムネイルを表示した

まとめ

以上の手順でコードを修正することで、人気の投稿ガジェットで画像のサムネイルが無い場合には、指定した画像を表示するようにすることが出来ました。


今回は、人気の投稿ガジェットの設定として画像のサムネイルのみにチェックが入っている場合について説明しました。

抜粋にチェックが入っている場合には、上記の修正ではサムネイルが無い投稿に指定した画像を表示することはできません。但し、今回の内容を応用すればその場合にも対応することが可能です。