Blogger ホームページの要約とサムネイル表示

Bloggerを好みの表示にカスタマイズする。要約とサムネイル編です。

やりたいこと

  • ホーム(他ページも)でアイテムの表示を要約したい
    • テンプレートの要約の不満を改善したい
      • jsを使用して要約している（js不要にしたい）
      • 要約なのに長い(要約をもっと短くしたい)
  • 記事サムネイルを表示したい
    • サムネイル画像がない場合でもサムネイルしたい

やったこと

テンプレートを編集して、要約とサムネイルを表示した。以下に変更後のソースを示す。

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <b:if cond='data:post.snippet'>
      <div class='image thumb' style='float:left;padding:0 1em 0 1em;'>
        <b:if cond='data:post.thumbnailUrl'>
          <img style='width:100px;' expr:src='data:post.thumbnailUrl'/>
          <b:else/>
          <img style='width:100px;' src='サムネイルがない場合のサムネイルの位置'/>
        </b:if>
      </div>
      <data:post.snippet/>
    <b:else/>
      <div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
      <script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
    </b:if>
  </b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <div style='float:right;padding-right:10px;margin-top:10px;font-size:0.8em;'>
      <a class='morer' expr:href='data:post.url'>Read More</a>
    </div>
  </b:if>
</b:if>

実際追加してるのは、上記中の以下のコードです。残りはテンプレートのもともとの処理です。

    <b:if cond='data:post.snippet'>
      <div class='image thumb' style='float:left;padding:0 1em 0 1em;'>
        <b:if cond='data:post.thumbnailUrl'>
          <img style='width:100px;' expr:src='data:post.thumbnailUrl'/>
          <b:else/>
          <img style='width:100px;' src='サムネイルがない場合のサムネイルの位置'/>
        </b:if>
      </div>
      <data:post.snippet/>
    <b:else/>

    </b:if>

結果

結果

要約とサムネイル表示、標準のサムネイルまでできて、JavaScript不要！、ページのロード量も激減です。（サムネイル画像が小さくなって矩形になったのが気になるが…）大満足ですね。

それにしても、なんでBloggerは標準で要約設定がないのかホント不思議です。

参考リンク