トラックバック・ピープル(TBP:TrackBack People）を自ブログに貼るとき、ＣＳＳでデザインやレイアウトに凝ってると、そこだけどうしてもお粗末に見えてしまう。
で、TBP内で それぞれの出力形式に対するCSSのクラスが公開されているわけだけど、毎回ログインして参照するのも面倒なので、覚書として、エントリにしてみる（笑）
※以下抜粋
（2009/7/3現在 まんま抜粋だけど、そのうちxhtml準拠くらいに書き直すかもしれない）
————————-
blogpeople-tbp リンクリスト全体を括るクラス
blogpeople-tbp-title 話題のタイトル
blogpeople-tbp-link トラックバックされた各記事それぞれを括るクラス
blogpeople-tbp-site トラックバックされた各記事のサイト名
tbp2-popup 概要を表示するポップアップ全体
tbp2-popup-body ポップアップ内に表示される概要テキスト
tbp2-popup-ad ポップアップ内の画像
blogpeople-tbp-powered-by 「powered by BlogPeople」表記を括るクラス
以下に実際にリンクリストで出力されているHTMLの例を記載します。
【<DIV>形式出力】
<DIV class=”blogpeople-tbp”>
< DIV class=”blogpeople-tbp-title”><A title=”話題の説明文” href=”話題のURL” target=”_blank”>話題名</A></DIV>
< DIV onmouseover=’view_popup(“2-0”, true);’ onmouseout=’view_popup(“2-0″, false);’>
< DIV class=”blogpeople-tbp-link”><A href=”トラックバック記事URL” target=”_blank”><SPAN class=”blogpeople-tbp-site”>サイト名</SPAN>記事タイトル</A>< /DIV>
< DIV class=”tbp2-popup” id=”2-0″ style=”DISPLAY: none”>
< DIV class=”tbp2-top”></DIV>
< DIV class=”tbp2-popup-body”>トラックバック記事概要</DIV>
< DIV class=”tbp2-popup-ad” id=”ad-popup-2-0″><A href=”http://tbp.jp/”><IMG src=”http://blop.aivy.co.jp/TB_People/images/banner.gif”></A></DIV>
< DIV class=”tbp2-bottom”></DIV></DIV></DIV>
< DIV class=”blogpeople-tbp-powered-by”><A href=”http://tbp.jp/” target=_blank>Powered by BlogPeople</A> </DIV>【<UL><LI>形式出力】
<UL>
<DIV class=blogpeople-tbp-title><A title=”話題名” href=”話題URL” target=_blank>話題名</A></DIV>
<DIV onmouseover=’view_popup(“li2-0”, true);’ onmouseout=’view_popup(“li2-0″, false);’>
<LI><A href=”トラックバック記事URL” target=_blank><SPAN class=blogpeople-tbp-site>サイト名</SPAN>記事タイトル</A></LI& gt;</DIV>
<DIV class=tbp2-popup id=li2-0 style=”DISPLAY: none”>
<DIV class=tbp2-top></DIV>
<DIV class=tbp2-popup-body>トラックバック記事概要</DIV>
<DIV class=tbp2-popup-ad id=ad-popup-li2-0><A href=”http://tbp.jp/”><IMG src=”http://blop.aivy.co.jp/TB_People/images/banner.gif”></A></DIV>
<DIV class=tbp2-bottom></DIV></DIV></DIV>
</UL>
<DIV class=blogpeople-tbp-powered-by><A href=”http://tbp.jp/” target=_blank>Powered by BlogPeople</A> </DIV>
<DIV></DIV>
【<TABLE>形式出力】
<LINK href=”http://blop.aivy.co.jp/TB_People/feed/css/tpb2-popup.css” type=text/css rel=stylesheet>
<TABLE class=blogpeople-tbp cellSpacing=0 cellPadding=0 width=0 border=0>
<TBODY>
<TR class=blogpeople-tbp-tr-title>
<TD class=blogpeople-tbp-td-title>
<DIV class=blogpeople-tbp-title><A title=”話題名” href=”話題のURL” target=_blank>話題名</A></DIV></TD></TR>
<TR class=blogpeople-tbp-tr>
<TD class=blogpeople-tbp-td>
<DIV class=blogpeople-tbp-link onmouseover=’view_popup(“tb2-0”, true);’ onmouseout=’view_popup(“tb2-0″, false);’><A href=”トラックバック記事URL” target=_blank><SPAN class=blogpeople-tbp-site>サイト名</SPAN>記事タイトル</A
<DIV class=tbp2-popup id=tb2-0 style=”DISPLAY: none”>
<DIV class=tbp2-top></DIV>
<DIV class=tbp2-popup-body>トラックバック記事概要</DIV>
<DIV class=tbp2-popup-ad id=ad-popup-tb2-0><A href=”http://tbp.jp/”><IMG src=”http://blop.aivy.co.jp/TB_People/images/banner.gif”></A></DIV>
<DIV class=tbp2-bottom></DIV></DIV></DIV>
</TD></TR>
</TBODY></TABLE>
<DIV class=blogpeople-tbp-powered-by><A href=”http://tbp.jp/” target=_blank>Powered by BlogPeople</A> </DIV>
<DIV></DIV>