blog*citron

登録サイトが増えるとごちゃごちゃしがちなBlog Peopleのリスト。CSSでリンクリスト（カテゴリ）ごとの見た目の区別をはっきりつけてあげることで、ちょっとスッキリさせてみるテスト。（※div出力形式のもの）

4パターンのサンプルとソースを載せています。
使い方はCSSにコピー＆ペーストするだけです（アイコン等は必要なものは別途ご用意下さい）カスタマイズはご自由にどうぞ。

リンクカラーはお使いのテンプレートの設定によりますが、サンプルで使用している色を記載していますので参考にどうぞ。テンプレートと雰囲気を揃えたい場合は、テンプレート内で使われている色から選んで合わせるのがオススメです。

NO IMAGE A
linkcolor: #89ac36

画像を使わないタイプ。
各リンクリストの名前のところを付箋のようにして目立たせたデザイン。リスト内は１文字分内側に寄せています。

/* BPList - NO IMAGE A */ div.blogpeople-main p { padding:5px 0; } div.blogpeople-main p a { margin:0 0 0 1em; } span.blogpeople-linklist { display:block; padding:0 0 0 5px; color:#e0b228; font-weight:bold; border-left:7px solid #ccc; border-bottom:1px solid #ccc; }

NO IMAGE B
linkcolor: #666

画像を使わないタイプ。
ブログピープルのリスト自体を囲み、更にリンクリストごとにブロック分けして仕切っています。リンクリスト名は目立つ色でマーキング。

/* BPList - NO IMAGE B */ div.blogpeople-main { padding:0 5px; border:1px dashed #345d90; } div.blogpeople-main p { margin:5px 0; padding:3px 0; border:1px solid #ccc; } div.blogpeople-main p a { padding:0 0 0 15px; } span.blogpeople-linklist { padding:0 0 0 5px; color:#be3135; font-weight:bold; }

LIST ICON TYPE
linkcolor: #c1688c

リストにアイコンを使用。
サンプルでは矢印ですが、お花でも何でもお好みで。フォントサイズに対して小さめのサイズの方がバランスが良いと思います。

/* BPList - LIST ICON TYPE */ div.blogpeople-main p { margin:5px 0; } div.blogpeople-main p a { padding:0 0 0 15px; /* アイコン幅に合わせて変更 */ background:url(アイコン画像のURL) no-repeat left center; } span.blogpeople-linklist { display:block; padding:0 0 0 5px; color:#66b4a8; font-weight:bold; text-align:right; border-bottom:1px dashed #ccc; }

TITLE ICON TYPE
linkcolor: #B03F74

タイトルにアイコンを使用。
リンクリストのタイトルにワンポイントをつけてみる。 アイコンではなくストライプや水玉の壁紙をつけてもOK。壁紙を貼る場合はbackground指定のright top no-repeatを削除して下さい。

/* BPList - TITLE ICON TYPE */ div.blogpeople-main p { margin:10px 0; } div.blogpeople-main p a { padding:0 0 0 1em; } span.blogpeople-linklist { display:block; color:#000; font-weight:bold; background:url(アイコン画像のURL)right top no-repeat; border-bottom:1px dashed #000; }

Tips - リンクリスト？
リンクリストというのは、ブログピープルの管理画面で設定するカテゴリのようなものです。ログインして「リンクリストの作成」からいくつでも作ることができます。
Firend、Blog、News、Movieなどカテゴリ分けしておくと便利です。

Tips - div形式のclass名
div出力の場合、リストにはこんなclass名が設定されています。
カスタマイズの参考にどうぞ。

• div.blogpeople-main: BPリスト全体
• div.blogpeople-main p: リンクリストのブロック
• span.blogpeople-linklist: リンクリストの名前
• div.blogpeople-main p a: リンク
• span.blogpeople-update-suffixtext: up!のテキスト
• div.blogpeople-powered-by: フッターのBPクレジット

1行ごとに<br />が挟まれているためspanやaをdisplay:blockにすると下に１行分のスペースが入ることに注意。 ソースを見たい場合は自分のリストの呼び出しjsを直接ブラウザに打ち込むか、ダウンロードしたものをテキストエディタで開けば見ることが出来ます。