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

MyBlogList にスクロールバーをつける（改）

MyBlogListのリンクリストにスクロールバーをつけるカスタマイズです。（改）マークはJavaScriptによってクレジットバナーおよび「ListMe」をスクロールバーの外に追い出すことを指しています。

BlogPeopleのリンクリストにスクロールバーをつける場合は、div タグを付与する設定でリンクリスト表示用コードを生成すれば、div タグに予め指定されたクラス属性に対するスタイルを与えることでバナーをスクロールバーから外に追い出せたのですが、MyBlogListの場合は表示用コード生成でそのようなオプションが用意されていないため分割ができません。リストはバナーや「ListMe」を含め、単純に a タグが並んでいるだけのようです。

ということで、バナーおよび「ListMe」をスクロールバーの外に完全に追い出すためのスクリプトを作りました。スクロールバーの一番最後にも「by MyblogList」を表示しません。
具体的には BlogPeople と同様、リンクリストとバナーおよび「ListMe」をそれぞれ <div>～</div> タグで括り、個別にスタイルを与えることができるようにしました。リストの一番最初と最後に "<div>" および "</div>" をつけるのは簡単ですが、単純に並んだ a タグの途中でどのようにして div タグを挿入するかで悩みました。結局、a タグ（"<a"）で分割して検索していき、クレジットバナーの img タグが出現した時点で "</div><div>" を付与、「ListMe」については「MyblogList」という文字を検索して同様に "</div><div>" を追加という方法に落ち着きました。クレジットバナーに画像を使っていない場合も考慮しています。
2005.05.20 追記：リストへの日付や時刻の付与、および画像を用いたNEW装飾にも対応できるように改良しました。
以下カスタマイズ方法です。

１．MyBlogList 表示用タグの修正

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

<script language="javascript" type="text/javascript" src="http://list.myblog.jp/list/js…" charset="EUC-JP"></script>

を div タグ等で括って

<div class="side" id="hogehoge">
<script language="javascript" type="text/javascript" src="http://list.myblog.jp/list/js…" charset="EUC-JP"></script>
</div>

としてください。括られていない場合は、サンプルのようにタグを追加してください（タグは div でなくても大丈夫と思いますが、他のタグについては動作未確認です）。
hogehoge の部分は、任意の id 属性名を設定してください。id 属性名はページ内で一意になる名称にしてください（=他の id 属性名と重複しないこと）。
追加が終わったら保存・再構築してください。

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

１項の MyBlogList 表示用タグの下に、下記のスクリプト（青色）を追加します。

<div class="side" id="hogehoge">
<script language="javascript" type="text/javascript" src="http://list.myblog.jp/list/js…" charset="EUC-JP"></script>
</div>
 
<script type="text/javascript" language="javascript">
<!--
id = 'hogehoge';
image = 1;
 
tag1 = '<a';
if (window.navigator.userAgent.indexOf("MSIE") != -1) {
    tag1 = tag1.toUpperCase();
}
if (!image) {
    tag2 = '>by MyblogList<';
} else {
    tag2 = 'myblog_list_banner';
}
nodes = document.getElementById(id).innerHTML;
data = '<div class="mybloglist-main">';
list = nodes.split(tag1);
counter = 0;
for (i = 0; i < list.length; i++) {
    if(list[i].indexOf('window.open') != -1) {
        data += '</div><div class="mybloglist-listMe">' + tag1 + list[i];
        break;
    }
    if(list[i].indexOf(tag2) != -1) {
        data += '</div><div class="mybloglist-powered-by">' + tag1 + list[i];
    } else {
        if(counter){
            data += tag1;
        }
        data += list[i];
    }
    counter++;
}
document.getElementById(id).innerHTML = data + '</div>';
//-->
</script>

スクリプトの3行目の右辺（赤色）には、１項で設定した id 属性名を設定してください。またクレジットバナーに画像を用いず「by MyblogList」を表示している方は、4行目の赤色を

image = 0;

に変更してください。
追加が終わったら保存・再構築してください。

３．CSS設定

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

.mybloglist-main {
    overflow: auto;
    height: 300px;
}
 
.mybloglist-powered-by {
    margin-top: 10px;
    margin-bottom: 0px;
}
 
.mybloglist-listMe {
    margin-top: 0px;
}

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

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

2005.05.19 追記
スクリプトに誤りがありましたので修正しました。

2005.05.20 追記
先頭に日付・時刻が表示されている場合に不具合がありましたので修正しました。これに伴い２項のスクリプトおよび説明を修正しました。またNEW装飾に画像を用いることができるように改良しました。