TopサービスBlogPeople > 2005年5月
2005年5月31日

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

May 31,2005 8:50 PM
Tag:[, , , ]
Permalink

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

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>

以下カスタマイズ方法です。

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

各テンプレートに設定している、トラックバックピープルのリストを表示するタグ

<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 属性名と重複しないこと)。
追加が終わったら保存・再構築してください。

2.テンプレートにJavaScript追加

1項のトラックバックピープル表示用タグの下に、下記のスクリプト(青色)を追加します。

<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行目の右辺(赤色)には、1項で設定した id 属性名を設定してください。
追加が終わったら保存・再構築してください。

3.CSS設定

下記のクラスセレクタをスタイルシート(styles-site.css)に新たに定義します。場所はどこでも大丈夫です。

.blogpeople-tbp-box {
    /* 必要に応じて設定 */
}
 
.blogpeople-tbp {
    overflow: auto;
    height: 60px;
}
 
.blogpeople-tbp-credit {
    margin-top: 10px;
    margin-bottom: 0px;
}

上から順番に、全体・リンクリスト用・クレジットバナーおよびクレジット用のスタイルです。内容は適宜変更してください。
もし同一名称のクラスセレクタがすでに存在する場合は、クラスセレクタを任意の名称に変更してください。その場合、2項のスクリプトに埋め込まれた3項のクラスセレクタ名を変更した名称に修正してください。
追加が終わったら保存・再構築してください。

以上です。Windows2000・XPのIE6.0/Netscape7.0/Firefox1.0/Opera7.23・8.0で正常に表示されることを確認しています。

2005.07.25 追記
2項のHTMLタグに誤りがありましたので修正しました。

Comments [27] | Trackbacks [16]
2005年5月11日

BlogPeople のリンクリストにスクロールバーをつける

May 11,2005 11:58 PM
Tag:[, , , , ]
Permalink

BlogPeople のリンクリストにスクロールバーを付与するカスタマイズを紹介します。参考記事は BlogPeople 主催者の

Modern SyntaxBlogPeopleリスト出力形式の変更のお知らせ

です。ありがとうございました。
かなり以前より色々なサイトでカスタマイズ方法が紹介されていますが、ここでは仕組みの詳細についてかみくだいて書いてみました。

1.CSSでスクロールバーを表示する方法

基本的手法として、サイドバーのメニューリストにスクロールバーを表示する方法は、

.hogehoge {
    height: 200px;
    overflow: auto;
}

というクラスセレクタを作り、メニューリストを div タグで括って

<div class="hogehoge">
     :
 (メニューリスト)
     :
</div>

とクラス属性 hogehoge(青色)を与えることで、メニューリストが200pxを超える長さになるとスクロールバーが自動的に付与されます。
overflow は指定したサイズ(ここでは200px)にコンテンツが入らない場合にはみ出した部分の表示方法を指定します。auto は「ブラウザ依存」を意味しますが一般的にはスクロールバーが表示されます。overflow: scroll; という指定も可能ですが、この指定では横スクロールも表示されるのでお勧めできません。

ただし BlogPeople のリンクリストでこの方法をこのまま適用して、リンクリスト表示用コード(青色)を

<div class="hogehoge">
<script language="javascript" type="text/javascript" src="・・・"></script>
</div>

と括ってしまうと、一番下に表示されるクレジットバナーがスクロールバーの中に含まれてしまい、エレガントではありません。

現在、BlogPeople のリンクリスト用のコードには予めクラス属性が与えられています(上記の表示用コードの状態では目視できません)。具体的には、リンクリスト用のコードがHTMLとして表示される時には、

<div class="blogpeople-main">
      :
   (リンクリスト)
      :
</div>
<div class="blogpeople-powered-by">
      :
 (クレジットバナー)
      :
</div>

というタグに変換され、div タグには blogpeople-main と blogpeople-powered-by というクラス属性(青色)が設定されています。要するに、div タグがリンクリストとクレジットバナーでそれぞれ独立しているので、この構造を利用してリンクリストのみにスクロールバーを設定することができます。以下、設定方法です。

2.出力形式の選択とコード生成

上記のように表示にするためには、BlogPeople 会員ページで「表示形式の設定」の出力形式を「DIVタグ形式」にします。選択したら一番下にある「コードの作成/更新」をクリックします。

3.作成コードをテンプレートに設定

生成されたコードをマウスコピーし、ブログのテンプレートの任意の位置に貼り付けます。

4.CSS設定

1項で説明した、リンクリスト用のクラス属性 blogpeople-main とクレジットバナー用のクラス属性 blogpeople-powered-by に対応するクラスセレクタをスタイルシート(styles-site.css)に新たに定義します。

.blogpeople-main {
    height: 300px;
    overflow: auto;
}
 
.blogpeople-powered-by {
       :
 (クレジットバナー用のスタイル)
       :
}

この設定を行うことで3項でテンプレートに設定したコード

<script language="javascript" type="text/javascript" src="・・・"></script>

は div タグで括らなくても、リンクリストが一定の長さになるとその部分にだけスクロールバーが付与され、クレジットバナーがスクロールバーの外側に表示されます。私の場合は

<div class="side">
<script language="javascript" type="text/javascript" src="・・・"></script>
</div>

とクラス属性 side で blogpeople-main 以外の全体のスタイル(フォント等)を指定しています。クレジットバナーのスタイル(margin 等)を特に定義する必要がなければ blogpeople-powered-by の定義は不要です。

Comments [20] | Trackbacks [20]
2005年5月10日

BlogPeople 500 被リンク達成

May 10,2005 8:30 PM
Tag:[, ]
Permalink

BlogPeople実家から戻ってきたら BlogPeople の被リンクが500を超えてました。ブログを始めた当初、こんなに多くのリンクを頂けるとは全く予想もしておりませんでした。嬉しい限りです。
「こんなにリンクされているサイトは一体どんな人達だろう」と思っていたら、こんな人でした(笑)。

ということで記念エントリーです。当サイトへリンクくださっている皆様には本当に感謝しております。この場をお借りして改めましてお礼申し上げます。皆様の期待に応えられるよう、今後も努力していく所存(多分)ですので、より一層のご指導・ご支援を賜りますよう、どうぞよろしくお願い申し上げます。
左上のバナーは300被リンクから表示設定できるものですが、これを機に BlogPeople のリンクリスト下に表示してみます(気分で変えると思いますがとりあえず)。

上の話題とは関係ありませんが、BlogPeople会員ページの下の方に表示される「障害情報」、何気に面白いです(今日現在では普通のメッセージのようです)。

Comments [10] | Trackbacks [0]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3