MyBlogList にスクロールバーをつける(改)

MyBlogList にスクロールバーをつける(改)

Posted at May 19,2005 8:15 PM
Tag:[Customize, Link, MyBlogList, Scrollbar, SideMenu]

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装飾にも対応できるように改良しました。
以下カスタマイズ方法です。

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

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

1項の 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行目の右辺(赤色)には、1項で設定した id 属性名を設定してください。またクレジットバナーに画像を用いず「by MyblogList」を表示している方は、4行目の赤色を

image = 0;

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

3.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」用のスタイルです。内容は適宜変更してください。
もし同一名称のクラスセレクタがすでに存在する場合は、クラスセレクタを任意の名称に変更してください。その場合、2項のスクリプトに埋め込まれた3項のクラスセレクタ名を変更した名称に修正してください。
追加が終わったら保存・再構築してください。

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

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

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

関連記事
トラックバックURL


トラックバック

MyBlogListにスクロールバーつける改良版 from Magic White
MyBlogListの場合、バナーをスクロールバーから外に追い出す為のオプション... [続きを読む]

Tracked on May 19, 2005 10:36 PM

MyblogList と BlogPeopleリンクリストをチョコッと改良 from やむやむ
やむやむでは リンクリストのページ に まとめて表示させてる MyblogLis... [続きを読む]

Tracked on May 20, 2005 9:39 AM

MyblogListをスクロールバー表示 from KEEP THE FAITH
リストが多くなってくると長くて見難くなってくるので 小粋空間さんの「MyBlogList にスクロールバーをつける(改)」を導入しました。 すっきりコンパク... [続きを読む]

Tracked on June 11, 2005 1:54 AM

BLOG LINKSにスライドバー from The Drunk Suite (Reprise)
MyBlogListの表示数が多くなったのでスライドバーをつけることにしました。... [続きを読む]

Tracked on July 17, 2005 11:29 PM
コメント

こんばんわ。
参考にさせていただきました。

document.getElementById('link2list').innerHTML = data;
のlink2listも任意のid属性名に変更しないとエラーでます。
最初これでちと悩みました。(汗。

[1] Posted by みよたん : May 19, 2005 9:23 PM

>みよたんさん
こんばんはー。
ご利用&トラックバックありがとうございました。

自分の環境の設定が残ってましたね(笑)。
ということで修正致しました。
ご指摘ありがとうございます!

[2] Posted by yujiro : May 20, 2005 12:08 AM

~~~ヾ ^∇^おはよございます。
実は スクロールバーの中に クレジットバナーが含まれてしまうこと
すごく気になって、自分なりに対策してましたが、
by MyblogList だけは、どうしても スクロールバーの外に追い出すことができずにいました。
それで、すごーーく細かいことなんですけど、リストの一番上に表示されてるリンクだけ、
なぜか 投稿時刻のところが リンクと同じ色になっちゃうんですよねー。
時刻は表示させないで、オンマウスのときにポップアップで表示するように修正しようかしら。

[3] Posted by さえら : May 20, 2005 9:27 AM

Σ(ノ°▽°)ノハウッ!
ふたつのエントリに ふたつずつトラックバックを放ってしまいました。
すみません。(。_。;)

[4] Posted by さえら : May 20, 2005 9:46 AM

>さえらさん
こんにちは。
ご利用&トラックバックありがとうございます。
重複分は削除しておきました。どうぞお気遣いなく。

それで、スクリプトの方は修正致しまして、一番最初の時間は同じ色にならないようにしました。また画像も使えるようにしましたのでお試しください。
ご指摘くださりありがとうございました。

[5] Posted by yujiro : May 20, 2005 11:02 AM

ワオ w(°o°;)w すばやい対応、ありがとうございます。
早速。。。(((((((((((((ーー;) さささっ・・・

[6] Posted by さえら : May 20, 2005 11:36 AM

>さえらさん
こんにちはー。
うまく表示できましたね。
良かったです!

[7] Posted by yujiro : May 20, 2005 2:28 PM

いつもすばらしいカスタマイズ情報をありがとうございます。

不具合かどうかわかりませんが、報告です。

Windows系では「MyBlogList にスクロールバーをつける(改)」のカスタマイズは問題ないですが、
MAC OS X(Panther)上で「Safari」で見ると、
以下のように表示され、スクロールバーが無くなってしまいます。

http://www.multiburst.net/project-multiburst/images/200508/NG.jpg

検証したのは私の下記サイトです。
http://www.multiburst.net/project-multiburst/

[8] Posted by showBOO : August 14, 2005 2:15 AM

>showBOOさん
こんばんは。
貴重な情報ありがとうございました。

当方Mac環境がありませんので、Safariでスクロールしない対処を別途行いたいと思います。
少々お時間ください。

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

[9] Posted by yujiro : August 15, 2005 2:06 AM

よろしくお願いいたします。
もしよければ、私の方でMACでのプレビューをたまにコメントしてもよろしいでしょうか?
MAC OS Xでは圧倒的にSafariが多いと思うので、お役に立てればと思うのですが。

[10] Posted by showBOO : August 16, 2005 11:08 PM

>showBOOさん
こんばんは。
お待たせ致しました。

safari でスクロールバーを付与しないようにするために、2項のスクリプトに下記の赤色部分を追加願えますでしょうか。

<script type="text/javascript" language="javascript"> <!-- if (navigator.userAgent.indexOf("Safari") == -1) { id = 'hogehoge';      :    (中略)      : document.getElementById(id).innerHTML = data + '</div>'; } //--> </script>

不具合ありましたらお手数ですがご連絡ください。

またプレビューの件、お申し出くださりありがとうございます。
また不具合ありましたらご連絡頂ければ幸いです(おそらく今回のような対処が主になってしまいますが)。

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

[11] Posted by yujiro : August 17, 2005 12:19 AM

はじめまして。スクロールバーと数ヶ月格闘していたメープルです。こちらのやり方を使わせていただき、なんと一発で反映させることができました。ありがとうございました。もう少し短くコンパクトにしたい場合はどうしたらよいものでしょうか?
また、参考にさせていただきます。ありがとうございました。

[12] Posted by メープル : October 15, 2005 11:37 AM

>メープルさん
こんばんは。
ご利用ありがとうございます。

ご質問の件ですが、スタイルシートの

height: 300px;

の青色部分の値を少なくすれば短くなります。

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

[13] Posted by yujiro : October 16, 2005 12:52 AM
コメントする
greeting

*必須

*必須(非表示)


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

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

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

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