2005年12月15日
ドリコムRSSのBlogListにスクロールバーをつける
ということで、早速、ドリコムRSSのBlogListにスクロールバーをつけるカスタマイズをご紹介します。スクリーンショットのように、クレジットバナーをスクロールバーの外に追い出すことができます。 以下、カスタマイズ方法です。 |
1.BlogList を div タグ等で括る
下記のように BlogList を表示するタグを div 要素で括り、id 属性 hogehoge を div 要素に記述してください。
<div id="hogehoge">
<script language="javascript" src="http://list.blog.rss.drecom.jp/xxxxx/" charset="UTF-8"></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" src="http://list.blog.rss.drecom.jp/xxxxx/" charset="UTF-8"></script>
</div>
</dd>
</dl>
2.表示タグにスクリプトの追加
下記のスクリプト(青色部分)を、1項で修正したタグの下に追加してください。
<div id="hogehoge">
<script language="javascript" src="http://list.blog.rss.drecom.jp/xxxxx/" charset="UTF-8"></script>
</div>
<script type="text/javascript">
<!--
id = 'hogehoge';
image = 0;
tag1 = '<a';
if (window.navigator.userAgent.indexOf("MSIE") != -1) {
tag1 = tag1.toUpperCase();
}
if (!image) {
tag2 = 'By DrecomRSS<';
} else {
tag2 = 'drecomrss_banner';
}
nodes = document.getElementById(id).innerHTML;
data = '<div class="drecomrss-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="drecomrss-listMe">' + tag1 + list[i];
break;
}
if(list[i].indexOf(tag2) != -1) {
data += '</div><div class="drecomrss-powered-by">' + tag1 + list[i];
} else {
if(counter){
data += tag1;
}
data += list[i];
}
counter++;
}
document.getElementById(id).innerHTML = data + '</div>';
//-->
</script>
赤色で示した
id = 'hogehoge';
image = 0;
ですが、上の hogehoge の部分に、1項で設定した id 属性と同じものを設定してください。下の 0 は、クレジットバナーにスクリーンショットのように画像を表示している場合は 1 に修正してください。「Powered by DrecomRSS」という文字を表示する場合、修正は不要です。
3.スタイルシートの設定
BlogList用のCSSとして、スタイルシートに下記を追加します。
.drecomrss-main {
overflow: auto;
height: 200px;
font-size: 10px;
}
.drecomrss-powered-by {
margin-top: 10px;
margin-bottom: 0px;
}
.drecomrss-listMe {
margin-top: 0px;
}
スクロールバーの高さを変える場合は
.drecomrss-main {
overflow: auto;
height: 200px;
font-size: 10px;
}
の赤色部分を修正してください。
2006.07.31 追記
3項に font-size プロパティを追加しました。
Comments [36]
| Trackbacks [9]
Myblogサービスの統合で「

