小粋空間: トラックバックピープルにスクロールバーをつける

Top ＞サービス＞ BlogPeople ＞トラックバックピープルにスクロールバーをつける

News

各種ブログテンプレート

2005年5月31日

エントリー本文

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

Posted at May 31,2005 8:50 PM
Category：[BlogPeople]
Tag：[Customize, Link, Scrollbar, TrackbackPeople]

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

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タグに誤りがありましたので修正しました。

Posted by yujiro ReTweet This!

« メジャーも | Main | MyBlogList が表示されない件 »

この記事を読んだ人はこんな記事も読んでいます

人気エントリー

Hatena Hot Entries

Hatena Entries

トラックバックURL

このエントリーのトラックバックURL:

このブログは重複トラックバック防止プラグインにより、同一エントリーに対する同一のトラックバックは登録されないようにしています（記事のタイトルまたは記事の概要が異なる場合は登録されます）。

トラックバック

≫ TrackbackPeopleにもスクロールバーを付けよう from やむやむ
ここのエントリの時に、MyblogList や BlogPeople のリンク... [続きを読む]

Tracked on June 1, 2005 11:14 AM

≫ ﾄﾗｯｸﾊﾞｯｸﾋﾟｰﾌﾟﾙにｽｸﾛｰﾙﾊﾞｰ（欲張りな私でも(＞▽＜)b OK!!） from COCO::RO
小粋空間サンのところでトラックバックピープルにスクロールバーをつけるというエン... [続きを読む]

Tracked on June 3, 2005 11:32 PM

≫ 今日の日記。 from ＣＵ＊Ｃｈｕ！
大阪組の皆さんおつかれさまです。そんな私は、昨日からブログをとことんいじり倒し... [続きを読む]

Tracked on June 5, 2005 10:35 PM

≫ ようやくBlogPeople設置。 from サンフランのもっとお日さまサンサンサン
ゆうべから四苦八苦してたBlogPeople、ようやく設置しました。 [続きを読む]

Tracked on June 6, 2005 6:03 PM

≫ TB PEOPLEリストにスクロールバーを付ける from KALEIDO-SCOPE
TB Peopleにスクロールバーをつける [続きを読む]

Tracked on June 7, 2005 9:31 PM

≫ トラックバックピープルにスクロールバーをつける from candy-2 BLOG
小粋空間様のトラックバックピープルにスクロールバーをつけるを、設置してみました。... [続きを読む]

Tracked on June 18, 2005 5:10 PM

≫ Trackback Peopleにスクロールバーを付けてみた。 from FSRに乗って
カスタマイズの参考にさせていただきました。分かりやすい説明のおかげで助かりました。 [続きを読む]

Tracked on July 3, 2005 7:13 PM

≫ FC2ランキングの設置とか諸々 from Old Dancer's BLOG
　昨日辺りから、結構大がかりにブログの体裁をいじっています。その主たる目的は、「パーツの増殖に伴って長大化した縦方向を、短縮する方向を目指しての整理・取捨選択」... [続きを読む]

Tracked on August 31, 2005 9:18 PM

≫ トラックバックピープルにスクロールバーを付け、バナーは外に出す(livedoorブログ対応) from ん?？（￣?￣;）
トラックバックピープル(Trackback People)にスクロールバーを付けるのは、 CSSに .blogpeople-tbp { &nb... [続きを読む]

Tracked on October 20, 2005 3:58 AM

≫ BlogPeople from 永遠の風
webサイトの日記コンテンツにしていたこのブログですが、別館として独立させたのを... [続きを読む]

Tracked on November 10, 2005 8:56 PM

≫ カスタマイズ100％完成 from ☆☆MemoLo?gu♪♪
カスタマイズ大詰めで頑張ってみました[:楽しい:] ?リンクタイトル画像[:リース:]とブログタイトル画像[:ツリー:]の変更+ コメント＆トラック... [続きを読む]

Tracked on December 2, 2005 6:34 PM

≫ TBPeopleにスクロールバーをつける from ぼちぼちいこか
トラックバックピープルのリンクリストを増やすとサイドバーが　かなりウザイ状態になってしまうので今までは過去記事として別のページに表示させて... [続きを読む]

Tracked on December 23, 2005 4:54 AM

≫ トラックバックピープルにスクロールバー from Free Style
欲張りな私は、いろんなトラックバックピープルに参加。参加中のトラックバックピー... [続きを読む]

Tracked on January 7, 2006 7:34 PM

≫ BlogPeopleとTrackbackPeople from showry's Blog
最近のエントリーがBlogPetにお任せ状態が続いているので、たまには自分で書い... [続きを読む]

Tracked on February 21, 2006 9:36 PM

≫ 複数のTBピープルをスクロールバーに from kisatonomori blog
　気に入ったトラックバックピープルのジャンルにスクロールバーをつけてそれぞれのクレジットバナーをスクロールバーから出して表示参考は... [続きを読む]

Tracked on November 7, 2006 6:05 PM

≫ weblogカスタマイズ2・小粋空間さんより from おかち日和
SereneBachでウェブログを新しく作るにあたり、たくさんの技をお借りしました。 [続きを読む]

Tracked on January 16, 2007 5:20 PM

(・Ω・)ノコンニチワー
トラックバックURLの欄、コピーしやすくなってますね。( ^ー゜）b
トラックバックピープルにスクロールバー　やってみました。
結局、高さを今のところ高めにしてるから、スクロールバー表示されてません。
見た目には　なんにもしてないのと同じ状態ですが、今後、縮める気になったときには
CSSのheightのとこだけ数字を変えればいいので楽チンです。

[1] Posted by さえら : June 1, 2005 10:36 AM

＞さえらさん
こんばんはー。
ご利用＆トラックバックありがとうございます。

将来的に表示リスト数が増えることを期待しましょう。（笑）

[2] Posted by yujiro : June 1, 2005 9:28 PM

URLの間違い　指摘してくださってありがとうございました。修正しておきましたぁ。
そうですね。10件って決まってなくて、設定できればいいのに・・・って思います。
それよか、Myblog　ずっと一日以上おちたままですよね。（￣?￣；）

[3] Posted by さえら : June 2, 2005 7:09 AM

＞さえらさん
おはようございます。
ご連絡ありがとうございました。

MyblogList、エントリーの通り、まだドメイン登録が反映されていないようですね。私も困ってます。
一旦非表示にしておいた方がいいかも知れませんね。

[4] Posted by yujiro : June 2, 2005 9:14 AM

初めまして♪
いつもいつも、小粋空間サンところのカスタマイズは参考にさせていただいてるのですが
初めてコメント残させていただきます。ﾍﾟｺﾘ(o_ _)ｏ))

トラックバックピープルのバナーを残したｽｸﾛｰﾙﾊﾞｰの設定は出来ないのかなぁと
試行錯誤しながらやってみたのですが、上手くいかなくて・・・；
このエントリーが挙がって、早速参考にさせていただきました。ありがとうございます。
TBも飛ばさせていただきました。

[5] Posted by myao : June 3, 2005 11:35 PM

＞myaoさん
はじめまして。
記事参照＆トラックバックありがとうございました。
気に入って頂けたようで良かったです。
それでは今後ともどうぞよろしくお願い致します！

[6] Posted by yujiro : June 4, 2005 12:47 AM

TBPのスクロールについて質問した、なつです。
丁寧に解説してくださってありがとうございました！
私には到底できるはずのなかったテクでした…感謝しております。

また困ったことがあったら質問させていただきますね。

[7] Posted by なつ : June 4, 2005 9:47 PM

＞なつさん
こんばんは。
お役に立てたようで良かったです。
また何かございましたらお気軽にご連絡ください。
ではでは！

[8] Posted by yujiro : June 4, 2005 11:31 PM

トラックバック・ピープルにスクロールバー、私もやってみました。
BPと高さを合わせて、統一感を出してみました。
と言っても通常サイドバーを閉じているので、気付いて貰えないかも(笑)

[9] Posted by ねーさん : June 18, 2005 7:49 PM

＞ねーさん
こんばんは。
ご利用＆ご連絡ありがとうございます。

気づきました。（笑）

[10] Posted by yujiro : June 18, 2005 10:54 PM

とても分かりやすい説明だったので、無知な私でも、トラックバックピープルにスクロールバーをつけることができました?。
本当にどうもありがとうございました。

[11] Posted by チカ : August 1, 2005 8:10 AM

＞チカさん
こんにちは。
ご利用＆ご連絡ありがとうございました。
うまくできたようで良かったです。

[12] Posted by yujiro : August 2, 2005 1:02 PM

はじめまして。

こちらの記事でホントに助かりました。
おかげで4つもTB　Peopleを設置することができて感謝してます

どうもありがとうございました。

[13] Posted by migu : December 2, 2005 6:33 PM

＞miguさん
はじめまして。
ご利用＆ご連絡ありがとうございます。
うまう設置できたようでよかったです。
ではでは！

[14] Posted by yujiro : December 3, 2005 2:06 PM

はじめまして。
トラックバックピープルのリンクリストのデフォルトのタグをどうやって表示させるのかわからなくて、とりあえず「以下カスタマイズ方法です。」以降の手順1?3に従ってスクロールバーを設置してみましたが、やはりバナーとクレジットは外に出てくれません。
やはりデフォルトのタグに青色の div タグを挿入しておかないとだめなのでしょうか？

[15] Posted by k* : December 13, 2005 12:21 AM

＞k*さん
はじめまして。
ご利用ありがとうございます。

ご質問の件ですが、２項で示したスクリプトの行末に <br> という文字が含まれているようです。この状態ではスクリプトが正常に動作いたしませんので、<br> を全て削除して、再度実行してみてください（ソースを拝借して確認したところ、OKになりました）。

以上です。
それではよろしくお願い致します。

[16] Posted by yujiro : December 13, 2005 1:12 AM

こんにちは。
ご回答ありがとうございます。
スクリプトを貼り付けていたエリアの改行設定を"
に変換"としていたのですが、その設定を外したらバナー＆クレジットが外に出てくれました！！
昨日何時間も悩んであれこれやっていたので、とても嬉しいです?！！
ありがとうございました☆

[17] Posted by k* : December 13, 2005 8:47 AM

＞k*さん
こんばんは。
ご連絡ありがとうございました。
うまくできてよかったです。
URL変更されたようですが再度ご連絡頂ければ幸いです。
ではでは！

[18] Posted by yujiro : December 14, 2005 1:32 AM

ハジメマシテ☆
とてもわかりやすい説明を書いていただき　ありがとうございます。　おかげさまで　「トラックバックピープルにスクロールバー」　に成功しました♪
・・・が
リンクリストを増やすと
横スクロールが表示されるようになってしまいました。
複数表示させる為にはCSSをいじる必要があるのでしょうか？

[19] Posted by あかね : December 22, 2005 10:09 AM

【追記】
試しにあと２つリンクリストを増やしてみたら
今度は　２つとも横スクロールしませんでした。
今のところ　横スクロールが表示されているのは
２つ目の　プチモールブログだけです。
複数表示に関する疑問は無くなりましたので　私の上記コメントの削除をお願いいたします。
かなりHTMLとニラメッコしたつもりですが
どこかが間違ってるはずですので　ニラメッコを続行します（汗）

[20] Posted by あかね : December 22, 2005 5:33 PM

【追記２】
どうしても　プチモールブログにだけ下スクロールが出てしまうので
.blogpeople-tbp　に　overflow-x: hidden;を追記して強制的に消しました。
お騒がせして申し訳ありませんでした（礼）

[21] Posted by あかね : December 23, 2005 1:38 AM

＞あかねさん
こんばんは。
カスタマイズご利用ありがとうございます。

ご返事遅くなってすいません。
横スクロールが表示されるのは特定のTBPだけですので、表示されている文字の何かが影響しているのではないかと思います。

overflow-xプロパティはIE特有のものですが、他のブラウザでは横スクロールしないようですので、あかねさんの対処で大丈夫と思われます。

以上です。
それではよろしくお願い致します。

[22] Posted by yujiro : December 23, 2005 3:32 AM

お返事ありがとうございます☆
タグフレンズのほうも一時的に横スクロールが表示されてしまいましたので　焦って強攻策をとってしまいました（汗）
トラバと紹介文の中での文中リンクをさせていただきました☆
今後とも　どうぞよろしくお願いいたします。
（何度もひとりで連続投稿してしまい　申し訳ありません。）

[23] Posted by あかね : December 23, 2005 5:51 AM

＞あかねさん
こんばんは。
ご連絡ありがとうございます。
また文中リンク＆トラックバックも併せてありがとうございました。

こちらこそ今後ともどうぞよろしくお願い致します。

[24] Posted by yujiro : December 24, 2005 2:33 AM

こんばんは。
先日は、ありがとうございました。
書籍6.10のタグの件ですが、各ブログ記事に表示されるリスト件数を10件にしそれ以上の場合は、スクロールバーを表示したいのですが、色々他のサイトを調べてみたりしたのですが、方法がわかりません。お手数ですが、ご指導お願い申し上げます。

[25] Posted by kankiti : August 28, 2008 10:37 PM

＞kankitiさん
こんばんは。
ご質問の件ですが、関連記事を表示する部分の

<div class="content">

を

<div class="content hoge">

に変更して、スタイルシートに

.hoge {
    min-height:0;
    max-height:220px;
    overflow:auto;
}

を追加してください。hoge は別の名前でもかまいません。
IE6では動作しないので予めご容赦ください。
それではよろしくお願い致します。

[26] Posted by yujiro

: August 29, 2008 12:53 AM

こんにちは。
どうもありがとうございました。
毎回のことですが、ほんまに助かってます。

[27] Posted by kankiti : August 30, 2008 4:14 PM

コメントする

greeting

名前（N）: *必須

メールアドレス（M）:

URL（U）:

情報を保存する？

ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

コメント（C）:

[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り（プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り）、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「<」、「>」は「>」と入力してください。例えば「<$MTBlogURL$>」は「<$MTBlogURL$>」となります（全て半角文字）

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

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

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

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

３．CSS設定