blog*citron

Blog PeopleやTrackback Peopleなどのリンクリストをつけたい。
でもつけてみたら縦に長く伸びてしまって不恰好に…なんて人へ。

• リンクリストを設置する
• 縦の長さを固定し自動でスクロールバーを表示させる

この2つをセットにした、コピー＆ペーストで出来るカスタマイズ。

06.09.01 : ソースの追記と見直し

HTMLの編集

設置場所は表示させたいところで構いません。
例えばリンクの下だと、sb系テンプレートなら<!-- END link -->の後に追加すればOKです。

Blog People

<dl> <dt>BLOG PEOPLE</dt> <dd> <div class="scroll">☆ここに呼び出しタグ☆</div> </dd> </dl>

BlogPeopleの呼び出しタグ

1. BlogPeopleにログイン
2. 表示形式の設定をクリック
3. 基本設定と詳細設定をお好みで設定
   • 詳細設定の10.リンクリストの出力形式と文字コードで、文字コードがブログと同じものになっているか確認。
   • 例えばブログがEUCなら、ここもEUCにしないと文字化けすることがあります。
4. コードの作成/更新で出てきたものをコピー＆ペースト

Trackback People

<dl> <!-- ★ --> <dt>TBPの名前</dt> <dd> <div class="scroll">☆呼び出しタグ☆</div> </dd> <!-- ★ --> </dl>

TBPの呼び出しタグ

1. この話題のリンクリストを作成する
2. バナーを選んで生成をクリック
3. 出てきたものをコピー＆ペースト

複数のTBPをつける場合は、<!-- ★ -->で囲んだ部分だけを繰り返します。

複数設置する場合

<dl> <dt>TBPの名前</dt> <dd> <div class="scroll">☆呼び出しタグ☆</div> </dd> <dt>TBPの名前</dt> <dd> <div class="scroll">☆呼び出しタグ☆</div> </dd> </dl>

CSSの編集

スクロールバーをつけるために、CSSに下記を加えます。 /* 部分的にスクロールバーをつける */ div.scroll { overflow:auto; height:250px; }

height:●●px;の部分は好きな縦の長さにして下さい。
デザインのカスタマイズに関しては下記のエントリにまとめています。

• Blog Peopleのカスタマイズ | blog*citron

blog*citronのテンプレートではdlを使っていますが、dl要素ではなくdivを使っている場合も

<div class="scroll">呼び出しタグ</div>

という形になれば良いので、基本的に同じ方法で構いません。

スクロールにわざわざdivを使っているのはmacIE向けのバグ対策だったりします。

同じ方法で色々なものを擬似フレームのように扱えるので、ブログパーツやオススメ商品が長くなった時にもいいかもしれません。しかし、見た目でスクロールされているだけですから、中身がたくさんあればそれだけ重くなります。貼りすぎには注意しましょう。