小粋空間  -  a cheap joke and a play on words site

本ブログ開設当初から利用させて頂いている BlogPeople が4周年を迎えられました。おめでとうございます。
今後も、益々のご活躍・ご発展を期待しております。

ということで、以下、BlogPeople に関する情報をいくつか。

当サイトでは BlogPeople の被リンクを随時受け付けております。下記のリンクをクリックすれば、当サイトのリンクを貴サイトの BlogPeople のリンクリストに簡単に追加することができます。

List Me!

また、これまでに投稿した BlogPeople に関するエントリーの中から、役に立ちそうなものをピックアップしてご紹介しておきます。参考になれば幸いです。

BlogPeople登録と設定

BlogPeople の基本サービスである「リンクリスト」の解説と設定方法です。このサイトで BlogPeople に関する最も過去の記事で、現在の内容と食い違っている部分もありますが、BlogPeople とは何か？を知るには良い記事かと思います。

BlogPeople のススメ

リンクリストを手書きで作成されている方向けに BlogPeople をお勧めする記事です。

BlogPeople のリンクリストにスクロールバーをつける

タイトルの通り、BlogPeople のリンクリストにスクロールバーをつけるカスタマイズです。

トラックバックピープルにスクロールバーをつける

こちらは、BlogPeople のトラックバックピープルにスクロールバーをつけるカスタマイズです。

BlogPeopleの被リンク数を減らさずにURLを変更する

BlogPeople に登録したURLを変更する場合、メニューにある「サイト情報の設定/変更」で簡単に変更できますが、これを行うと、これまでの被リンク情報が消滅してしまうため、被リンク数を維持したままURLを変更する方法を紹介しています。

BlogPeople の「List Me!」を valid にする

BlogPeople の「List Me!」を XHTML valid にするカスタマイズです。

BlogPeople 等のリンクリストによる表示の遅延を解消する（その1：JavaScript編）

BlogPeople のリンクリスト表示によるページ全体の表示のタイムラグを解消するカスタマイズです。

BlogPeople 等のリンクリストによる表示の遅延を解消する（その2：Ajax編）

BlogPeople のリンクリスト表示によるページ全体の表示のタイムラグを Ajax により解消するカスタマイズです。

BlogPeopleで複数ブログ登録時のログインID切り替え

複数ブログを運用していて、それぞれをBlogPeopleに登録したい場合、BlogPeopleのログインIDを別々に取得する必要があり、管理画面もログインID分存在することになりますが、ログインIDを簡単に切り替える方法です。

BlogPeople やドリコム RSS がサービスとして提供しているリンクリスト。ご自身のページに直接HTMLでリンク集を作成するより、表示件数のカスタマイズやサイトの更新状況がわかる等、大変便利なサービスなので利用されている方はかなり多いと思います。

しかしながら、リンクリストはサーバに一旦アクセスしてから表示される仕組みになっているため、少なからずタイムラグが発生します。
このタイムラグはHTMLページの表示に大きく影響します。その理由は次の通りです。

例えばIEでサイトを閲覧する場合、そのサイトのページはHTMLソースの先頭から記述された順番に表示されるようになっています *1。つまり、ページの最初や途中にこのリンクリストを表示するタグが記述されている場合、サーバの応答が返ってくるまでそれ以降のHTMLソースの内容が表示されないという問題があります。
サーバからの応答がある場合はまだ良いのですが、サーバダウン等といった不測の事態が発生すると、それ以降のページがしばらく表示されなくなる可能性もあり、閲覧者にとってはかなりのストレスになります。

したがって、リンクリストを表示する位置についてはページの（少なくとも本文より）後方やリンクリスト専用のページに配置したり、あるいは「中継君（関連記事）」を利用されているのではないでしょうか。

このエントリーは、その解消策として、以前公開した「BlogPeople 等のリンクリストによる表示の遅延を解消する（その1：JavaScript編）」の第2弾で、Ajax と CGI の組み合わせでリンクリスト表示のタイムラグを解消する方法です（下記のスクリーンショットは表示イメージ）。

仕組みは、リンクリストの表示用タグ（リスト 3.1）はお好きな位置に埋め込み、そこから Ajax（bp.js） を起動し、さらに CGI（bp.cgi） を起動し、CGI 経由で BlogPeople のリンクリストを取得します。Ajax 起動なので、HTMLページ表示と BlogPeople のリンクリスト取得は並列に処理され、リンクリストが取得できた時点で HTMLに反映されます。

上記の基本的な動作に加え、ここでは下記の動作も加えた、少し凝った作りにしています。

• リンクリストが表示されるまではローディング画像を表示（IE6では初回しか表示されないようです）
• リンクリスト取得に失敗した場合は、ローディング画像を消去して、リスト表示位置に "Server Error" または非表示

下記にサンプルを用意してますので、動作をご確認ください。なお Ajax の特徴を分かりやすくするよう、リンクリスト表示までに1秒かかるよう、スクリプトを改変しています。Firefox で閲覧されると良く分かります。

BlogPeole の Ajax 化サンプル

このカスタマイズは設定がやや複雑ですので、自信がない方は前述した下記の方法をお勧めします。

BlogPeople 等のリンクリストによる表示の遅延を解消する（その1：JavaScript編）

それでは以下、設定方法です。CGI および外部ファイルが扱えるブログやホームページであれば利用可能と思われます。また特定のブログに依存する記述ではありませんので、予めご了承ください。

１．スクリプトのダウンロード

下記のファイルをダウンロードしてください（右クリックして「対象を保存」を選択してください）。

• bp.zip/ bp.lzh （リンクリスト取得スクリプト）
• bp.js （Ajax起動スクリプト）
• ajax-loader.gif （ローディング画像）

bp.zip（または bp.lzh）は解凍した中にある bp.cgi を使用します。

また、上記の他、Ajax ライブラリの prototype.js をダウンロードしてください。

Prototype JavaScript Framework

上記のサイトの Download the latest version のリンクをクリックし、アーカイブをダウンロード。アーカイブを解凍して、dist フォルダの中にある prototype.js を使用します（他は使いません）。

また、ajax-loader.gif はお好きな画像に変更して構いません。配布しているローディング画像は下記のサイトで作成したものです。

Ajaxload

２．bp.js の修正

ダウンロードした bp.js を任意のエディタで開き、1行目・2行目（リスト 2.1）を修正します。

var script = 'bp.cgi';
var image = 'ajax-loader.gif';

リスト 2.1　bp.js 変更箇所

bp.cgi の部分は URL 記述に変更してください。当サイトを例にすると、メインページと同じディレクトリに bp.cgi をアップロードしたのであれば、

var script = 'http://www.koikikukan.com/bp.cgi';

リスト 2.2　bp.js 変更例

という風に書き換えます。

ajax-loader.gif の部分も同じ要領で変更しますが、bp.js と異なるパスにアップロードする場合のみ、URL 記述に変更してください。bp.js と同じディレクトリであればこのままで問題ありません。

３．スクリプトのアップロード

１項でダウンロードしたファイルをサーバにアップロードします。bp.cgi はアップロード後、パーミッションを 755 または 777 に変更します（パーミッションの値はレンタルサーバによって異なる場合がありますので適宜確認してください）。

各ファイルのアップロードディレクトリは任意ですが、例えば Movable Type であれば、メインページと同じディレクトリが良いでしょう。CGI スクリプト（bp.cgi）はレンタルサーバによって実行可能ディレクトリの制限があるので、例えば cgi-bin ディレクトリ等になる場合があります。

４．リンクリスト表示用タグの追加

リスト 4.1 の内容を、リンクリストを表示したい位置へ設定します。

<div id="linklist"></div>
<script type="text/javascript">
getLinkList('[BlogPeopleリンクリストのURL]');
</script>

リスト 4.1　リンクリスト表示用タグ

[BlogPeopleリンクリストのURL] には、リンクリストのコード生成で出力された script 要素の src 属性の内容（リスト 4.2 の青色部分）を設定します。

<script language="javascript" type="text/javascript" src="http://www.blogpeople.net/display/usr/xxxxxxxxxxxxx.js"></script>

リスト 4.2　BlogPeopleリンクリスト表示コード

５．スクリプトのインクルード

リスト 5.1 の script 要素を、リスト 4.1 を設定したテンプレート（またはHTML）の <head>～</head> 部分に設定します。

<script type="text/javascript" src="http://domain/path/prototype.js"></script>
<script type="text/javascript" src="http://domain/path/bp.js"></script>

リスト 5.1　script 要素

赤色の src 属性値は環境に合わせて適宜変更してください。

６．スタイルシート設定

リスト 6.1 をスタイルシートに追加します。

#linklist {
    margin: 5px 1px 15px;
    background: none;
    color: #444444;
    font-size: 10px;
    _font-size: 9px;
    line-height: 150%;
}
.bp_loading {
    border: 1px solid #999999;
    padding: 83px 0;
    text-align: center;
}
.bp_loaded {
}
.blogpeople-main {
    height:162px;
    overflow: auto;
}
.blogpeople-powered-by {
    text-align: left;
}
.bp_error {
    padding: 83px 0 84px;
    text-align: center;
}

リスト 6.1　CSS

以下、CSS の各セレクタの説明です。

#linklist はリンクリスト全体のスタイルを設定しています。

.bp_loading はローディング画像を表示中のスタイルです。padding プロパティは、ローディング画像表示中の高さと、実際にリンクリストが表示されたときの高さを一致させるためのものです。ローディング画像のサイズによって高さが微妙に変わりますので、気になる場合は padding の値を適宜変更してください（Firefox で閲覧して高さが一致するようにしています）。

.bp_loaded はリンクリストが表示された時のリンクリスト全体のスタイルです。お好みに応じてプロパティを追加してください。

.blogpeople-main と .blogpeople-powered-by は「BlogPeople のリンクリストにスクロールバーをつける」のCSSと重複しています。すでにリンクリストのスクロール設定をされている場合はご注意ください。

.bp_error はリンクリスト取得失敗時のスタイルです。

７．リンクリストが表示されない場合

このカスタマイズのキモは「リンクリストが取得できるかどうか」ですが、それを確認するために、bp.cgi の下記の部分を変更して、bp.cgi をブラウザから直接実行してみると良いでしょう。

my $url = $query->param('url');
　　　　　　↓
my $url = '[BlogPeopleリンクリストのURL]';

リスト 7.1　bp.cgi 変更箇所

[BlogPeopleリンクリストのURL]は３項と同じものです。成功すればブラウザ上にリンクリストが表示されます。

上記でリンクリストが表示された後、bp.cgi の内容を元に戻します。それで表示できない場合は、

• bp.js および prototype.js のパス誤り
• bp.js に記述した bp.cgi のパスが誤り

等が考えられます。

*1：全てのブラウザが同じ動作であるかについては未確認です。実際、Firefox／Opera ではストレスなく表示されます。

本日、おかげさまをもちまして BlogPeople の被リンク数が1200被リンクに到達しました。以前投稿した「BlogPeople 1000被リンク達成」から6ヶ月弱で辿り着くことができました。 ということで、この場をお借りして被リンクくださった皆様にお礼申し上げます。ありがとうございました。

「1200 被リンク」というのは個人的にひとつの節目でした。というのは、ブログピープルのクレジットバナーは、被リンク数が 100 - 300 - 600 という区切りで新しいバナーが管理画面に追加されることになってまして、最高ランクのバナーは 600 被リンクです。下記にノーマルおよび各被リンク数によるクレジットバナーを掲載します。

ノーマル1
ノーマル2
被リンク数100以上の方限定
被リンク数300以上の方限定
被リンク数600以上の方限定

が、以前出版された「ブログのもと」のバナー変遷の話で、たしか「もうひとつバナーを作るかもしれない」というようなことが書かれており、「じゃ、1200 被リンクを目指そう！」と思った次第です。

ということで、新たなバナーが出ることを密かに期待しています。
また、ソーシャルブックマークや RSS といった Web2.0 系サービスの台頭でリンクリストの影が薄くなっている気がしなくてもないですが、リンクリストは今後もマイペースで増やし続ける予定です。

話は変わって、私が BlogPeople に登録した当時（2004年6月）の BlogPeople トップページは現在のような華やかなページではなく、スクリーンショットのようなシンプルなページでした。 スクリーンショットをクリックすると、世界中の Webサイトが保存されていることで有名な「インターネット・アーカイブ」で保存されている BlogPeople のページ（2004年3月）を見ることができます。懐かしく思われる方も結構いらっしゃるのではないでしょうか。

あと、当ブログで過去にエントリーした BlogPeople 関連記事を下記に再掲しておきます。

• BlogPeople のススメ
• BlogPeople 等のリンクリストによる表示の遅延を解消する（その1：JavaScript編）
• BlogPeople の「List Me!」を valid にする
• BlogPeopleの被リンク数を減らさずにURLを変更する
• トラックバックピープルにスクロールバーをつける
• BlogPeople のリンクリストにスクロールバーをつける
• BlogPeopleで複数ブログ登録時のログインID切り替え

当サイトの公開テンプレートを利用されている方からご連絡があった場合、一方的に BlogPeople に登録させて頂いているのですが、そのサイトを拝見させて頂くと、リンクリストを手書きで作成されている方が結構いらっしゃいます。
ということで、以下に改めて BlogPeople について紹介したいと思います。

１．BlogPeople リンクリストのメリット

メリットは、他サイトのリンク集、つまりリンクリストを BlogPeople を利用して作成することにより、リンクリストの管理がこれまでより格段に容易になることです。Webサイトをブログに更改して、サイト管理の煩わしさから解放されたのと同じ感覚を、リンクリストでも味わえる訳です。
また登録したサイトの更新状況をほぼリアルタイムに取得できたりと、自前で管理していたリンクリストではできなかったことが色々と実現可能になります。

しかし一番大きなメリットは、BlogPeople に登録することで自サイトの存在を外部に知ってもらえることでしょう。Google にサイトのURLを登録すれば検索対象にはなりますし、更新Ping の利用や RSS 等でブログ自体は認知されますが、他ブログとのコミュニケーションという意味では BlogPeople のリンクリストが有効と感じています。

サイトの存在を知ってもらい、また逆に気に入ったサイトを自分のリンクリストに登録することで、ネット上でのいわゆる「ゆるやかなコミュニケーション」がひろがります。もし自分のリンクリストに登録したサイトからリンク（被リンク）をしてもらえれば、相手のリンクリストに自サイトが表示されますので、自分のサイトが相手サイトを通して他のユーザの目に触れる可能性が高くなります。つまりサイトのアクセス向上につながる可能性がさらに高くなります。

BlogPeople のトップに、登録サイトが色々なカテゴリーで分類されているので、自分の好きなところから登録したいサイトを探すと良いでしょう。

２．リンクリストを積極的に利用するには

BlogPeople のリンクリストを積極的に利用したい場合、経験上、

• リンクリストをトップページのサイドバー等に表示
• 「List Me!（私を登録）」という1クリックでサイト登録できるリンクを表示
• 表示件数を絞らない

が好ましいです。

1つめの理由は、トップページにリンクリストを表示することで、BlogPeople を利用していることと、登録サイトがトップページに表示されるという2つのメリットがあります。「リンクのページ」等を作って、そこにリンクリストを表示するのも構わないのですが、最初はトップページのどこかに貼り付けてリンクリストの存在をアピールした方が効果的です。

2つめの理由は、自サイトを簡単に登録できることはもちろんですが、訪問ユーザに登録を促す効果があります。私の場合、「List Me!」がないと「登録してはいけないのかな？」という錯覚に陥ることがあるので（そんなことはないのですが）、オープンであることの意思表示という意味でも表示した方が良いでしょう。

3つめは、BlogPeople のリンクリストは表示件数を制限する設定ができるのですが、最初は制限せずに全て表示しましょう。リストが多く表示されている方が登録しやすいですし、自分のサイトが相手のサイトに表示されていると嬉しいものです。
件数が増えてきて縦長になったらスクロールの設定をCSSに追加します（BlogPeople のリンクリストにスクロールバーをつけるを参照）。

３．リンクに事前確認は必要？

以前は、いわゆる「リンク」をメールや掲示板で確認をとってから登録し、「相互リンク」も同様の手順で行っていましたが、BlogPeople のようなリンクリストでは確認不要によるサイト登録が暗黙の了解となっています。（一方的に登録されることについて）不快感を感じる方もいらっしゃるかもしれませんが、ブログのトラックバックがそうであるように、リンクリストの利用は「自サイトのリンクリストへの登録はオープンである」という意思表示にもなっているようです。

４．私の場合

ブログを開設してから2ヶ月ほど経って BlogPeople の存在を知って登録しました。登録した時、すでに1件の被リンク（＝他サイトからのリンクリスト登録）があったのに驚いたことを今でも覚えています。
その後、内容やデザインで気に入ったブログをみつけては積極的に登録していきました。相互リンクの割合はテンプレートご利用サイトも含めて現状で約60%です（つまり私が登録しているサイトは1500件程度）。

開始当初は被リンク数の多いサイトなど、恐れ多くてとても登録できなかったのですが、当サイトは被リンク歓迎ですのでお気軽にお待ち申し上げます（サイトの内容によっては相互リンクにならないかもしれませんので予めご容赦ください）。

BlogPeople の「List Me!」を XHTML valid にするカスタマイズです。

BlogPeople のサービスのひとつに、他のブログピープル会員が簡単にあなたのサイト情報をリンクリストに追加することができる「List Me!（私を登録）」があります。当サイトでは下記のような形式のリンクになっています。

<a href="javascript:void(bloppop=window.open('http://www.blogpeople.net/addlink.jsp?n=1&u=http%3A%2F%2Fwww.koikikukan.com%2F&ti='+escape('<$MTBlogName encode_html="1"$>'),'blop','scrollbars=no,width=475,height=350,left=75,top=175,status=yes,resizable=yes'));">List Me!</a>

が、これをページに貼り付けるとThe W3C Markup Validation Serviceで以下のようなエラーと、これと似たようなメッセージが計12個表示されます。つまり「List Me!」を表示することで valid でなくなってしまいます。

Line xxx, column xx: cannot generate system identifier for general entity "u"
 
...//www.blogpeople.net/addlink.jsp?n=1&u=http%3A%2F%2Fwww.koikikukan.com%2F&ti=

これを回避するため、最初に考えたのは、リンクから一旦空のウィンドウを開き、そこから BlogPeople の JavaScript を起動するという案です（=メインページでエラーにならなければ良い）。

最初のリンクを下記のように書き換えてウィンドウ（ここでは bp.html）を開く
<a href="javascript:void(bloppop=window.open('http://www.koikikukan.com/bp.html','blop','scrollbars=no,width=475,height=350,left=75,top=175,status=yes,resizable=yes'));">List Me!</a>
 
　　　　　　　　　　↓
 
新しいインデックステンプレート（bp.html）を作り、この中で自動的に JavaScript を実行するように記述
<body onload="window.location.href = 'http://www.blogpeople.net/addlink.jsp?n=1&u=http%3A%2F%2Fwww.koikikukan.com%2F&ti='+escape('<$MTBlogName encode_html="1"$>');">

こういったテクニックを用いれば valid かつ正常に表示されるようですが、やや面倒です。

さて、The W3C Markup Validation Service のエラーをよくみると、後方に

Line xxx, column xx: entity was defined here
 
...://www.blogpeople.net/addlink.jsp?n=1&u=http%3A%2F%2Fwww.koikikukan.com%2F&ti

とあります。これが本来のエラーで、XHTMLではページ内の "&" を "&" と記述する必要があります。URLでも同様です（HTML 2.0の時からこの点も明記されていましたが、ブラウザは "&" のままでもきちんと処理するように求められていたこともあり、これでも機能していました *1）。

つまり「List Me!」のリンクは下記のように "&" の後ろに青色の "amp;" を追加するだけで valid になります。リンクをクリックした時のページ内容が元の設定の時と同じことも確認しています。

<a href="javascript:void(bloppop=window.open('http://www.blogpeople.net/addlink.jsp?n=1&amp;u=http%3A%2F%2Fwww.koikikukan.com%2F&amp;ti='+escape('<$MTBlogName encode_html="1"$>'),'blop','scrollbars=no,width=475,height=350,left=75,top=175,status=yes,resizable=yes'));">List Me!</a>

2005.07.25 追記
コメントでお分かりの通り、Ogawa::Memoranda さんよりアドバイス頂きまして、valid かつ JavaSript がOFFでも使えるスクリプトを提供して頂きました。この場をお借りして改めてお礼申し上げます。

元のスクリプトの代わりに下記のタグを表示したい位置に設定します（「List Me!」の文言以外は教えていただいたものをそのまま掲載させて頂いてます）。nofollow も付与されているというきめ細かさ。

<script type="text/javascript">
function popup_blop(url) {
    var c = url.indexOf('ti=');
    url = url.substr(0,c+3)+escape(decodeURIComponent(url.substring(c+3,url.length)));
    window.open(url,'blop','scrollbars=no,width=475,height=350,left=75,top=175,status=yes,resizable=yes');
}
</script>
 
<a title="List Me!" href="http://member.blogpeople.net/addlink.jsp?n=1&amp;u=<$MTBlogURL encode_url="1"$>&amp;ti=<$MTBlogName encode_url="1"$>" onclick="popup_blop(this.href);return false;" onkeypress="popup_blog(this.href);return false;" rel="nofollow">List Me!</a>

*1：The Web KANZAKI：XHTMLの書き方と留意点より引用

本日、BlogPeopleのURLを変更しました。こちらで変更する前にURLを手動で変更くださっていたサイトさんがかなり増えてきたのを発見して（ありがとうございます）、あわてて変えました。

さて、BlogPeopleのURLは、メニューにある「サイト情報の設定/変更」で簡単に変更できるのですが、これを行うとこれまでの被リンク情報が消滅してしまいます。被リンク数を維持したままURLを変更するには、メニューの「各種申請」をクリックした次のページにある「サイトURLの変更・追加申請」から申請します。
参考サイトは以下です。ありがとうございました。

• Modern Syntax：BlogPeopleに機能追加
• caramel*vanilla：BlogPeopleのリンクについて

昨晩申請して、本日の午前中には作業完了のメールを頂きました。この作業は人手を介して行われているようですが、迅速に対応くださりありがとうございます。

あとは重複リンクを整理したいところです（600より下回らない程度に）。

今日はネタを書く暇がなかったので、前のエントリーの追記にしようと思った内容を別エントリーにしました。お許しください。

で、「600被リンク用のバナー（左上）が存在する」ということで、この存在に全く気がついていませんでした（100被リンクのバナーと思い込んでたという噂も…）。ひとつ前のエントリーで教えて頂きました。もそさん、BlogPeople 主催者の nagasawa さん、ありがとうございました。

トラックバックピープルのリンクリストにスクロールバーをつけるカスタマイズです。リンクリストにスクロールバーをつけるシリーズ

BlogPeopleのリンクリストにスクロールバーをつける MyBlogList にスクロールバーをつける（改）

に続く第3弾です。

カスタマイズの前に、トラックバックピープルのリンクリストのデフォルトのタグは下記のようになっています。

<div class="blogpeople-tbp">
<div class="blogpeople-tbp-link"><a href="http://・・・">タイトル1</a></div>
<div class="blogpeople-tbp-link"><a href="http://・・・">タイトル2</a></div>
　　　　　　　　　：
　　　　（最大10トラックバック）
　　　　　　　　　：
<div class="blogpeople-tbp-link"><a href="http://・・・">タイトルn</a></div>
<div class="blogpeople-tbp-credit">（クレジットバナー）<br />（クレジット「Powered by BlogPeople」）</div>
</div>

BlogPeople 本来のリンクリストはリンク部分とクレジットバナーが div タグで分割されているので、CSSの設定のみでスクロールとクレジットバナーを分割できたのですが、トラックバックピープルは新着記事を最大10件まで表示するという仕様であるため、タグの構成が異なっているようです。言い換えるとCSSに、

リスト全体： blogpeople-tbp

各記事： blogpeople-tbp-link

クレジットバナー・クレジット： blogpeople-tbp-credit

というクラスセレクタを設定することで、きめ細かいスタイルを指定することができます。これはトラックバックピープルの「スクリプトの作成」ページの下の方に「上級者向け情報」として説明されています。

他のリンクリストと同様にスクロールバーを与える場合、本来のタグ構成では実現できないため、クレジットバナーおよびクレジットをスクロールバーの外に完全に追い出すスクリプトを作りました。
動作的には最初のリストに対し、青色の div タグを挿入して記事側の blogpeople-tbp-link 全体を blogpeople-tbp で括っているようにみせかけ、余った </div> に対応する <div blogpeople-tbp-box> を付与することでタグの帳尻を合わせています。

<div class="blogpeople-tbp-box">
<div class="blogpeople-tbp">
<div class="blogpeople-tbp-link"><a href="http://・・・">タイトル1</a></div>
<div class="blogpeople-tbp-link"><a href="http://・・・">タイトル2</a></div>
　　　　　　　　　：
　　　　（最大10トラックバック）
　　　　　　　　　：
<div class="blogpeople-tbp-link"><a href="http://・・・">タイトルn</a></div>
</div>
<div class="blogpeople-tbp-credit">（クレジットバナー）<br />（クレジット「Powered by BlogPeople」）</div>
</div>

以下カスタマイズ方法です。

１．トラックバックピープル表示用タグの修正

各テンプレートに設定している、トラックバックピープルのリストを表示するタグ

<script type="text/javascript">b=0</script><script type="text/javascript" src="http://・・・" ></script>

を div タグ等で括って

<div class="side" id="hogehoge">
<script language="javascript">b=0</script><script type="text/javascript" src="http://・・・" ></script>
</div>

としてください。括られていない場合は、サンプルのようにタグを追加してください（タグは div でなくても大丈夫と思いますが、他のタグについては動作未確認です）。
hogehoge の部分は、任意の id 属性名を設定してください。id 属性名はページ内で一意になる名称にしてください（=他の id 属性名と重複しないこと）。
追加が終わったら保存・再構築してください。

２．テンプレートにJavaScript追加

１項のトラックバックピープル表示用タグの下に、下記のスクリプト（青色）を追加します。

<div class="side" id="hogehoge">
<script language="javascript">b=0</script><script type="text/javascript" src="http://・・・" ></script>
</div>
 
<script type="text/javascript" language="javascript">
<!--
id = 'hogehoge';
tag1 = '<div';
if (window.navigator.userAgent.indexOf("MSIE") != -1) {
    tag1 = tag1.toUpperCase();
}
nodes = document.getElementById(id).innerHTML;
data = '<div class="blogpeople-tbp-box">';
list = nodes.split(tag1);
flg = 0;
for (i = 0; i < list.length; i++) {
    if(list.length == i + 1) {
        data += '</div><div ' + list[i];
        break;
    } else {
        if (i != 0){
            data += '<div ' + list[i];
        } else {
            data += list[i];
        }
        continue;
    }
}
document.getElementById(id).innerHTML = data;
//-->
</script>

スクリプトの3行目の右辺（赤色）には、１項で設定した id 属性名を設定してください。
追加が終わったら保存・再構築してください。

３．CSS設定

下記のクラスセレクタをスタイルシート（styles-site.css）に新たに定義します。場所はどこでも大丈夫です。

.blogpeople-tbp-box {
    /* 必要に応じて設定 */
}
 
.blogpeople-tbp {
    overflow: auto;
    height: 60px;
}
 
.blogpeople-tbp-credit {
    margin-top: 10px;
    margin-bottom: 0px;
}

上から順番に、全体・リンクリスト用・クレジットバナーおよびクレジット用のスタイルです。内容は適宜変更してください。
もし同一名称のクラスセレクタがすでに存在する場合は、クラスセレクタを任意の名称に変更してください。その場合、２項のスクリプトに埋め込まれた３項のクラスセレクタ名を変更した名称に修正してください。
追加が終わったら保存・再構築してください。

以上です。Windows2000・XPのIE6.0/Netscape7.0/Firefox1.0/Opera7.23・8.0で正常に表示されることを確認しています。

2005.07.25 追記
２項のHTMLタグに誤りがありましたので修正しました。

BlogPeople のリンクリストにスクロールバーを付与するカスタマイズを紹介します。参考記事は BlogPeople 主催者の

Modern Syntax：BlogPeopleリスト出力形式の変更のお知らせ

です。ありがとうございました。
かなり以前より色々なサイトでカスタマイズ方法が紹介されていますが、ここでは仕組みの詳細についてかみくだいて書いてみました。

１．CSSでスクロールバーを表示する方法

基本的手法として、サイドバーのメニューリストにスクロールバーを表示する方法は、

.hogehoge {
    height: 200px;
    overflow: auto;
}

というクラスセレクタを作り、メニューリストを div タグで括って

<div class="hogehoge">
　　　　　：
　（メニューリスト）
　　　　　：
</div>

とクラス属性 hogehoge（青色）を与えることで、メニューリストが200pxを超える長さになるとスクロールバーが自動的に付与されます。
overflow は指定したサイズ（ここでは200px）にコンテンツが入らない場合にはみ出した部分の表示方法を指定します。auto は「ブラウザ依存」を意味しますが一般的にはスクロールバーが表示されます。overflow: scroll; という指定も可能ですが、この指定では横スクロールも表示されるのでお勧めできません。

ただし BlogPeople のリンクリストでこの方法をこのまま適用して、リンクリスト表示用コード（青色）を

<div class="hogehoge">
<script language="javascript" type="text/javascript" src="・・・"></script>
</div>

と括ってしまうと、一番下に表示されるクレジットバナーがスクロールバーの中に含まれてしまい、エレガントではありません。

現在、BlogPeople のリンクリスト用のコードには予めクラス属性が与えられています（上記の表示用コードの状態では目視できません）。具体的には、リンクリスト用のコードがHTMLとして表示される時には、

<div class="blogpeople-main">
　　　　　　：
　　　（リンクリスト）
　　　　　　：
</div>
<div class="blogpeople-powered-by">
　　　　　　：
　（クレジットバナー）
　　　　　　：
</div>

というタグに変換され、div タグには blogpeople-main と blogpeople-powered-by というクラス属性（青色）が設定されています。要するに、div タグがリンクリストとクレジットバナーでそれぞれ独立しているので、この構造を利用してリンクリストのみにスクロールバーを設定することができます。以下、設定方法です。

２．出力形式の選択とコード生成

上記のように表示にするためには、BlogPeople 会員ページで「表示形式の設定」の出力形式を「DIVタグ形式」にします。選択したら一番下にある「コードの作成／更新」をクリックします。

３．作成コードをテンプレートに設定

生成されたコードをマウスコピーし、ブログのテンプレートの任意の位置に貼り付けます。

４．CSS設定

１項で説明した、リンクリスト用のクラス属性 blogpeople-main とクレジットバナー用のクラス属性 blogpeople-powered-by に対応するクラスセレクタをスタイルシート（styles-site.css）に新たに定義します。

.blogpeople-main {
    height: 300px;
    overflow: auto;
}
 
.blogpeople-powered-by {
　　　　　　　：
　（クレジットバナー用のスタイル）
　　　　　　　：
}

この設定を行うことで３項でテンプレートに設定したコード

<script language="javascript" type="text/javascript" src="・・・"></script>

は div タグで括らなくても、リンクリストが一定の長さになるとその部分にだけスクロールバーが付与され、クレジットバナーがスクロールバーの外側に表示されます。私の場合は

<div class="side">
<script language="javascript" type="text/javascript" src="・・・"></script>
</div>

とクラス属性 side で blogpeople-main 以外の全体のスタイル（フォント等）を指定しています。クレジットバナーのスタイル（margin 等）を特に定義する必要がなければ blogpeople-powered-by の定義は不要です。

実家から戻ってきたら BlogPeople の被リンクが500を超えてました。ブログを始めた当初、こんなに多くのリンクを頂けるとは全く予想もしておりませんでした。嬉しい限りです。
「こんなにリンクされているサイトは一体どんな人達だろう」と思っていたら、こんな人でした（笑）。

ということで記念エントリーです。当サイトへリンクくださっている皆様には本当に感謝しております。この場をお借りして改めましてお礼申し上げます。皆様の期待に応えられるよう、今後も努力していく所存（多分）ですので、より一層のご指導・ご支援を賜りますよう、どうぞよろしくお願い申し上げます。
左上のバナーは300被リンクから表示設定できるものですが、これを機に BlogPeople のリンクリスト下に表示してみます（気分で変えると思いますがとりあえず）。

上の話題とは関係ありませんが、BlogPeople会員ページの下の方に表示される「障害情報」、何気に面白いです（今日現在では普通のメッセージのようです）。

≪ 続きを隠す

複数ブログを運用していて、それぞれをBlogPeopleに登録したい場合、BlogPeopleのログインIDを別々に取得する必要があります。つまり管理画面もログインID分存在することになりますが、BlogPeopleでは複数ブログ運用者のためにちょっと便利な機能があります。

例えばある人が「A」「B」の2つのログインIDを持っていて、BlogPeoleの「A」の会員ページにログインしている状態から「B」の会員ページにログインする場合、再ログインするのではなく、「A」のページから直接切り替えることができます。
具体的には、後述する設定を行うことで、会員ページ左上にある黄色で表示された「Aさんログイン中」という右側に、画像のような [切替] というリンクが表示されます。それをクリックするとその下に他のログインIDが表示されるのでそれを選択することで切り替えることができます。

設定方法は、「A」「B」それぞれの会員ページメニュー下にある「BlogPeople会員情報の設定」をクリックし、次のページの下にある「複数ブログを運用している会員用設定」で他のログインID（とパスワード）を登録します。「A」の会員ページでは「B」の情報を、「B」の会員ページでは「A」の情報をそれぞれ登録します。登録可能なログインIDは3つまでです。また片方しか登録していないとジャンプ元の会員ページに戻ることができませんのでご注意ください。

BlogPoeple Tags というオンラインブックマークサービスが本日より提供されています。というのは下記の記事で知りました。素早い情報ありがとうございます。

今日の覚え書き：BlogPeople Tagを使ってみた

私のおおざっぱなイメージですが、まずブックマーク表示用のホームページを取得します。次に
あるサイト（何でもOKらしい）をブックマークする時にサイトの付加情報として「フォルダ」と「タグ」という2つの要素を設定します。例えば、

Aサイト：フォルダ「ショッピング」　タグ「ファッション」

Bサイト：フォルダ「ショッピング」　タグ「音楽」

Cサイト：フォルダ「チケット」　タグ「音楽」

の3サイトをそれぞれのフォルダ名およびタグ名でブックマークします。これが新しく取得するBlogPeople上のホームページで表示されるのですが、フォルダ「ショッピング」で選択するとA、Bサイトが表示され、タグ「音楽」で選択するとB、Cが表示されるという仕組みらしいです。またタグを介して他の方のブックマークを参照することができ、RSS検索も可能なようです。

とりあえず「ホームページ名」だけ取得した方がいいかも知れません。

サイドバー右に配している BlogPeople のリンクリスト（更新順に表示）がダイナミックに更新されなくなったのですが…私だけ？

遅くなってすいません（誰に言ってるんでしょう…）。以前我楽さんよりご提案ありました「ダジャレ・トラックバックピープル」用のバナーをこのエントリーにて募集致します。「バナー」とはこの画像の代わりとなるものを指します。

それで応募内容および応募方法（案ベース）ですが、

• どなたでも応募できます。
• 作成されたバナーをこのエントリーのコメントとして、<img src="?"/>ではりつけてください。画像はこちらのサイトに再アップロードしてsrc属性を適宜書き換える予定ですが、他に良いアイデアありましたらお待ち申し上げます（自サイトで投稿してここにトラックバック等）。
• 一定期間募集し、その後投票等で使用するバナーを決めたいと思います
• トラックバックピープルにはバナーを3つまで登録できるようですので3作品選ぶ予定です。3つまでしか応募がない場合は自動的に採用となります（応募がない場合等はデフォルトバナーを登録します）。

なお個人的な希望としては、

• デフォルトバナー左のマークはそのまま
• 背景色もそのまま
• まったりした感じ

です（自分で作れって？（笑））。
例えばトラックがバックしている絵など「バナーもダジャレかよ！」って感じでいいですね?。

上記に関してご意見・ご要望等ございましたらどしどしコメントください。
小粋なバナーをお待ち申し上げます。

…というのが目的ではなかったのですが下記の作業を行っているうちに気になったのでメモ。

リンクさせて頂いているサイトが更新された場合、（私の設定では）自動的にリストの上位に移動（そのリンクにマウスをのせると詳細情報がポップアップ表示）するのですが、BlogPeopleのリンクリストで更新対象にならないサイトがいくつかあります。それでそれらのサイトをMyBlogListのリンクリストへ移動してみることにしました。BlogPeopleで更新情報を取得できないサイトもMyBlogListでは取得できる（らしい）というのが理由です。
試しに、いずれのサービスにもユーザ登録していない自分の試験用サイトのURLを自分のリンクリストに追加してみたところMyBlogListでは更新情報が取得でき、BlogPeopleでは取得できませんでした。

そもそもこういったサービスの仕組み自体よく理解していないので（爆）ちょっと調べてみました。
BlogPeopleの場合はそこに登録されたサイトか、Weblogs.comやping.bloggers.jpに送信された更新Pingを収集�