>--> | クリボウの Blogger Tips

クリボウの Blogger Tips

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

Seesaa ブログの広告をはずすユーザースクリプト

Posted at: 2006-02-27 18

Seesaa ブログの広告リンクをはずすSeesaa ブログに、リンクにカーソルをあてるとポップアップしてくる広告があるんですがご存知でしょうか(サンプル)。
通常のリンクなのか、広告なのか、リンクにカーソルをあてるまでわからないのが不便なので、はてなダイアリーのキーワードリンクをはずすのと同じ要領で、Seesaa の広告がポップアップするリンクをはずすユーザースクリプトをつくりました。「広告は見たくないのだ」という方はどうぞ。

Seesaa Ads Remover
※Firefox の Greasemonkey を利用している方対象です。

関連:忍者アクセス解析・ワンクリックでリンク元に飛ぶユーザースクリプト

自分のブログに Emoticons

Posted at: 2006-02-23 4

Emoticons
メッセージに添えられる ;):P といった顔文字、よく目にしますよね。今回取り上げるは、これらの顔文字を自動的に画像に置き換えて表示するためのツールです。
アイデアはあれどシンプルな画像がなく、諦めかけていたんですが、今回 Google Chat の Emoticonsというのを見つけたので、それを使うことにしました。
このツール、一度導入してしまえば、あとは普通に記事を投稿するだけで、自動的に顔文字が画像に替わるのが便利なところ。

置き換えられる文字列は <3 :(|) :-o :D :( X-( B-) :'( =D ;) :-| =) :-D ;^) ;-) :-) :-/ :P \m/ の19種類。

デモ
顔文字がどのように画像に切り替わるのかは、実際に見てもらった方がわかりやすいかと思います。下のフォームに、上記の顔文字を使った好きなメッセージを入れて「テスト」ボタンを押してみてください。



導入方法
1.Blogger 管理画面「テンプレート」から、テンプレート head 要素内(<head></head> の間)に、次のコードを貼り付けます。
<script type="text/javascript" src="http://tools.kuribo.info/emoticon/emoticon.js"></script>

2.テンプレート内の Emoticon を適用したい div 要素のタグに onload="emoticon('id');" という属性を書き入れます。赤字の部分はその div 要素の id を書き込んでください。

Blogger ブログの投稿部分にのみ適用したい場合は、post とクラス付けられた div 要素の開始タグを次のようにします。
<div class="post" id="p<$BlogItemNumber$>" onload="emoticon('p<$BlogItemNumber$>');">

Blogger のコメント部分の場合には、comments と id のついた div 要素、開始タグを次のようにしてください。
<div id="comments" onload="emoticon('comments')">

ちなみに、書き換え後の画像の中には、背景が透明でなく白いものがあるので、適用される範囲も背景が白い方がきれいです。

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

Posted at: 2006-02-21 7

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>

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

© 2005-2014 Kuribo. Powered by Blogger.