小粋空間: ドリコムRSSのBlogListにスクロールバーをつける

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

News

各種ブログテンプレート

2005年12月15日

エントリー本文

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

Posted at December 15,2005 11:57 PM
Category：[ドリコムRSS]
Tag：[Customize, DrecomRSS, Scrollbar]

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

ということで、早速、ドリコムRSSのBlogListにスクロールバーをつけるカスタマイズをご紹介します。スクリーンショットのように、クレジットバナーをスクロールバーの外に追い出すことができます。

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

１．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>

２．表示タグにスクリプトの追加

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

<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 の部分に、１項で設定した id 属性と同じものを設定してください。下の 0 は、クレジットバナーにスクリーンショットのように画像を表示している場合は 1 に修正してください。「Powered by DrecomRSS」という文字を表示する場合、修正は不要です。

３．スタイルシートの設定

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 追記
３項に font-size プロパティを追加しました。

Posted by yujiro ReTweet This!

« サーバ移転のお知らせ | Main | 自宅サーバからレンタルサーバへの移転メモ »

この記事を読んだ人はこんな記事も読んでいます

人気エントリー

Hatena Hot Entries

Hatena Entries

トラックバックURL

このエントリーのトラックバックURL:

トラックバック

≫ プルダウン式「ListMe!」の導入 from Project MultiBurst
先日、Myblog Japan、MyblogList、MyClipが統合し、ドリコムRSSに移行しました。ということで、早速MyblogListのタグを入... [続きを読む]

Tracked on December 16, 2005 7:51 PM

≫ ドリコムRSS from やむやむ
Myblog Japan ・ MyblogList ・ MyClip の各サービ... [続きを読む]

Tracked on December 17, 2005 8:46 AM

≫ ドリコムRSSのBlogListにスクロールバーを付ける from んー？（￣ー￣;）
旧MyBlogListとMyClipがドリコムRSSに移行したので、そのBlogListにスクロールバーを付けます。小粋空間様とは別のやり方で付けていま... [続きを読む]

Tracked on December 17, 2005 7:56 PM

≫ ドリコムRSSの設定に一苦労・・・。 from Document_Not_Bound...
RSSリーダーで、気になるサイトをチェック、チェック、チェック・・・・これも、... [続きを読む]

Tracked on December 24, 2005 2:12 AM

≫ はじめましてRssリーダー（追記あり） from 月あかりの夜に＊
ブログで公開できるシンプルなRSSリーダー探してるあなたに教えたい記事です[:イヒヒ:] なんでいきなりこんな記事書いてるかといえば。。なん... [続きを読む]

Tracked on January 8, 2006 10:47 PM

≫ ドリコムＲＳＳのカスタマイズ from ぶ・ｌａｂ・ら草子
昨日から少しづつサイドバーをいじっていますその中の１つ『ドリコムＲＳＳ』のリストにスクロールバーを付けてバナーを外に出し，さらに合わせ技でお気に入りブロ... [続きを読む]

Tracked on January 15, 2006 4:33 PM

≫ ドリコムRSSに登録してみた from クリュサオル@黄金の剣を持つ者
他のブログサイトでもたまに見かけるドリコムRSS。ちょっとおもしろそうだったの... [続きを読む]

Tracked on August 19, 2006 11:37 PM

≫ ドリコムRSSのBlogListにスクロールバーをつける from 東京ディズニーリゾート使える超裏技攻略情報局 Blog
ドリコムRSSのBlogListにスクロールバーをつける http://www.... [続きを読む]

Tracked on November 27, 2006 7:45 PM

≫ ５０の質問とアナログ時計 from さえらのバルビレ日記
「バルビレッジファンに５０の質問」これも前々から答えてみたかったんですよねぇ。５０の質問はあいぼch.別館さんのこちらからいただきまし... [続きを読む]

Tracked on January 10, 2007 5:20 AM

(￣- ￣ ) ンー　うまくいきません。スクロールバーがでません。
以前（DrecomRSSになる前）は　同じカスタマイズがちゃんとできたんですけど・・・
imageは宣言されてません、っていう JavaScriptエラーが出ます。

[1] Posted by さえら : December 16, 2005 10:59 AM

いつもすばらしいカスタマイズをありがとうございます。
今回も早速使わせて頂きました（＾＾；）

で、Javascriptの部分ですが、

＜!--// id = 'hogehoge'; image = 0;

スラッシュが抜けております。

[2] Posted by showBOO : December 16, 2005 9:36 PM

＞さえらさん
こんばんは。
移転時の改行設定がうまくできていませんでした。すいません。
設定されたスクリプトを現在表示しているように改行されるか（最初の方）、リストを再度設定願います。

＞showBOOさん
こんばんは。
ご指摘の件について、そもそもスクリプトが <-- ? > で括られているのは、JavaScript 未対応のブラウザに対して、スクリプトをHTMLコメントとしてみせるためですが、最後の行にだけ "//" がついているのは、--> を JavaScript コメントとして正常に認識させるための処置です（<-- はJavaScript はその行のみコメントとして扱います）。

ということらしいです。
間違ってたらすいません。

[3] Posted by yujiro : December 17, 2005 3:19 AM

w(°ｏ°)w　おおっ！！できました！
バッチリスクロールバーが表示され、クレジットバナーは外に出てます。エラーも出ません。
改行する、しないで状況が変わっちゃうなんて、JavaScript って繊細なんですね。

[4] Posted by さえら : December 17, 2005 8:33 AM

すみません、私も勘違いしておりました（＾＾；）

//を付けた後、
自分で改行の部分を直していたので、
//が原因かな？とおもってしまいました。

はやとちりですみません（＾＾；）

[5] Posted by showBOO : December 17, 2005 11:24 AM

＞さえらさん
こんにちは。
<-- は JavaScript のコメントとなるので改行されていなかったその後の処理が認識できなかったみたいです。
うまくできてホッとしました。

＞showBOOさん
どういたしまして。
ご利用＆ご連絡ありがとうございました！

[6] Posted by yujiro : December 17, 2005 1:54 PM

こんばんは。
おかげさまで、BlogPeople同様に、スクロールバーを設置することが出来ました。有り難うございます。また、エントリー違いですが、テンプレート利用サイト500超え・・・この場を借りて、おめでとうゴザイマス。偉業ですね?。これからも「小粋っ子」(笑)として応援していきますので、よろしくお願いいたします。（応援しか出来ない・・・（涙））
ちなみに、ドリコムRSSのBlogListに「小粋空間」さんの更新通知が反映されてないようなのですが、ワタシの設定ミスのような・・・(笑)。

[7] Posted by toycozy : December 24, 2005 2:22 AM

＞toycozyさん
こんばんはー。
ご利用＆コメントありがとうございます。
500達成まで時間かかりましたが嬉しい限りです。これからもお付き合いの程、よろしくお願い致します。（笑）

更新通知の件は当方の設定もれと思われますので確認してみます。
ありがとうございました。

[8] Posted by yujiro : December 24, 2005 3:15 AM

はじめまして。
ドリコムRSSについて記事を書いた所、お友達にこちらを教えてもらいさっそくスクロールバーつけました♪
ありがとうございました。
トラックバックと文中リンクで紹介してしまったので事後報告ですがお知らせします。（ご都合が悪ければ訂正します。。）

[9] Posted by moony : January 8, 2006 11:01 PM

＞moonyさん
こんばんは。
スクロールバーご利用ありがとうございます。
トラックバックもありがとうございました。
不都合はございませんのでどしどしご紹介ください。
それではどうぞよろしくお願い致します。

[10] Posted by yujiro : January 9, 2006 12:44 AM

　どぉぉも　　　初めましてぇ?♪
　moonyさんに小粋空間さんを紹介させていただきましたマネェ★です♪
　本日初コメントです♪　色々詳しく説明していただぃて大変為になるBLOGで陰ながらぉ世話になってぃますm(__)m♪
　ドリコムに最近変えてスクロールバーを付けたいんですがPC音痴でなかなかぅまくいかなくって・・・
(ﾉд　　初めましてぇ?♪
　moonyさんに小粋空間さんを紹介させていただきましたマネェ★です♪
　本日初コメントです♪　色々詳しく説明していただぃて大変為になるBLOGで陰ながらぉ世話になってぃますm(__)m♪
　ドリコムに最近変えてスクロールバーを付けたいんですがPC音痴でなかなかぅまくいかなくって・・・
(ﾉд 　　　
　　　　マネェ★フェリィーチェょり

[11] Posted by ○o｡ＬΑぉしゃれセレブ観察日記｡o○ : January 9, 2006 8:28 PM

　☆yujiroさん☆

　　先ほど、moonyさん所ぇ行ったらyujiroさんからのコメントがありましたぁ♪
そしてサンプルのURLがありましたぁ♪
ぁれ　┛)"0"(┗ 　ビックリしてしまぃましたぁ♪
PCど素人の私にはソウトウΣヽ|ﾟДﾟ|ﾉ┌　不思議ﾃﾞｽ♪　ぁんな事も出来るんですね♪本当にスゴイですぅぅ?Σ(´□｀）yujiroさん
先生と呼びたいﾃﾞｽ（笑）　ゎざゎざご親切にサンプルのURLまでやっていただいて本当にありがとぉござぃますぅぅ
まさにぁのサンプル通りにたいんですが・・・ぃちぉyujiroさんの説明で通りやってるつもりなんですが・・・
■Serena Bach で定義型リスト?■が、よく分からなくってぁのまんまコピぺしてるんですが・・・すいません本当に・・・m(__)m　面倒ぉかけしちゃって・・・ご迷惑でなければもぉ少し教えていただけると嬉しいです。　

　　マネェ★ょり

[12] Posted by ○o｡ＬΑぉしゃれセレブ観察日記｡o○ : January 10, 2006 3:32 AM

＞○o｡ＬΑぉしゃれセレブ観察日記｡o○さん
こんにちは。
ご利用ありがとうございます。
ソースを拝見したところ、下記のようにスクリプトの行末に <br> がついてますので、まずはこれを全て削除してください（提示しているソースをそのまま貼り付けてもらえれば手っ取り早いと思います）。

<script type="text/javascript"><br> <br> </script><br>

動作しないようでしたらお手数ですが再度ご連絡ください。
なお他の部分にある <br> は <br /> と書かれることをお勧めします。

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

[13] Posted by yujiro : January 10, 2006 12:39 PM

はじめまして。。。
さっそく利用させていただきました＾?＾
とても分かりやすかったので簡単に表示することができました。
マイブログリストから移行したものの困っていたので助かりました。
ありがとうございます♪
ＢｌｏｇＰｅｏｐｌｅへ追加＆ＴＢさせていただきました。
どうぞヨロシクお願いします。

[14] Posted by らぶ : January 15, 2006 4:39 PM

＞らぶさん
こんにちは。
ご利用ありがとうございます。
またBlogPeople登録、併せてありがとうございました。
こちらからも登録させて頂きました。
こちらこそどうぞよろしくお願い致します。

[15] Posted by yujiro : January 16, 2006 12:35 PM

　★yujiroさん★
　
　　急に決まって１１日ヵラ昨日まで、里帰りしていてコメントをしたまま、ずっとそのままだったのでスゴク気になっていました・・・。今日やっとPCを触れます♪　ぉ返事頂いたのにすぐぉ返し出来ずにスィマセンでした　早速試してみます(」*'∇')」
　
　　★マネェ★　

[16] Posted by ○o｡ＬΑぉしゃれセレブ観察日記｡o○ : January 24, 2006 3:26 PM

　yujiroさん☆　　たびたび本当にスイマセンm(__)m
　'hogehoge';
image = 0; の部分を1にしてみました。でも、スタイルシート・CSSの部分がヨク解んなくって・・・↓yujiroさんの提示しているソースをそのまま貼り付けさせていただいたんですが、どこで間違ってるのか、何が足りないのか解りません・・・・　

<div id="hogehoge"> <script language="javascript" src="http://list.blog.rss.drecom.jp/mane/" charset="UTF-8"></script> </div> <script type="text/javascript">  </script>

[17] Posted by ○o｡ＬΑぉしゃれセレブ観察日記｡o○ : January 24, 2006 10:39 PM

＞○o｡ＬΑぉしゃれセレブ観察日記｡o○さん
こんにちは。
ご質問の件ですが、○o｡ＬΑぉしゃれセレブ観察日記｡o○さんのソースと実際にブラウザで表示されているソース（IEであればメニューバーから[表示]-[ソース]を選択して表示されたHTMLソースを指します）を両方、下に表示しました。

○o｡ＬΑぉしゃれセレブ観察日記｡o○さんの設定されたソース

<div id="hogehoge"> <script language="javascript" src="http://list.blog.rss.drecom.jp/mane/" charset="UTF-8"></script> </div> <script type="text/javascript">  </script>

HTML上で表示されているソース

<script language="javascript" src="http://list.blog.rss.drecom.jp/mane/" charset="UTF-8"></script><br> </div><br> <script type="text/javascript"><br> <br> </script><br>

下のリストの赤色で示している各行末の br タグが不要なのですが、実際には何故か設定されてしまっています。

何故 br タグが設定されているのか、原因はこちらでは不明です（livedoorブログは使ったことがありません）ので、申し訳ありませんが「br タグが行末に設定されないように追加してください」としかお答えできません（ただしHTMLソース全てに br タグがついている訳ではないので、手順の中のどこかで気がつかずに付与されてしまっているのではないでしょうか）。

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

[18] Posted by yujiro : January 25, 2006 12:42 PM

yujiroさん★
　　
　　　たびたびすぃません・・・m(__)m
　ペーストしてる時点で、私の目に映ってるソースの行末に
は付いていません。　だからbrを消しようがないんです・・・すごくこんがらがってます。ラィブドァBLOGで勝手にbrが付く様になってるんでしょうか？　ってyujiroさんに聞いても困りますょね？　スイマセンm(__)m　　

[19] Posted by ○o｡ＬΑぉしゃれセレブ観察日記｡o○ : January 25, 2006 10:13 PM

yujiroさん　　解りました?♪　何だか、改行
のする・しない　の設定がありました?(。⌒∇⌒)　しない！に、設定し直してソースを貼り付けましたこの問題は解決ﾃﾞｽぁりがとぉござぃます♪　ぁと?の、CSSなんですが.drecomrss-main {
overflow: auto;
height: 200px;
}

.drecomrss-powered-by {
margin-top: 10px;
margin-bottom: 0px;
}

.drecomrss-listMe {
margin-top: 0px;
}
　↑提示通りこのまんま貼り付けてしまったら、そのまんまBLOGに反映されて訳ワカメになってぃます・・・。?のソースの前とか後に付けるコードとかってありますか？
無知なもので聞いてばっかりで本当にすぃませんm(__)m
　　
　　マネェ★

[20] Posted by ○o｡ＬΑぉしゃれセレブ観察日記｡o○ : January 26, 2006 3:46 AM

＞○o｡ＬΑぉしゃれセレブ観察日記｡o○さん
こんばんは。
とりあえずbrタグが外れたようでよかったです。

次のご質問の件ですが、livedoorブログにスタイルシートを設定するエリアはないでしょうか？
もしみつからないのであれば、上記のCSSを

<style type="text/css"> 　　　　　　　：　（ここに上のCSSを挿入）　　　　　　　： </style>

と、style タグで括って（念のため「：」は不要ですのでご注意ください）、テンプレートの

<head>?</head>

の間（</head>の直前が無難でしょう）に貼り付けてください。

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

[21] Posted by yujiro : January 26, 2006 7:48 PM

　yujiroさん　　　ぁりがとぉござぃます　　さっそくliivedoorBLOGに設定するェリァがﾅｨんですょ?｡･ﾟ･(ﾉД`)　　初心者には困ります・・・　早速yujiroさんに説明通りTRYしてみますネ♪

　　　マネェ★

[22] Posted by ○o｡ＬΑぉしゃれセレブ観察日記｡o○ : January 27, 2006 4:48 PM

こんにちわ☆
こちらを参照して、RSSにスクロールバー、うまくつけれることができました☆
どうもありがとうございます。

[23] Posted by めりぃ : March 3, 2006 3:39 PM

＞めりぃさん
こんにちは。
ご利用＆ご連絡ありがとうございました。
うまくできたようで良かったです。
ではでは！

[24] Posted by yujiro : March 4, 2006 2:46 PM

はじめまして、おはようございます。
いつも勉強させていただいております。

さて、
ドリコムのスクロールバーをつけさせて頂いたところテキストがデカいんです（笑）
いろいろいじったのですがわかりません。

ご伝授ください。宜しくお願い致します。

追伸、BEETLEはお元気ですか？

[25] Posted by taka : July 30, 2006 9:27 AM

＞takaさん
はじめまして。
テンプレートご利用ありがとうございます。
ご質問の件ですが、下記の青色部分を追加してください。

/* ドリコムリスト */
.drecomrss-main {
    overflow: auto;
    height: 200px;
    font-size: 10px;
    line-height: 150%;
}

それではよろしくお願い致します。

＃元気です（笑）

[26] Posted by yujiro : July 31, 2006 1:16 PM

yujiroさん

うまくいきました、あ?よかった。スッキリしました。
ありがとうございました。

[27] Posted by taka : July 31, 2006 1:27 PM

＞takaさん
こんにちは。
すばやい応答ありがとうございます。
うまく表示できたようでよかったです。
ではでは。

[28] Posted by yujiro : July 31, 2006 1:38 PM

こんにちは。
参考にさせていただいたのですが、うまく表示されません（＞＿＜）
２の動作まではできるのですが、
３は、</script>の後に貼り付けたらよろしいんですよね？
貼り付けたけど、うまく表示されなくて・・・。
なぜなのでしょうか？
教えていただけるとありがたいです（＞＿＜）

[29] Posted by あこ : November 15, 2006 3:53 PM

＞あこさん
こんにちは。
ご質問の件ですが、３項はスタイルシートなのでHTMLページの中に記述する場合は、３項のリスト全体を

<style type="text/css">?</style>

で括ってください。
それではよろしくお願い致します。

[30] Posted by yujiro : November 16, 2006 4:58 PM

こんばんは。
無事、貼り付けることができました！
丁寧かつ迅速な回答をしてくださり、
どうもありがとうございました（＞＿＜）

[31] Posted by あこ : November 18, 2006 1:41 AM

＞あこさん
こんばんは。
ご連絡ありがとうございました。
無事に表示されたようでよかったです。
ではでは！

[32] Posted by yujiro : November 21, 2006 12:24 AM

おはようございま?す。
新しいブログでこのワザ使わせていただきました。ありがとうございます。
ドリコムのと BlogPeopleの、両方とも参考にさせていただいたのですが
「BlogPeopleのリンクリストにスクロールバーをつける」のエントリにコメントしようと思ったら
なぜか、ページが開けませんでした。トラックバックはちゃんと送れるかな？

[33] Posted by さえら : January 10, 2007 5:18 AM

＞さえらさん
こんばんは。
ご利用ありがとうございます。
うまく設定できたようで良かったです。
BlogPeopleのコメント・トラックバックの件はすいませんが原因調査中です。
ではでは！

[34] Posted by yujiro : January 11, 2007 1:00 AM

こんにちは。
ブログでこの技を利用させていただきました。
感謝感謝です。
ありがとうございました。

[35] Posted by ヤムチャ : February 28, 2008 9:47 PM

＞ヤムチャさん
こんばんは。
コメントありがとうございました。
お役にたてたようで良かったです。
ではでは！

[36] Posted by yujiro

: February 29, 2008 2:27 AM

コメントする

greeting

名前（N）: *必須

メールアドレス（M）:

URL（U）:

情報を保存する？

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

コメント（C）:

[サインインしない場合はここにCAPTCHAを表示します]

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

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