🧊

はてなブログで「続きを読む」を実現する

絶賛機能追加中のはてなブログなので、そのうち公式でできるようになるとは思いますが、一応。

はてな記法なりで「=====」を使って、続きを書いてることが条件です。

続き部分を隠す

最初に続きを隠します。
パフォーマンス的には隠すというよりかは出力しないようにしたいですが、それはどうにもならんので・・。

ソースを見てみると、続きはこのようになっています。

Html

    <!-- ヘッダやら -->
    <!-- ここに冒頭の本文 -->

<div class="seemore">
    <!-- ここに続きの本文 -->
</div>

    <!-- フッタやら -->

というわけで、seemoreってやつがそれです。

JavaScript

var seemore = $('body.page-index article.entry div.seemore').hide();

bodyタグで現在のページを割り当ててるみたいなので、トップ画面のみで有効になるようにしておきます。

続きを読むボタンをつける

サイドバーにJavaScriptを自由に書けるようになったので、そこを利用します。
またも管理画面のサイドバーから、「HTML」を選択して、以下のように書きます。
サイドバーはタイトルを空にすることもできるので、目立たずこっそり設置です。

今回はjQueryを使って書きますが、はてなブログとしても元からjQueryを使ってるみたいなので、新規で呼ぶ必要はないです。
バージョンは最新じゃなかったですが・・。

JavaScript

(function() {
  var seemore = $('body.page-index article.entry div.seemore').hide();
  var readmore = $('<a class="readmore" href="#">続きを読む</a>').appendTo('body.page-index article.entry div.entry-content');
  $.each(readmore, function(){
    var $this = $(this);
    var url = $this.parents('article.entry').find('a.entry-title-link').attr('href');
    $this.attr('href', url);
  });
})(jQuery);

これで、続き以下の本文が消えて、ボタンを押すとそれぞれの記事ページに飛ぶようになります。
ページ内で表示・非表示を切り替えたい場合も同じような要領ですね！

  1. ボタンクリックでseemoreを表示
  2. 押されたボタンは非表示に or もっかい押せるように残す

みたいな。

書き直し＠0328

気になるところがあったので、全部書き直しました。
以下のJavaScriptだけで対応します。

(function() {
  var isDetail = $('body').hasClass('page-entry');
  // 記事の詳細ページ以外で有効にする
  if( ! isDetail ){
    var seemore = $('article.entry').find('div.seemore').hide();
    var readmore = $('<a class="readmore" href="#">続きを読む</a>').appendTo('div.entry-content');
    $.each(readmore, function(){
      var $this = $(this);
      var url = $this.parents('article.entry').find('a.entry-title-link').attr('href');
      $this.attr('href', url);
    });
  }else{
    return;
  }
})(jQuery);

これでJavaScriptに何かあったときは、今までと同じ表示になります。

さらに書き直し@1231

  var seeMore = $('.seemore'),
  len = seeMore.length;
  if(len > 1){
    seeMore.remove();
    $('.comment-box').remove();

    var readmore = $('<p class="readmore"><a href="#">続きを読む</a></p>').appendTo('.entry-content');
    $.each(readmore, function() {
      var $this = $(this);
      var url = $this.parents('.entry').find('.entry-title-link').attr('href');
      $this.children('a').attr('href', url);
    });
  }

そもそもページ多すぎで判別するのはナンセンスなので、seemoreあったら起動。