Movable Type 備忘録

BlogPeopleのリンクリストをデザインに合わせる

May312006
Author: bzbell
Categories: Tools
Tags: BlogPeople, Tools

Next Page: トラバわんにゃん
Prev Page: SimpleAPIでウェブサイトのサムネイル化

BlogPeopleのリンクリストのカスタマイズとして、BlogPeopleのリンクリストをツリー化してみるでも紹介しましたが、今回はCSSのみでブログのデザインに合ったカスタマイズをやってみました。

最近、テンプレートを変更しまして、サイドバーでツリー表示していたカテゴリ一覧など全部削除しちゃいました。
だって、統一感がないんだもん。

部分的にツリー表示ってのもなんかかっこ悪く思えちゃって (;￣∇￣A
でもいつものように、たまたま今はツリー表示が気に入らないだけでまた気が変わるかもしれませんけどね。

ツリー表示していたものの1つにBlogPeopleのリンクリストもありましたが、これもツリー表示をやめてCSSでまわりのデザインに合わせるように変更しました。

リンクリストのクラス

Warning: include() [function.include]: URL file-access is disabled in the server configuration in /virtual/bzbell/public_html/archives/2006/05/31-001511.php on line 79

Warning: include(http://bizcaz.com/widget/litebox.php?url=http://bizcaz.com/image/zu/blogpeople2.gif&width=378&height=227&title=) [function.include]: failed to open stream: no suitable wrapper could be found in /virtual/bzbell/public_html/archives/2006/05/31-001511.php on line 79

Warning: include() [function.include]: Failed opening 'http://bizcaz.com/widget/litebox.php?url=http://bizcaz.com/image/zu/blogpeople2.gif&width=378&height=227&title=' for inclusion (include_path='.:/usr/local/lib/php') in /virtual/bzbell/public_html/archives/2006/05/31-001511.php on line 79

まず、BlogPeopleのリンクリストで使われているクラスを説明します。
div出力を前提にここでは進めていきます。

BlogPeopleのリンクリストは、ご存知のように JavaScript で表示されますよね。
この JavaScript のURLを直接ブラウザで表示させると、実際に表示されるコードを見ることができます。

右図は出力されたリンクリストの構造図です。

もうこの図を見れば、どんな構造しているか分かると思いますが、一応コメントさせてください。

div.blogpeople-main
リンクリスト全体を囲ったクラスです。

リンクリストの背景とか、全体のマージンを設定したりなどできそうですね。
div.blogpeople-main p
リンクリストのブロックです。複数のリンクリストを作っている場合、このブロック単位にリンクリストが出力されます。ブログで言えばカテゴリに相当しますかね。
span.blogpeople-linklist
リンクリストの名前ですね。
span.bplist
リンクリストのリンク部です。
div.blogpeople-powered-by
BlogPeopleのクレジットバナーです。

というかんじで、BlogPeopleのリンクリストを分解してみました。
では、リンクリストの構造が分かったところで、実際にCSSでデザインしてみましょう。

以下のコードは、実際にわたしのブログのリンク集で使っているコードです。

div.blogpeople-main {
    margin: 0px;
    padding: 0px; 
    padding-bottom: 20px;
}

div.blogpeople-main p { 
    margin: 0px;
    padding: 0px; 
}

span.blogpeople-linklist {
    margin: 0px;
    padding: 0px;
    padding-left: 10px;
    background: url("/image/template/tick.gif") no-repeat left center;
}

div.blogpeople-main p a {
    margin: 0px;
    padding: 0px;
    padding-left: 20px;
    background: url("/image/template/tick2.gif") no-repeat 10px center;
}

div.blogpeople-powered-by {
    display: none;
}

こんなかんじで、自分のサイトのデザインに合ったリンクリストを表示させることができます。
チャレンジしてみてください。

ちなみに、トラックバック・ピープルも同様にブラウザで直接表示することで構造を確認することができます。