プルダウン式「ListMe!」の導入

  • 投稿日:
  • by

先日、Myblog Japan、MyblogList、MyClipが統合し、ドリコムRSSに移行しました。

ということで、早速MyblogListのタグを入れ替えました。

が、新しいドリコムRSSに、「ListMe!」という設定項目がない。。。
(私が見落としてるだけ??)

で、ググっていたら、こんなカスタマイズを見つけた。

プルダウン式「ListMe!」

ver1.2 (2005.12.14) ・ドリコムRSSにサービス統合されたMyBlogListを削除。・ドリコムRSSに対応。

とのこと。


で、

↓最終的にこうなるわけです。
listme-sample.gif


以下の文を、テンプレートに追加するだけでいいのが便利だ。

私の場合、PHPのモジュール化して、各ページに配置している。

<!--ListMe_start--> <form action="./" name="topic" id="topic"> <select name="list" size="1" class="listme"> <option value="javascript:void(window.open('http://www.blogpeople.net/addlink.jsp?n=1&amp;u=' + escape('★ブログのURL★') + '&amp;ti='+escape('★サイト名★'),'blop','scrollbars=no,width=475,height=350,left=75,top=175,status=yes,resizable=yes'));">BlogPeople</option> <option value="javascript:void(window.open('http://tags.blogpeople.net/tags_addlink.jsp?u='+escape('★ブログのURL★')+'&amp;ti='+escape('★サイト名★'),'BlogPeopleTags','scrollbars=no,width=480,height=320,left=100,top=100,status=yes,resizable=yes'))">BlogPeopleTags</option> <option value="http://a.hatena.ne.jp/append?★ブログのURL★">はてなアンテナ</option> <option value="http://r.hatena.ne.jp/append/★RSSのURL★">はてなRSS</option> <option value="javascript:void(window.location='http://b.hatena.ne.jp/add?mode=confirm&amp;title='+escape('★サイト名★')+'&amp;url='+escape('★ブログのURL★'));">はてなブックマーク</option> <option value="http://www.bloglines.com/sub/★ブログのURL★">Bloglines</option> <option value="http://e.my.yahoo.co.jp/config/jp_promo_content?.module=jp_rss&amp;.url=★RSSのURL★">MyYahoo!RSS</option> <option value="javascript:void((function(){var w=window.open('http://rss.drecom.jp/shortcut/add_rss?&url='+encodeURIComponent(location.href),'add_rss','scrollbars=yes,width=450,height=500,left=100,top=100,status=yes,resizable=yes');w.focus();})());">DrecomRSS</option> </select> <input value=" ListMe! " type="button" onclick="location.href=list.options[list.selectedIndex].value" class="listme_sub" /> </form> <!--ListMe_end-->

スタイルシート(CSS)

/* ListMeメニュー */ select.listme {    font-size:10px; /* 文字サイズ */    color:#666666; /* 文字カラー */    background:#fff; /* 背景色 */    font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku GothicPro","Osaka","Verdana","MS Pゴシック","sans-serif"; /* フォント指定 */ }   /* ListMe登録ボタン */ input.listme_sub {    font-size:10px; /* 文字サイズ */    color:#fff; /* 文字カラー */    background:#808080; /* 背景色 */    border:none; /* ボーダー設定 */    font-family:Verdana,Arial,sans-serif; /* フォント指定 */ }


以上で、設置完了(^^;)

簡単だ~~


で、ついでに、

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

というカスタマイズもつけました。

おなじみ、小粋空間さんのカスタマイズである。


「ドリコムRSS」の部分に赤文字の部分を追加

<div id="bloglist"> <script language="javascript" src="http://list.blog.rss.drecom.jp/xxxxx/" charset="UTF-8"></script> </div> <script type="text/javascript"> <!--// id = 'bloglist'; 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>


スタイルシート(CSS)

.drecomrss-main {      overflow: auto;      height: 200px; }

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

.drecomrss-listMe {
     margin-top: 0px;
}


これで完成です!!


----------------
2006/01/09 訂正

プルダウン式「ListMe!」の[?]の部分がすべて「&」になっていました。
失礼致しました。
修正致しました。