Bloggerに「続きを読む」を追加してみた

Bloggerには、「続きを読む」がないんですね・・・
不便なので追加してみました。

サーバ側で制御して、クライアントにデータを送らないっていうのが理想だけど
それは無理っぽかったので、クライアントで「記事を途中から隠す」っていう感じにすることにしました。

jQueryで実装してみました。

まずは、記事ごとにidを振っておいて識別できるようにします。

<div class='post-body entry-content' expr:id='&quot;tonosamart_read_more_&quot; + data:post.id'>

そのあとは、ちょっと長いですが

  <b:if cond='data:blog.pageType == &quot;item&quot;'>
  <b:else/>
   <script type='text/javascript'>
    $(document).ready(function() {
     $(".entry-content").each(function(){
      if ($(this).height() &gt;= 550) {
       $(this).after("<a class='tonosamart-read-more-link' href='javascript:tonosamart_readMore(\"" + this.id + "\", " + $(this).height() + ", true);' id='tonosamart-read-more-link-on" + this.id + "'>続きを読む</a>");
       $(this).after("<a class='tonosamart-read-more-link' href='javascript:tonosamart_readMore(\"" + this.id + "\", " + $(this).height() + ", false);' id='tonosamart-read-more-link-off" + this.id + "'>詳細を隠す</a>");
       $(this).after("<div class='tonosamart-read-more-bg' id='tonosamart-read-more-bg" + this.id + "'/>");
       $("#tonosamart-read-more-link-off" + this.id).css("display", "none");
       $(this).css("overflow", "hidden");
       $(this).height(500);
      }
     });
    });

    function tonosamart_readMore(id, height, isDisplay) {
     if (isDisplay) {
      $("#tonosamart-read-more-link-on" + id).css("display", "none");
      $("#tonosamart-read-more-link-off" + id).css("display", "inline");
      $("#tonosamart-read-more-bg" + id).css("display", "none");
      if (jQuery.browser.safari) {
       $("#" + id).height(height);
      } else {
       $("#" + id).animate({height:height}, 400);
      }
     } else {
      $("#tonosamart-read-more-link-on" + id).css("display", "inline");
      $("#tonosamart-read-more-link-off" + id).css("display", "none");
      $("#tonosamart-read-more-bg" + id).css("display", "block");
      var targetOffset = $('a[@name=' + id.substring('tonosamart_read_more_'.length, id.length) + ']').offset().top;
      if (jQuery.browser.safari) {
       $('html,body').animate({scrollTop:targetOffset}, 1,"swing" , function(){$("#" + id).height(500)});;
      } else {
       $('html,body').animate({scrollTop:targetOffset}, 1,"swing" , function(){$("#" + id).animate({height:"500"}, 400, "swing", function(){$(this).height(500)})});
      }
     }
    };
   </script>
  </b:if>

こんな感じで、「続きを読む」機能を追加してみました。

記事の高さが550px以上の場合は、高さを500pxにして記事の後半を隠しています。
そのときに、透過pngを重ねて、記事がフェードアウトするみたいにしてみました。

簡単にできた割には、わりと素敵にできたと思います。

いちいち、記事の前半と後半を分けて書かなくてもいいので、記事を書く方としても楽ですね。