はてなブログで「続きを読む」記法

2013-10-18 追記: 公式でサポートされましたのでそちらをご利用ください。
長いブログもスッキリと表示。記事を分割する「続きを読む」記法をリリースしました

はてなブログでははてな記法の実装がはてなダイアリーと違うようで、動かない記法がいくつかあります。*1

続きを読む記法 もその内の一つです。
はてなダイアリーで書いていたときは使ったこともなかったんですが、最近立て続けに長めの記事を書いたら、トップページが長くなりすぎて見難くなってしまったので、無理やり使えるようにしてみました。

動作確認のためにこの下に続きを読む記法を書いてみますので、トップページなどから確認してみてください。2012-06-30: 現在はトップページの構成を変えたので確認できません。

（この上）

どうやって実現するかですが、
を記述した部分には以下の HTML が挿入されるようです。

<div class="seemore">

ですので、これ以降の要素をすべて削除し、「続きを読む」のリンクを設置してあげれば OK です。

そこで以下のコードを書きました。これをサイドバーにコピペすれば使えるようになります。

<script>
(function($) {
  if (!(location.pathname === '/' ||
        location.pathname.indexOf('/category/') === 0)) return;

  function pathname(url) {
    return url.replace(/^https?:\/\/[^\/]*|[#?].*$/g, '');
  }

  $('article.entry').each(function() {
    var $seemore = $(this).find('div.entry-content div.seemore');
    if ($seemore.length === 0) return;

    var url = $(this)
      .find('header.entry-header a.entry-title-link').attr('href');

    var $a = $seemore.find('a');
    if ($a.length === 1 && pathname($a.attr('href')) === pathname(url)) return;

    var $tail = $('<a>')
      .addClass('seemore')
      .attr('href', url)
      .text('続きを読む')
      .prependTo($seemore);

    while (!$tail.hasClass('entry-content')) {
      $tail.nextAll().detach();
      $tail = $tail.parent();
    }
  });
})(jQuery);
</script>

https://github.com/m4i/hatenablog-snippets/blob/master/seemore.js

2012-02-13: カテゴリページに対応

*1:この脚注記法も脚注が表示されず、tooltip を読むしかありません。逆に gist 記法のような新しいものもあります。