クリボウの Blogger Tips

Google Blogger の使い方、カスタマイズ方法、各種ツールなど、
Blogger 関連の役立つ情報を紹介しています。

> 要約がヌルッと出てくる「最近の投稿」リスト

要約がヌルッと出てくる「最近の投稿」リスト

Posted at: 2006-02-21 6

Expandable Post Links最近の記事へのリンクに、記事の冒頭部分が表示できる機能をつけた、新しいリンクリストをつくりました。

このパーツのおもしろいところは、リンク先ページのタイトル、URL、内容といったデータを、Blogger ブログのテンプレートタグからでも ATOM フィードからでもなく、Google の Blog Search のデータから得ている点。

実は「要約つきのリンクを、Blog Search のデータをもとにつくる」というのは、H & A さんからいただいたアイデアなのです。ありがとうございます。

導入方法
1.Blogger 管理画面「テンプレート」から、テンプレート head 要素内(<head></head> の間)に、次のコードを貼り付けます。

<link rel="stylesheet" href="http://tools.kuribo.info/expandablelist/default.css" type="text/css" />

2.リンクリストを書き出したいところに、次のコードを貼り付けます。
<script type="text/javascript" src="http://tools.kuribo.info/expandablelist/?url=http://www.kuribo.info/" charset="UTF-8"></script>
赤字の部分は、自分のブログの URL に書き換えてください。

応用編
このリンクリストは、つねに最新の記事をリンクにするので、トップページで特に需要がありそうですね。トップページにだけこのリンクを表示させるには、2のコードを <MainPage></MainPage> ではさんでください。これらのコンディショナルタグについては、こちらをご覧下さい。

このリンクリストでは、リストに書き出す最初のリンクと、書き出すリンクの数が設定できます。2で示した script 要素の scr 属性 URL 末尾に &start=2&num=5 とつけ足すと、2つ目から5つのリンクを書き出すリストができます。デフォルトは1つ目から10件です。このオプションを使えば、たとえばブログに表示される投稿数を1にして、2番目から5番目の投稿は要約の見られるリンクだけ置いておく、などなど、色々工夫することができると思います。

このリストは <div id="expandable-list"> に包まれて書き出されます。ので1の手順の替わりに head 要素内に次のようにスタイルシートを書き入れると、そのスタイルがリンクリストに適用されます。
<style type="text/css">
#expandable-list {

}

#expandable-list img {
  border: 0;
}

#expandable-list a {

}

#expandable-list div {
  font-size: 9pt;
  background-color: white;
  padding: 3px;
  margin: 0 0 5px 11px;
  border: #ccc 1px solid;
  display: none;
}
</style>

このブログのサイドバー末尾にもつけているんですが、このリンクリストは現在テスト中です。このリンクリストを導入された方は、ぜひ感想をお聞かせ下さい。


スポンサードリンク:
お願い:
「この記事役に立った!」と思ったら、ぜひフィード登録をお願いします。 

Comments:6

  1. おぉ、スゴい!
    いろいろと試行錯誤しながら、近いうちに導入したいと思います。
    素晴らしいツールを提供していただいてありがとうございます。
    いや〜、相談してみるもんですね。

    ReplyDelete
  2. 導入完了しました。
    トップページがスッキリとコンパクトになりました。
    ありがとうございました!

    ReplyDelete
  3. ありがとうございます.画面がすっきりしました.
    投稿した記事を削除してもどこかに残骸が残っているのでしょうか.下の方のいくつかは練習用だったので削除したけれど,残っています.
    このブログは使い勝手がよく判らないと思っていたら何だか面白そうで,愉しくなってきました.

    ReplyDelete
  4. > H & A さん
    H & A さんのアイデアで、おもしろいブログパーツができました。ありがとうございました。また、アイデアがあったら教えて下さいね。

    > ぶなやかたさん
    コメントありがとうございます。
    このパーツで使ったのは Blog Search のデータなので、Blog Search の方にデータが残っているということでしょうね。
    僕も Blog Search 上のデータを削除する方法はわからないんですが、ひょっとしたら、Google ウェブ検索の削除依頼でいけるかも知れませんね。

    ReplyDelete
  5. 素晴らしいツールをありがとうございます(遅ればせながら)。
    標準のフィードパーツでは最大5件しか表示できないので使い物にならないと思っていました。
    今後もいろいろなアイデアをどんどん提供してください。

    ReplyDelete
  6. 素晴らしいですね、最近Bloggeを始めたばかりですが本当に助かってますありがとうございます

    ReplyDelete

Comments on Google+:

© 2005-2014 Kuribo. Powered by Blogger.