2007年6月15日金曜日

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 の読み込みが遅かったり、ブロックされている場合は、スクリプト自体をテンプレートに埋め込むか、正常に読み込めるホストに置くようにしてくれとのこと。

11 コメント:

Wataru さんのコメント...

TwitterのWataruです。ありがとうございます。
他のブログではもっと面倒な事が書いてあってなえていたので、こんなに方んな方法があると知って、やる気がわいてきました!(笑)

本当にありがとうございました!!

nox さんのコメント...

Wataruさん、こんばんは。
役立てて頂けたようで、こちらとしても記事にした甲斐がありました。
Bloggerは自分好みにカスタマイズするのが楽しいですね。

Wataru さんのコメント...

たびたびすみません。私のブログに例のHTMLを埋め込んでみたのですが、「〈〉か〈/〉」が抜けていると表示されてしまいました。実際にHTMLを見てもそのような者は無いのですがどのようにすれば良いのでしょうか??

nox さんのコメント...

こんにちは。テンプレートを読まないことには原因が分からないので、差し支えなければダウンロードしたXML形式のテンプレートを以下のアドレスまで送ってもらえますか。

bm94QGNzYy5qcA==

メールアドレスはspam対策のためbase64でエンコードされているので、http://nox.appspot.com/binasciiなどでデコードしてください。

Wataru さんのコメント...

ありがとうございます。もうすこし自分で原因を探ってみたいと思います。もしそれで駄目だったら遅らせていただきます。

Wataru さんのコメント...

結局問題は自分で解決出来ませんでした

このページの使い方がよくわからないのですが・・・・このコメント欄に書いたらまずいですか?

nox さんのコメント...

コードの一部などであれば、ここのコメント欄でも問題ないです。

ただ、コードに含まれる<や>などはそのままだと表示できないので、http://nox.appspot.com/escapeなどを使って文字をエスケープさせてから書くようにしてください。

nox さんのコメント...

>このページの使い方がよくわからないのですが・・・・

「このページ」ってhttp://nox.appspot.com/binasciiのことでしょうか? それでしたら、bm94QGNzYy5qcA== をテキストボックスにコピー&ペーストして、Base64のデコードをチェックして、「変換」ボタンを押すだけです。これでメールアドレスに変換されます。

匿名 さんのコメント...

こんにちは。
この機能を使用してみたところ、safariでは機能しないのですが、対策はないでしょうか?ちなみにwindows用safari4 public betaです。
よろしくおねがいします。

先ほどの匿名の者です さんのコメント...

さきほどの追記ですが、テキストのみであれば問題ありませんが、picasa画像リンクをすると機能しなくなります。テーブルタグが問題のようですが。。。

nox さんのコメント...

Safari(多分Google Chromeの開発版も)だと何故か<span id="fullpost"></span>内にテーブルなどのコンテンツが入らずに、その下に出されてしまうようです。

対処法としては、http://www.anniyalogam.com/widgets/hackosphere.jsのshowFull関数とhideFull関数の中にそれぞれ、

var divs = post.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
if (divs[i].id == "fullpost")
divs[i].style.display = 'inline';
}

と、

var divs = post.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
if (divs[i].id == "fullpost")
divs[i].style.display = 'none';
}

を挿入し、テーブルなどのコンテンツを入れる際には、

ここに要約を書く。
<span id="fullpost"></span>
<div id="fullpost">
テーブルなどのコンテンツ
</div>

のように書き込みをすればちゃんと表示されると思います。