bloggerは、ホーム画面でも投稿記事の全文が表示されます。
できれば、ホームでは、本文は100文字だけ表示して、
ReadMore とか もっと読む をクリックして、全文を読めるようにしたい。
そんな衝動も駆られました。
今回みたいな長文を書くと、その分だけ表示が遅くなるのは残念なので・・・。
以前は、javascriptでこのような機能を実装可能でした。
今も可能ですが、もっと簡単に行う方法があるようです。
それが、data:post.snippet です。
本文の140文字くらいを、要約として表示するもののようです。
詳細は不明。
Nasuさん、Amanda Kennedyさんの下記の記事を参考にさせていただきました。
■Blogger 自動ReadMoreを使いつつページサイズを改善する方法
http://nasunoblog.blogspot.jp/2012/03/blogger-readmore.html
■Easy Post Summaries and Thumbnails for Blogger Blogs - No JavaScript Required!
http://www.bloggerbuster.com/2011/03/easy-post-summaries-and-thumbnails-for.html
方法は、全文表示の命令<data:post.body/>を、要約表示の命令<data:post.snippet/>に
変更するだけです。
でも、投稿を単独でみるときは、全文表示にしたいので、場合分けが必要になります。
また、bloggerのテンプレートによって、細かい変更が必要になってくるみたいです。
必ずしも、コピペだけで正常に動作するわけでは無いので、ご注意下さい。
で、このブログでやってみました。
１）まずは<data:post.body/>を探す！
テンプレートのHTMLの編集をクリック。
あれ？何か画面が大幅に変更されている！何とかやってみよう。
Ctrl+Fで検索すると、3箇所に<data:post.body/>がありました。
どれなの？
２）該当の<data:post.body/>を調べる。
1300、1428、1433行目のそれぞれをコメントアウトして動作を確かめてみる。
1300：何も変わらない？？？
1428：本文が消えた！タイトルのみ。
1433：何も変わらない？？？
たぶん、1428行目が該当のものだと判断します。
３）コードを入れ替える
<data:post.body/>をコメントアウトし、Amanda Kennedyさんのコードに変更。
※2015/02/20にのコードの条件変更
前の条件：投稿以外のページ => 新しい条件：トップページのみ
<b:if cond='data:blog.pageType != "item"'> => <b:if cond='data:blog.url == data:blog.homepageUrl'>
条件についての参考リンク
Blogger: Globally conditional data tags for all page types oliverdoetsch様
https://gist.github.com/oliverdoetsch/153334604fdda9fe9191
GoogleブログBlogger： 特定ページのみにhtmlソースコードを記述する方法 リーマン様
http://salaryman-life.blogspot.jp/2010/05/googleblogger-html.html
<!-- begin snippet -->
<b:if cond='data:blog.url == data:blog.homepageUrl'> <!-- 15/02/20トップページに変更。 -->
<b:if cond='data:post.snippet'>
<b:if cond='data:post.thumbnailUrl'>
<div class='Image thumb'>
<img expr:src='data:post.thumbnailUrl'/>
</div>
</b:if>
<data:post.snippet/>
<b:if cond='data:post.jumpLink != data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>
<!-- end snippet -->
４）ブログを見て確認する。
できた！下記のような見え方になります。
data:post.thumbnailUrl の画像が何か小さすぎる！
・・・と感じたので、Nasuさんのスクリプトを追加します。
参照元がPicasaアルバムなので、画像URLの「s72-c」の箇所を変更すれば、
サイズ変更が可能です。
５）画像のスクリプトを追加
Nasuさんのをほぼそのまま。
var image_sizeをテキストにして、PicasaのAPIを使うようにしました。
下記の投稿のように、s200、w300、s300-c とかを指定すると、表示サイズを指定できます。
http://nokoshitamono.blogspot.jp/2012/10/picasaweburl.html
<!-- begin snippet -->
<b:if cond='data:blog.url == data:blog.homepageUrl'> <!-- 15/02/20トップページに変更。 -->
<b:if cond='data:post.snippet'>
<b:if cond='data:post.thumbnailUrl'>
<div class='Image thumb'>
<!-- begin image-size dcript -->
<script type='text/javascript'>
//<![CDATA[
function bp_thumbnail_resize(image_url,post_title)
{
var image_size="s200";
var show_default_thumbnail=true;
var default_thumbnail='';
if(show_default_thumbnail == true && image_url == "") image_url= default_thumbnail;
image_tag='<img src="'+image_url.replace('/s72-c/','/'+image_size+'/')+'" class="postthumb" alt="'+post_title+'"/>';
if(image_url!="") return image_tag; else return "";
}
//]]>
</script>
<script type='text/javascript'>
document.write(bp_thumbnail_resize("<data:post.thumbnailUrl/>","<data:post.title/>"));
</script>
<!-- end image-size dcript -->
</div>
</b:if>
<data:post.snippet/>
<b:if cond='data:post.jumpLink != data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>
<!-- end snippet -->
６）再度確認。
それっぽくできた！
でもこれって、画像の横に文章を置きたいな、と思う。
７）cssの.thumbを追加
文章を画像の横に置くべく、Amanda KennedyさんのCSSを追加
.thumb img {
float: left;
margin: 0 10px 10px 0;
}
<b:skin>は畳まれているので、クリックして展開する。
上記の.thumbのコードを<b:skin>の直下に追加。
８）また確認してみる。
できた！
こんな感じで、画像の横に文章を置くと、コンパクトでいいです！
要約文だけなので、ロード時間も早くなりました。
イイですね！便利！
要約の文字数を設定できればもっと可用性が上がりそうですね。
現在は、snippetタグの解説をGoogleがしてくれていないので、残念。
http://support.google.com/blogger/bin/answer.py?hl=en&answer=47270
というか、bloggerの設定画面に「ホームでは要約を表示する」機能を実装して欲しい。
Googleのサービスは高機能だけど、プログラミングを理解できない人には
ちょっと難しいと思います。
でも、便利！
