Bloggerに「続きを読む」機能を導入

このBlogger、なかなか使い勝手が良いのだけど、一つ大きな不満がある。「続きを読む」機能がないのだ。英語で言えば"Read more"だ。そこでネット上を検索したところ、クリボウの Blogger Tipsなるページを見つけた。ふむふむ、これならできそうかな…? しかし、すべての記事に「続きを読む」リンクが表示されてしまう。これをどうにかできないかと思ったら、同じサイトでそれを消すやり方が出ていた…が、今度は投稿記事中にその記事自体のURLを埋め込まないといけないらしい。これでは手軽に投稿できる機能に価値を見出していた自分としては意味がなくなってしまう。う～ん、自分でスクリプト書けば何とかなるかなぁ…とも思ったが、広い世の中、同じことを考えている人は絶対いるはずだともう少し探し回ってみたところ、Blogger Beta Tipsなるサイトを見つけた。どうやら、Beautiful BetaというサイトでJavaScriptによって「続きを読む」機能を実装したらしい。早速、使わせてもらったが、素晴らしい!

Blogger Beta Tipsのページとかなり被ってしまうが、Beautiful Betaの日本語訳と日本語化した導入方法を以下に書いておく。

1. まずは「テンプレート」タブから「HTMLの編集」タブを開き、「テンプレートをすべてダウンロード」で現在のテンプレートを保存する。そのテンプレートを編集するのだが、編集前にバックアップファイルは残しておいたほうが良い。

2. 以下のコードをメモ帳などのテキストエディタを使って、</head>タグの直前に書き込む。

<script type='text/javascript' src='http://www.anniyalogam.com/widgets/hackosphere.js' />

3. テンプレートコード中で下記の赤字の部分を書き加える。

<b:includable id='post' var='post'> <div class='post'> <a expr:name='data:post.id'/> <b:if cond='data:post.title'> <h3 class='post-title'> <b:if cond='data:post.url'> <a expr:href='data:post.url'><data:post.title/></a> <b:else/> <data:post.title/> </b:if> </h3> </b:if> <div class='post-header-line-1'/> <div class='post-body' expr:id='"post-" + data:post.id'> <b:if cond='data:blog.pageType == "item"'> <p><data:post.body/></p> <b:else/> <style>#fullpost {display:none;}</style> <p><data:post.body/></p> <span id='showlink'> <p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>続きを読む...</a></p> </span> <span id='hidelink' style='display:none'> <p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>要約を表示...</a></p> </span> <script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script> </b:if> <div style='clear: both;'/> <!-- clear for photos floats --> </div> </div>

ここでテンプレートファイルを保存する。「テンプレート」タブから「HTMLの編集」タブを再び開き、「参照」ボタンで修正したテンプレートファイルを選択し、「アップロード」ボタンでアップロードをする。

4. 「設定」タブの「フォーマット」タブを開いて、「投稿テンプレート」のところに、以下のコードを書き込む。

ここに要約を書く。 <span id="fullpost"> ここに残りの文章を書く。 </span>

因みに、このスクリプトの作者によれば、http://www.anniyalogam.com/widgets/hackosphere.js　の読み込みが遅かったり、ブロックされている場合は、スクリプト自体をテンプレートに埋め込むか、正常に読み込めるホストに置くようにしてくれとのこと。