Top > サービス > ドリコムRSS [全て開く]
2005年12月15日

ドリコムRSSのBlogListにスクロールバーをつける

December 15,2005 11:57 PM
Tag:[, , ]
Permalink

ドリコムRSSのBlogListにスクロールバーをつけるMyblogサービスの統合で「ドリコム RSS」がリリースされました(関連記事)。これにより Myblog Japan、MyblogList、MyClip の各サービスがドリコムRSSに移行することになります。

ということで、早速、ドリコム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]
Now loading...
Introduction
List of "ドリコムRSS"
Recent Entries
Recent Comments
Recent Trackbacks
QRcode

現在停止中です
携帯電話からこのQRcodeを撮影することで携帯用URLを取得することができます

URI for cellular phones
ギターに入った猫
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

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

loading ...
Categories
Monthly Archives
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
クリエイティブ・コモンズ・ライセンス
Powered by
Movable Type 5.04