bloggerで投稿の要約（snippet）を表示して、readmoreリンクをつける

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(&quot;<data:post.thumbnailUrl/>&quot;,&quot;<data:post.title/>&quot;));
      </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のサービスは高機能だけど、プログラミングを理解できない人には
ちょっと難しいと思います。
でも、便利！