Search

2013/04/12

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のテンプレートによって、細かい変更が必要になってくるみたいです。
必ずしも、コピペだけで正常に動作するわけでは無いので、ご注意下さい。



で、このブログでやってみました。
1)まずは<data:post.body/>を探す!
テンプレートのHTMLの編集をクリック。
あれ?何か画面が大幅に変更されている!何とかやってみよう。
Ctrl+Fで検索すると、3箇所に<data:post.body/>がありました。
どれなの?

2)該当の<data:post.body/>を調べる。
1300、1428、1433行目のそれぞれをコメントアウトして動作を確かめてみる。
1300:何も変わらない???
1428:本文が消えた!タイトルのみ。
1433:何も変わらない???
たぶん、1428行目が該当のものだと判断します。

3)コードを入れ替える
<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 -->



4)ブログを見て確認する。
できた!下記のような見え方になります。
data:post.thumbnailUrl の画像が何か小さすぎる!
・・・と感じたので、Nasuさんのスクリプトを追加します。
参照元がPicasaアルバムなので、画像URLの「s72-c」の箇所を変更すれば、
サイズ変更が可能です。


5)画像のスクリプトを追加
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 -->


6)再度確認。
それっぽくできた!
でもこれって、画像の横に文章を置きたいな、と思う。

7)cssの.thumbを追加
文章を画像の横に置くべく、Amanda KennedyさんのCSSを追加


.thumb img {
  float: left;
  margin: 0 10px 10px 0;
}
<b:skin>は畳まれているので、クリックして展開する。
上記の.thumbのコードを<b:skin>の直下に追加。

8)また確認してみる。
できた!
こんな感じで、画像の横に文章を置くと、コンパクトでいいです!
要約文だけなので、ロード時間も早くなりました。
イイですね!便利!
要約の文字数を設定できればもっと可用性が上がりそうですね。
現在は、snippetタグの解説をGoogleがしてくれていないので、残念。
http://support.google.com/blogger/bin/answer.py?hl=en&answer=47270


というか、bloggerの設定画面に「ホームでは要約を表示する」機能を実装して欲しい。
Googleのサービスは高機能だけど、プログラミングを理解できない人には
ちょっと難しいと思います。
でも、便利!

6 件のコメント:

  1. 参考になりました。ありがとうございます!

    返信削除
    返信
    1. お役に立てて嬉しいです!
      少しずるつ便利になるbloggerに期待しています!

      削除
  2. 参考にさせていただきました!ありがとうございます。
    トップページはばっちりできましたが、ページにも同じように反映されてしまい、
    ページ機能は以前の状態(1ページのまま)にしたいのですが、
    何か方法はありますでしょうか?ご教授いただけますと幸いです。

    返信削除
    返信
    1. 匿名様>
      この条件だと「投稿以外のすべてでスニペット表示」のため静的ページも含まれてしまいます!すみません・・・。
      条件を「トップページのみスニペット表示」に変更しました。
      b:if cond を  data:blog.homepageUrl に変更しました。
      これでトップだけ要約になると思います。
      投稿、トップページなどの特定ページごとの実行条件は参考リンクをご覧ください。

      削除
  3. 大変参考になりました!
    JAVAとか全く分からないんですが、何とかなりました。
    ありがとうございます。
    記事にリンク張らせてもらいます。

    返信削除
    返信
    1. DK様のお役に立ててよかったです!

      削除