BlogRolling にスクロールバーをつける

BlogRolling にスクロールバーをつける

Posted at December 28,2005 11:57 PM
Tag:[Customize, DrecomRSS, Scrollbar]

BlogRolling にスクロールバーをつけるBlogRolling の blogroll(リンクリスト)にスクロールバーをつけるカスタマイズをご紹介します。スクリーンショットのように、クレジットをスクロールバーの外に追い出すことができます。
当サイトでは、テンプレートユーザさんをリスティングしている「小粋なUserList」で BlogRolling を使用していますので、ブログに「小粋なUserList」を設定されている方にお勧めです。

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

1.blogroll を div タグ等で括る

下記のように blogroll を表示するタグを div 要素で括り、id 属性 hogehoge を div 要素に記述してください。

<div id="hogehoge">
<script language="javascript" type="text/javascript" src="http://rpc.blogrolling.com/display.php?r=xxxxx"></script>
</div>

Serena Bach で定義型リスト(dl - dt - dd)を使っている場合は、下記のように dd 要素の中に div 要素を与えてください。

<dl class="xx">
<dt id="xxname">LIST</dt>
<dd id="xxlist">
<div id="hogehoge">
<script language="javascript" type="text/javascript" src="http://rpc.blogrolling.com/display.php?r=xxxxx"></script>
</div>
</dd>
</dl>

2.表示タグにスクリプトの追加

下記のスクリプト(青色部分)を、1項で修正したタグの下に追加してください。

<div id="hogehoge">
<script language="javascript" type="text/javascript" src="http://rpc.blogrolling.com/display.php?r=xxxxx"></script>
</div>
 
<script type="text/javascript">
<!--
id = 'hogehoge';
tag1 = '<a';
if (window.navigator.userAgent.indexOf("MSIE") != -1) {
    tag1 = tag1.toUpperCase();
}
tag2 = 'BlogRolling';
nodes = document.getElementById(id).innerHTML;
data = '';
list = nodes.split(tag1);
counter = 0;
for (i = 0; i < list.length; i++) {
    if(list[i].indexOf('<br><br>') != -1) {
        list[i] = list[i].replace(/<br>/,"");
    }
    if(list[i].indexOf(tag2) != -1) {
        data += '</div><div class="blogroll-powered-by">' + tag1 + list[i];
    } else {
        if(counter){
            data += tag1;
        }
        data += list[i];
    }
    counter++;
}
document.getElementById(id).innerHTML = data + '</div>';
//-->
</script>

赤色で示した

id = 'hogehoge';

ですが、hogehoge の部分に、1項で設定した id 属性と同じものを設定してください。

3.スタイルシートの設定

BlogList用のCSSとして、スタイルシートに下記を追加します。

.blogrollmain {
    overflow: auto;
    height: 200px;
}
 
.blogroll-powered-by {
    margin-top: 5px;
    margin-bottom: 0px;
}

スクロールバーの高さを変える場合は

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

の赤色部分を修正してください。

関連記事
zenback
人気エントリー
トラックバックURL


トラックバック

小粋ユーザリストのスクロールバー from やむやむ
BlogRolling の リンクリスト、我が やむやむでは 小粋ユーザリスト ... [続きを読む]

Tracked on December 29, 2005 10:23 AM
コメント

おはようございま?す。今回はすんなりできましたぁ。ありがとうございました。
一年間 あれこれお世話になりました。来年もどうぞよろしくお願い致します。_(._.)_

[1] Posted by さえら : December 29, 2005 9:55 AM

トラックバックがとびません。o(;△;)o
名前のところの文字化け、直ってます。お忙しいのに早速ありがとうございました。

[2] Posted by さえら : December 29, 2005 10:52 AM

>さえらさん
こんばんは。
早速のご利用ありがとうございます。
トラックバックは迷惑トラックバックの方に登録されてしまっていましたので解除しました。

こちらこそ色々とお世話になりました。
来年もどうぞよろしくお願い致します。

[3] Posted by yujiro : December 30, 2005 12:21 AM
コメントする
greeting

*必須

*必須(非表示)


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

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

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

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