ドリコム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 プロパティを追加しました。
≫ プルダウン式「ListMe!」の導入 from Project MultiBurst
先日、Myblog Japan、MyblogList、MyClipが統合し、ドリコムRSSに移行しました。ということで、早速MyblogListのタグを入... [続きを読む]
≫ ドリコムRSS from やむやむ
Myblog Japan ・ MyblogList ・ MyClip の各サービ... [続きを読む]
≫ ドリコムRSSのBlogListにスクロールバーを付ける from んー?( ̄ー ̄;)
旧MyBlogListとMyClipがドリコムRSSに移行したので、そのBlogListにスクロールバーを付けます。 小粋空間様とは別のやり方で付けていま... [続きを読む]
≫ ドリコムRSSの設定に一苦労・・・。 from Document_Not_Bound...
RSSリーダーで、気になるサイトをチェック、チェック、チェック・・・・これも、... [続きを読む]
≫ はじめましてRssリーダー(追記あり) from 月あかりの夜に*
ブログで公開できるシンプルなRSSリーダー探してるあなたに教えたい記事です[:イヒヒ:]
なんでいきなりこんな記事書いてるかといえば。。
なん... [続きを読む]
≫ ドリコムRSSのカスタマイズ from ぶ・lab・ら草子
昨日から少しづつサイドバーをいじっています その中の1つ『ドリコムRSS』のリストにスクロールバーを付けてバナーを外に出し,さらに合わせ技でお気に入りブロ... [続きを読む]
≫ ドリコムRSSに登録してみた from クリュサオル@黄金の剣を持つ者
他のブログサイトでもたまに見かけるドリコムRSS。 ちょっとおもしろそうだったの... [続きを読む]
≫ ドリコムRSSのBlogListにスクロールバーをつける from 東京ディズニーリゾート 使える超裏技攻略情報局 Blog
ドリコムRSSのBlogListにスクロールバーをつける http://www.... [続きを読む]
≫ 50の質問とアナログ時計 from さえらのバルビレ日記
「バルビレッジファンに50の質問」 これも 前々から 答えてみたかったんですよねぇ。
50の質問は あいぼch.別館 さんの こちら から いただきまし... [続きを読む]
( ̄-  ̄ ) ンー うまくいきません。スクロールバーがでません。
以前 (DrecomRSSになる前) は 同じカスタマイズが ちゃんとできたんですけど・・・
imageは宣言されてません、っていう JavaScriptエラーが出ます。
いつもすばらしいカスタマイズをありがとうございます。
今回も早速使わせて頂きました(^^;)
で、Javascriptの部分ですが、
<!--// id = 'hogehoge'; image = 0;
スラッシュが抜けております。
>さえらさん
こんばんは。
移転時の改行設定がうまくできていませんでした。すいません。
設定されたスクリプトを現在表示しているように改行されるか(最初の方)、リストを再度設定願います。
>showBOOさん
こんばんは。
ご指摘の件について、そもそもスクリプトが <-- ? > で括られているのは、JavaScript 未対応のブラウザに対して、スクリプトをHTMLコメントとしてみせるためですが、最後の行にだけ "//" がついているのは、--> を JavaScript コメントとして正常に認識させるための処置です(<-- はJavaScript はその行のみコメントとして扱います)。
ということらしいです。
間違ってたらすいません。
w(°o°)w おおっ!!できました!
バッチリ スクロールバーが表示され、クレジットバナーは 外に出てます。エラーも出ません。
改行する、しないで 状況が変わっちゃうなんて、JavaScript って 繊細なんですね。
すみません、私も勘違いしておりました(^^;)
//を付けた後、
自分で改行の部分を直していたので、
//が原因かな?とおもってしまいました。
はやとちりですみません(^^;)
>さえらさん
こんにちは。
<-- は JavaScript のコメントとなるので改行されていなかったその後の処理が認識できなかったみたいです。
うまくできてホッとしました。
>showBOOさん
どういたしまして。
ご利用&ご連絡ありがとうございました!
こんばんは。
おかげさまで、BlogPeople同様に、スクロールバーを設置することが出来ました。有り難うございます。また、エントリー違いですが、テンプレート利用サイト500超え・・・この場を借りて、おめでとうゴザイマス。偉業ですね?。これからも「小粋っ子」(笑)として応援していきますので、よろしくお願いいたします。(応援しか出来ない・・・(涙))
ちなみに、ドリコムRSSのBlogListに「小粋空間」さんの更新通知が反映されてないようなのですが、ワタシの設定ミスのような・・・(笑)。
>toycozyさん
こんばんはー。
ご利用&コメントありがとうございます。
500達成まで時間かかりましたが嬉しい限りです。これからもお付き合いの程、よろしくお願い致します。(笑)
更新通知の件は当方の設定もれと思われますので確認してみます。
ありがとうございました。
はじめまして。
ドリコムRSSについて記事を書いた所、お友達にこちらを教えてもらいさっそくスクロールバーつけました♪
ありがとうございました。
トラックバックと文中リンクで紹介してしまったので事後報告ですがお知らせします。(ご都合が悪ければ訂正します。。)
>moonyさん
こんばんは。
スクロールバーご利用ありがとうございます。
トラックバックもありがとうございました。
不都合はございませんのでどしどしご紹介ください。
それではどうぞよろしくお願い致します。
どぉぉも 初めましてぇ?♪
moonyさんに小粋空間さんを紹介させていただきましたマネェ★です♪
本日初コメントです♪ 色々詳しく説明していただぃて大変為になるBLOGで陰ながらぉ世話になってぃますm(__)m♪
ドリコムに最近変えてスクロールバーを付けたいんですがPC音痴でなかなかぅまくいかなくって・・・
(ノд 初めましてぇ?♪
moonyさんに小粋空間さんを紹介させていただきましたマネェ★です♪
本日初コメントです♪ 色々詳しく説明していただぃて大変為になるBLOGで陰ながらぉ世話になってぃますm(__)m♪
ドリコムに最近変えてスクロールバーを付けたいんですがPC音痴でなかなかぅまくいかなくって・・・
(ノд
マネェ★フェリィーチェょり
☆yujiroさん☆
先ほど、moonyさん所ぇ行ったらyujiroさんからのコメントがありましたぁ♪
そしてサンプルのURLがありましたぁ♪
ぁれ ┛)"0"(┗ ビックリしてしまぃましたぁ♪
PCど素人の私にはソウトウΣヽ|゚Д゚|ノ┌ 不思議デス♪ ぁんな事も出来るんですね♪本当にスゴイですぅぅ?Σ(´□` )yujiroさん
先生と呼びたいデス(笑) ゎざゎざご親切にサンプルのURLまでやっていただいて本当にありがとぉござぃますぅぅ
まさにぁのサンプル通りにたいんですが・・・ぃちぉyujiroさんの説明で通りやってるつもりなんですが・・・
■Serena Bach で定義型リスト?■が、よく分からなくってぁのまんまコピぺしてるんですが・・・すいません本当に・・・m(__)m 面倒ぉかけしちゃって・・・ご迷惑でなければもぉ少し教えていただけると嬉しいです。
マネェ★ょり
>○o。LΑぉしゃれセレブ観察日記。o○さん
こんにちは。
ご利用ありがとうございます。
ソースを拝見したところ、下記のようにスクリプトの行末に <br> がついてますので、まずはこれを全て削除してください(提示しているソースをそのまま貼り付けてもらえれば手っ取り早いと思います)。
<script type="text/javascript"><br> <!--<br> id = 'hogehoge';<br> image = 1; <br> tag1 = '<a';<br> : (中略) : //--><br> </script><br>
動作しないようでしたらお手数ですが再度ご連絡ください。
なお 他の部分にある <br> は <br /> と書かれることをお勧めします。
以上です。
それではよろしくお願い致します。
はじめまして。。。
さっそく利用させていただきました^?^
とても分かりやすかったので簡単に表示することができました。
マイブログリストから移行したものの困っていたので助かりました。
ありがとうございます♪
BlogPeopleへ追加&TBさせていただきました。
どうぞヨロシクお願いします。
>らぶさん
こんにちは。
ご利用ありがとうございます。
またBlogPeople登録、併せてありがとうございました。
こちらからも登録させて頂きました。
こちらこそどうぞよろしくお願い致します。
★yujiroさん★
急に決まって11日ヵラ昨日まで、里帰りしていてコメントをしたまま、ずっとそのままだったのでスゴク気になっていました・・・。今日やっとPCを触れます♪ ぉ返事頂いたのにすぐぉ返し出来ずにスィマセンでした 早速試してみます(」*'∇')」
★マネェ★
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"> <!-- id = 'hogehoge'; image = 1; 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>
>○o。LΑぉしゃれセレブ観察日記。o○さん
こんにちは。
ご質問の件ですが、○o。LΑぉしゃれセレブ観察日記。o○さんのソースと実際にブラウザで表示されているソース(IEであればメニューバーから[表示]-[ソース]を選択して表示されたHTMLソースを指します)を両方、下に表示しました。
○o。LΑぉしゃれセレブ観察日記。o○さんの設定されたソース
<div id="hogehoge"> <script language="javascript" src="http://list.blog.rss.drecom.jp/mane/" charset="UTF-8"></script> </div> <script type="text/javascript"> <!-- id = 'hogehoge'; image = 1; 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>
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> id = 'hogehoge';<br> image = 1; <br> tag1 = '<a';<br> if (window.navigator.userAgent.indexOf("MSIE") != -1) {<br> tag1 = tag1.toUpperCase();<br> }<br> if (!image) {<br> tag2 = 'By DrecomRSS<';<br> } else {<br> tag2 = 'drecomrss_banner';<br> }<br> nodes = document.getElementById(id).innerHTML;<br> data = '<div class="drecomrss-main">';<br> list = nodes.split(tag1);<br> counter = 0;<br> for (i = 0; i < list.length; i++) {<br> if(list[i].indexOf('window.open') != -1) {<br> data += '</div><div class="drecomrss-listMe">' + tag1 + list[i];<br> break;<br> }<br> if(list[i].indexOf(tag2) != -1) {<br> data += '</div><div class="drecomrss-powered-by">' + tag1 + list[i];<br> } else {<br> if(counter){<br> data += tag1;<br> }<br> data += list[i];<br> }<br> counter++;<br> }<br> document.getElementById(id).innerHTML = data + '</div>';<br> //--><br> </script><br>
下のリストの赤色で示している各行末の br タグが不要なのですが、実際には何故か設定されてしまっています。
何故 br タグが設定されているのか、原因はこちらでは不明です(livedoorブログは使ったことがありません)ので、申し訳ありませんが「br タグが行末に設定されないように追加してください」としかお答えできません(ただしHTMLソース全てに br タグがついている訳ではないので、手順の中のどこかで気がつかずに付与されてしまっているのではないでしょうか)。
以上です。
それではよろしくお願い致します。
yujiroさん★
たびたびすぃません・・・m(__)m
ペーストしてる時点で、私の目に映ってるソースの行末に
は付いていません。 だからbrを消しようがないんです・・・すごくこんがらがってます。ラィブドァBLOGで勝手にbrが付く様になってるんでしょうか? ってyujiroさんに聞いても困りますょね? スイマセンm(__)m
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
マネェ★
>○o。LΑぉしゃれセレブ観察日記。o○さん
こんばんは。
とりあえずbrタグが外れたようでよかったです。
次のご質問の件ですが、livedoorブログにスタイルシートを設定するエリアはないでしょうか?
もしみつからないのであれば、上記のCSSを
<style type="text/css"> : (ここに上のCSSを挿入) : </style>
と、style タグで括って(念のため「:」は不要ですのでご注意ください)、テンプレートの
<head>?</head>
の間(</head>の直前が無難でしょう)に貼り付けてください。
以上です。
それではよろしくお願い致します。
yujiroさん ぁりがとぉござぃます さっそくliivedoorBLOGに設定するェリァがナィんですょ?。・゚・(ノД`) 初心者には困ります・・・ 早速yujiroさんに説明通りTRYしてみますネ♪
マネェ★
こんにちわ☆
こちらを参照して、RSSにスクロールバー、うまくつけれることができました☆
どうもありがとうございます。
>めりぃさん
こんにちは。
ご利用&ご連絡ありがとうございました。
うまくできたようで良かったです。
ではでは!
はじめまして、おはようございます。
いつも勉強させていただいております。
さて、
ドリコムのスクロールバーをつけさせて頂いたところテキストがデカいんです(笑)
いろいろいじったのですがわかりません。
ご伝授ください。宜しくお願い致します。
追伸、BEETLEはお元気ですか?
>takaさん
はじめまして。
テンプレートご利用ありがとうございます。
ご質問の件ですが、下記の青色部分を追加してください。
/* ドリコムリスト */
.drecomrss-main {
overflow: auto;
height: 200px;
font-size: 10px;
line-height: 150%;
}
それではよろしくお願い致します。
#元気です(笑)
yujiroさん
うまくいきました、あ?よかった。スッキリしました。
ありがとうございました。
>takaさん
こんにちは。
すばやい応答ありがとうございます。
うまく表示できたようでよかったです。
ではでは。
こんにちは。
参考にさせていただいたのですが、うまく表示されません(>_<)
2の動作まではできるのですが、
3は、</script>の後に貼り付けたらよろしいんですよね?
貼り付けたけど、うまく表示されなくて・・・。
なぜなのでしょうか?
教えていただけるとありがたいです(>_<)
>あこさん
こんにちは。
ご質問の件ですが、3項はスタイルシートなのでHTMLページの中に記述する場合は、3項のリスト全体を
<style type="text/css">?</style>
で括ってください。
それではよろしくお願い致します。
こんばんは。
無事、貼り付けることができました!
丁寧かつ迅速な回答をしてくださり、
どうもありがとうございました(>_<)
>あこさん
こんばんは。
ご連絡ありがとうございました。
無事に表示されたようでよかったです。
ではでは!
おはようございま?す。
新しいブログで このワザ使わせていただきました。ありがとうございます。
ドリコムのと BlogPeopleの、両方とも 参考にさせていただいたのですが
「BlogPeopleのリンクリストにスクロールバーをつける」 のエントリにコメントしようと思ったら
なぜか、ページが開けませんでした。トラックバックはちゃんと送れるかな?
>さえらさん
こんばんは。
ご利用ありがとうございます。
うまく設定できたようで良かったです。
BlogPeopleのコメント・トラックバックの件はすいませんが原因調査中です。
ではでは!
こんにちは。
ブログでこの技を利用させていただきました。
感謝感謝です。
ありがとうございました。
>ヤムチャさん
こんばんは。
コメントありがとうございました。
お役にたてたようで良かったです。
ではでは!