Blogger ホームページの要約とサムネイル表示
Bloggerを好みの表示にカスタマイズする。要約とサムネイル編です。
やりたいこと
- ホーム(他ページも)でアイテムの表示を要約したい
- テンプレートの要約の不満を改善したい
- jsを使用して要約している(js不要にしたい)
- 要約なのに長い(要約をもっと短くしたい)
- テンプレートの要約の不満を改善したい
- 記事サムネイルを表示したい
- サムネイル画像がない場合でもサムネイルしたい
やったこと
テンプレートを編集して、要約とサムネイルを表示した。以下に変更後のソースを示す。
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<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='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
</b:if>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<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は標準で要約設定がないのかホント不思議です。