- date
- 051214
プルダウン式ListMe！ver1.2
色々なListMeをつけるで、いろんなサービスへのListMeボタンの作り方を紹介しましたが、更にそれをプルダウン式にまとめてみました。いくつ増えても縦に長くならないし、その分サイドバーのスペースも空けられます(*´ー`*)
HTMLの編集ができればどのblogでもOKのコピペで使えるListMeセット。
BlogPeople、BlogPeopleTags、はてなアンテナ、はてなRSS、はてなブックマーク、Bloglines、Yahoo!RSS、ドリコムRSSの8種類に対応しています。
※MyBlogListは2005/12/12でリコムRSSへサービス統合。
2006/3月で完全停止。要コード変更。詳細はドリコムRSSにて。
ver1.1 (2005.09.23)
・はてなRSSの登録URL変更に伴いソースを修整。
・はてなブックマークに対応。
ver1.2 (2005.12.14)
・ドリコムRSSにサービス統合されたMyBlogListを削除。
・ドリコムRSSに対応。
HTMLの編集
プルダウンをつけたいところに下記のソースをコピペして下さい。
★ブログのURL★、★サイト名★、★RSSのURL★をそれぞれ自分のサイトに合わせたものに書き換えておきましょう。
不必要なものがあれば、その行の<option～から</option>までを削除。
※「'」や「;」など記号を消してしまわないように注意！
CSSの編集
CSSにはこちらをコピペ。（無くても動きます）
文字色や背景色などスタイルは自由に変更して下さい。
/* ListMeメニュー */
select.listme {
font-size:10px; /* 文字サイズ */
color:#666666; /* 文字カラー */
background:#fff; /* 背景色 */
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku GothicPro","Osaka","Verdana","ＭＳ Ｐゴシック","sans-serif"; /* フォント指定 */
}/* ListMe登録ボタン */
input.listme_sub {
font-size:10px; /* 文字サイズ */
color:#fff; /* 文字カラー */
background:#808080; /* 背景色 */
border:none; /* ボーダー設定 */
font-family:Verdana,Arial,sans-serif; /* フォント指定 */
}
※日本語を含むフォームで英語フォントを優先指定すると、Macで文字化けするのでご注意。登録ボタンの方は「ListMe!」など英語だけなら英語フォントで大丈夫ですが、日本語を使う場合はselect.listmeと同じfont-family指定にして下さい。
ListMeのリンクはサイドバーの上に置かれることが多いと思うのですが、増えてくるとだんだん長くなります。
すると、エントリーやカテゴリーなど訪問者が最初に見ることの多いリストが、その分だけ下がってしまいます。
エントリーリストやカテゴリリストは、出来るだけスクロールをしない状態でも手が届く場所にあるといいなぁと個人的な好みから、何とか短くしちゃろうとプルダウンに押し込めることにしました（笑）
ListMeがあると「このブログいいな」と思った時にすぐ登録できるので、リピーターさんが集まりやすいんじゃないかなと思います＾＾
Blog Feed
Comments
コメントエリアをスクロールする / スクロールを解除する
ユヅさん～、またまたコレも設置させていただきました～。ユヅ様様w｣w｣w｣☆wﾎです。
(*- -)(*_ _)ペコリ
何度もスイマセン…動作を確認せずに↑をφ(｀д´)wｴwｵwｴwｵしてしまいました。うまく動かなかったので後ほどまた設置してみます♪
いつも参考にさせていただいてます。
早速、使わせていただきました。
説明がわかりやすくて助かってます。
テンプレも使わせていただいてます。ありがとうございます。
ユヅさん、お忙しいのにお返事ありがとうございました。
連絡先を記載し忘れてしまって申し訳ございませんでした。
新しくコピペをして設置させて頂いたら、無事動作しました。
ありがとうございました。
これからも、どうぞ宜しくお願いいたします。
初めまして。
プルダウン式ListMe！を使わせていただきました。有難うございました。
これからもお世話になると思いますが、よろしくお願い致します。
●yurimamaさん
こんにちは。
エラーが出にくいように少し書き換えてみましたのでまたお試しくださいな＾＾
●萌花さん
こんにちは。
詳細な説明は省いて、とりあえずできるだけコピペで済むようにしてみました（笑）
参考になれば幸いです。
●ticoさん
こんにちは。
URLを記載されてたのでお邪魔することもできましたし大丈夫ですよ＾＾
無事動いて良かったです♪
●せいくんママさん
はじめまして。
ご利用報告有難うございました＾＾
初めまして。
参考にさせていただきました。これ、かなりいいですね～♪とっても気に入っています。ＴＢもさせてもらいましたm(_ _"m)
いつもありがとうございます。
設置させて頂きました。
ほんとうに、わかりやすい解説なので感謝感謝です。
ありがとうございました。
ユヅさま、すみません。
はじめてトラックバックに挑戦したら失敗しました。
すみません、はじめのトラックバックを削除して頂きますようにお願い致します。
長い文章になる時は「記事の概要」に書くのかな？と思ってしたのが・・・・文字化けに。ごめんなさい。
ステキなテンプレートがたくさんで、いつも遊びにきては「いいなぁ～♪」とつぶやいています！
コチラのエントリの「プルダウン式ListMe!」をお借りしました。
スッキリまとまって、イイカンジです♪
ありがとうございました～★
イライラするくらい暑いですが、体調を崩さぬよう、がんばってください♪
●ゆこりんさん
こんにちは。
コメント有難うございます。
気に入っていただけてなによりですー＾＾
●石こ*さん
こんにちは。
できるだけそのまんまコピペですむように作りました（笑）
トラバの重複分はこちらで勝手にスパスパ削除しますのでお気になさらず＾＾
●jeanneさん
こんにちは。
いつも遊びにきてくださってありがとうございます＾＾
今後何か増えてもスッキリまとめられるのが強みです＾＾
イライラする元気すら奪われる蒸し暑さです…orz
はじめまして。
『プルダウン式ListMe!』設置させていただきました。
大変分かりやすくてよかったです。
TBもさせていただきました。
今後ともよろしくお願いします。
●みささん
はじめまして。
コメント有難うございました。
お役に立ててよかったです。
こちらこそよろしくお願いします＾＾
初めまして。
プルダウン式List Me!を使わせて戴きました。
どうも有り難うございました。
始めましてＭＥＬＬです
頂いて設置いたしました
とても便利でうれしいです
ありがとうございました
●ともちさん・MELLさん
はじめまして。
コメント有難うございます。
便利になったのでしたら良かったですー＾＾
ユヅさんはじめましてm(__)m
実はだいぶ前から愛読しております。今回、無事にBlogPeopleを別ページで表示したり、ListMeのプルダウン式表示にしたり、サイドバーをすっきりする事ができました。そして、なによりも分かり易い説明に、初心者の私も簡単にカスタマイズ出来ました♪
今後ともよろしくお願いいたします。
●timbitsさん
はじめまして、こんにちは。
コメント有難うございます。
愛読なんてお恥ずかしい限りです（笑）
カスタマイズ成功おめでとうございます＆おつかれさまでした～＾＾
こちらこそよろしくお願いします。
初めまして。
クリスと申します。
このListMeセット、とても便利そうなので、使わせて頂きました。
ありがとうございました。
●クリスさん
はじめまして。
ユヅと申します。
ご利用報告ありがとうございました＾＾
はじめまして。
ragmodeさんのところで紹介していたので、早速設置してみました(^^)
ありがとうございました☆
ユヅさん、コンニチハ☆
プルダウン式ListMe！、私でもすぐに、出来ました！感激～！
わかりやすい解説で、本当に助かりました。ありがとうございました！
これからもいろいろと勉強させてくださいネ。よろしくお願いします。
●misakiさん、ユミさん
はじめまして。
ragmodeさんからいらっしゃいませです＾＾
ちゃんと設置できたようでよかったです。コメントありがとうございました。
プルダウンLstMe!!お借りしました。
なんとか設置したので、これから文字色等を変更していきたいと思います。
●まこやんさん
こんにちは。
設置お疲れ様です。
色もカスタマイズしてあげてください＾＾
前々から使わせていただこうと思っていたのですが、テンプレートを変えたのを機にようやく設置しました。これでスッキリしました。ありがとうございます！
ふと思いつきでサイトのＵＲＬなどに Serene Bach の独自タグを入れてみたところ、無事に動作を確認しました。これで、サイトに合わせて書き換える必要がなくなり、サイト名を変更しても再構築すれば反映します。(sb でも多分大丈夫だと思います)
また、個別ページ用には はてなブックマークなどは個別ページのタイトルやＵＲＬが入るようにしたものを加工して作らせていただき、私のブログにて公開しました。
ユヅさんの承諾なく事後報告になり申し訳ありません。もし支障があれば公開を控えますので、お手数ですがこちらでお返事いただけますでしょうか。
●でんこさん
でんこさんのようにカスタマイズして使ってらっしゃる方も多いので、お気になさらず～(´ω`)
うちのはサイト名とかたくさん入れなくちゃいけなくて面倒っちいですよね～（笑）
サイト名やサイトURLはsbならsb、MTならMTとユーザーさんの使っているブログでの独自タグに書き換えてもらえればよいかと今の形をとっています。
手馴れた方なら対応する独自タグを入れてくれるでしょうし、初心者さんは「独自タグ」はわからなくても「自分のブログのURL」なら分かる！という方もいますし＾＾
あと、sbでは{blog_name_only}が使えないっていう残念な仕様があるのが一番の原因で（笑）、SBでは独自ブロックの仕様がsbより厳密になっていることもあり、ブロック非依存である独自タグ以外のタグ（{blog_name_only}や{entry_title}{entry_permalink}など）をブロック外で使用するソースは控えています。
動くようでしたら大丈夫なのでしょうけれど、今後何かあっても自分で責任持てる範囲ではないので＾＾；
中々難しいですよね＾＾
深夜にもかかわらず、早速のお返事ありがとうございます。
快くご承諾いただき、ありがとうございます。
なるほど、そのような事情があるのですね。今のところ一応問題なく動いているようですが、将来的に保証できないということですね。
その辺の事情を追記させていただきます。
どうもありがとうございました。
はじめまして、こんにちは。
こちらのプルダウンListMe!を使わせていただこうとおもって設置したのですが、ちょっと疑問が生じましたので質問させていただきます。
多分初歩的なHTMLのことになってしまうと思うのですが、このListMe!だけではないですが、基本的に</FORM>を閉じた後には次の行に行くまでに妙に余白があいてしまいますよね？それをなんとかしたいのです。
サイドバー内で上のほうに持ってくれば他のメニューと間が空いてしまうし、一番下においても（今そうしています）次のサイドバーのタイトルとも間があいてしまいちょっと見ばえを考えてしまいます；
どこをどのようにすれば解決しますか？
不躾な質問で申し訳ありませんが、教えていただけるととっても助かりますm(_ _)m
●ぐりこさん
form { margin-bottom:0; }
をCSSに追記すると幸せになれるかもしれません(´ω`)
回答どうも有難うございます！！CSSの修正をして幸せになれました！（笑）
なるほど、marginを0にしないといけないのですね！素のままでmarginは0のカタチなのかと思い込んでいました；
本当にどうもありがとうございました！
ありがとうございます。解決しました。それから加えての質問お許し下さい。list項目に「bookmarkに追加」をいれたいと思っているのですが、どのように記述すればいいのでしょうか。自分は
<option value="javascript:void(window.open('URL','サイト名'))">bookmarkに追加</option>
と書いたんですが、これだとちゃんと動作しません。すいませんがお願いしますm(_ _)m
●みっちーさん
その書き方だとURLを開くだけですね＾＾；
ただ、お気に入りに追加するAddFavoriteはIEだけのものなので他のブラウザの方は動きません。他ブラウザの方には動きませんとツッコミがくる可能性がありますよー。
<option value="javascript:window.external.AddFavorite('サイトURL','サイト名')">お気に入りに追加</option>
ありがとうございました。無事追加できました。そうなんですよね。そこが頭の痛いところで。
なんか代替策とかないもんなんですかね。ボタン式の時は下に注を入れて対応していたんですが、リスト式の場合は悩ましいところです。
このエントリーとコメントリストの⇒を変更する、INFOをつける、リンクリストを別ページで一覧にする、を参考にさせていただきました。
トラバさせていただきます。
ありがとうございました。
●まなさん
こんにちは。
コメント有難うございます。
たくさんのカスタマイズお疲れ様でした＾＾
初めまして！
プルダウン式にずっとしたかったのでお借りしました*^ー^*
ありがとうございました♪
●kokkoさん
はじめまして。
ご報告有難うございました＾＾
こんにちは。
昨日、２カラムのテンプレをDLさせていただきました。
こちらのList Meも使わせて頂きました。
それと、事後報告ですがブログリストにも登録させて頂きました。
今後とも宜しくお願いします。
こんにちは！
プルダウン式ListMe
お借りしました。
ありがとうございました！
初めまして。プルダウン式のListMe！をお借りしました。とても解りやすくってすぐに設置できました。
ありがとうございました。
尚、記事にトラックバックさせていただきます。
よろしくお願いします(^^)
いつも参考にさせていただいております。
今回ListMeの設置に挑戦してみようと思って
いつもながらこちらを参考に設置してみました。
設置は成功！しかし、リンクのツリー化が解除されてしまいました。
理由がわからなく困っております。助言お願いします。
●aloeさん、yuuさん、みりぃさん
こんにちは。
コメント＆ご報告有難うございました。
リピーターさんやお友達が増えるきっかけになるといいですね＾＾
●３４℃さん
こんにちは＾＾
【実験１】
エラーの出ているテンプレートからListMeの部分をカットしてみる
→ツリー化は解除されままエラーも残っている
【実験２】
今適用されているツリー化されているページに、ListMeを貼り付けてみる（ツリー化解除されていたテンプレからListMeブロックごと抜き出したものです）
→ツリー化もListMeもOK
ということで、うちのListMeは関係ないようです。
該当テンプレートにて使用されている他のJavaScriptに数箇所エラーが出ているので、編集された際にどこかいじってしまったのでは。
こちらでは力になれることはありませんので、エラーの出ていないテンプレートから編集されてはいかがでしょうか＾＾
こんにちは。
色々いじる前に保存してあったテンプレにはめ込んでみたところ
無事ListMeもツリー化も作動しました。
どうやらナビゲーションの折り畳みを行った際
変にいろいろやりすぎてしまっていたようです。
ご助言ありがとうございました。
上手くいかなかった時、どう検証すればいいかもわかりました。
「ListMe」使わせていただきます。
つつしんで「ListMe」使わせていただきます！！！
でも、登録してくれる人自体がいないカモ・・・(笑)
こんばんは。
以前トラックバックさせていただきました、あさ☆ぴんと申します。
ドリコムRSSの本格稼動で悩んでいたところ、こちらの記事を発見！
またまた使わせていただきました。
本当に有り難うございました。
設置させてもらいました。ありがとうございます。
ユヅさんこんにちわ♪
ドリコムRSSにちょうど変更したときだったので、助かりました♪
ありがとうございました。
はじめまして。
少し前からこちらのプルダウン式ListMe！を参考に使わせていただいていたのですが、ご報告が遅くなってしまい申し訳ありませんm(_゛_)m
ver1.2のドリコムRSSに対応も引き続き使わせていただきたいと思いますので宜しくお願いします。
ありがとうございました♪
こんにちは！プルダウンLstMe!!お借りしました。
公開してもらえるのはすんごいうれしいです。
いつもありがとうございます。
●すけみつさん、あさぴんさん、yoshidaさん、yukaさん、wabisabiさん
こんにちは。
ご利用報告＆コメント有難うございました＾＾
はじめまして。
いろいろなブログで見かけて、私もつけたいなと思っていました。
とってもわかりやすく書かれていたのでとても簡単に設置することができました。
ありがとうございました。
こんばんわ！はじめまして＾＾
いつも参考にさせて頂いてますっ。
モブログ導入とカスタマイズに続いて
プルダウン式ListMe!もお借りしました。
分かりやすいご説明に感謝ですm(_ _)mペコリ
●tomtomさん、葵さん
はじめまして、こんばんはー
設置お疲れ様です＾＾
コメント有難うございました。
はじめまして。何もかも初心者の私ですが、プルダウン式List Me設置できました。とてもうれしいです。ありがとうございました。
●rikaさん
はじめまして。
ご報告有難うございました＾＾
List Me!を参考にさせていただきました。
お友達のサイトで使っているのを見て便利そうだなぁとお持っていたのです。
blog*citronさんのサイトはいつも参考にさせてもらってます。これからも頑張ってください！
ワオーゥ
感激です！！早速試してみます！！
先日は「プルダウン式List Me」を設置させて頂き、重宝しております。
それで、さらにBlogPeopleのIBも追加してみました。
また、個別エントリーで使えるように改良してみましたので、よろしければ、バージョンアップに使って頂ければと思います（＾＾；）
●どら♀どらさん、tomoさん
こんにちは。
カスタマイズ成功おめでとうございます＆おつかれさまでした♪
●showBOOさん
こんにちはー＾＾
IBだけじゃなくて、Clip、はてなブクマ、del.icio.usなんかもできますね＾＾
ブログ自体を追加するものと、記事単位を追加するものを、混同して返って使いにくいかなーと思って今はあえて入れてなかったりします＾＾；
記事を追加するものはサイドバーより記事内にあった方が視覚的に捉えやすいかなぁと…一応ソースは出来ていたりするのですがｗ
はじめまして。
プルダウン式ListMe！他数点カスタマイズを参考にさせていただきました。
これからもお世話になると思いますがよろしくお願い致します。
ありがとうございました！
初めまして。
こちらに辿り着けて本当に良かった。
もちろんプルダウン式ListMe！は頂いて帰ります。
ありがとうございましたm(_ _)m
ユヅさんいつもお世話になっております。
この度、sbからSerene Bachへ意気揚々と移行していたら、なんと途中で失敗、、、初期化に失敗しましたという画面を見て、なすすべなく新しくSerene Bachで心機一転はじめてみました。ということで、こちらの再度をすっきりでList Meのプルダウンボタンを設置！ホント、いつも分かり易い説明有難うございますm(__)m
ゆっくりと、初期化に失敗した旧ブログも直して行きたいと思います。
●masashiさん、でるさん、timbitsさん
こんにちは。
コメント＆ご報告有難うございました。
お役に立てたのでしたら光栄です＾＾
いつもお世話になっております。ユズさん、こんばんは♪
ずっと付けたいなぁと思って何度か試したのですが駄目でした。
こんなにわかりやすく書かれているのに、何故だー！と諦めていましたが、今回は出来るまで頑張ってみたいと思います♪
お借りしていきますね。ありがとうございます。_(_^_)_またお邪魔します♪
ユヅさん、こちらでは初めまして。web素材を使わせていただいております、うるると申します。MTなんですが、プルダウンListMe!を発見しまして「これは素晴らしい！」と導入させていただきました。またお世話になることと思いますが、今後ともどうぞよろしくお願いいたしますm(_ _)m
はじめまして。
MyBlogListからドリコムRSSになり、「ListMe！」ボタンがなくなったのが不便で
しばらく他のサービスを使ってました。でも、これは本当に便利ですね！
早速当blogにも設置させていただきました。ありがとうございました＾＾
はじめまして。
お借りしていきます。ありがとうございました＾＾
とてもわかりやすい説明で助かりました＾＾
あと、まことに勝手ながらＴＢさせていただきます。
またおじゃまさせてください＾＾では＾＾
はじめまして。
リスト登録のプルダウンってできるんですね！！！
とても便利そうだったので、さっそく使わせていただきました。
ありがとうございます。
こんにちは。
ドリコムになってからListMe機能が設定できず、こういうのを探していたのでとても嬉しいです。
説明もとても丁寧で助かりました。
本当にありがとうございました！
ユヅさん、こんにちは。
こちらの便利なtipを導入させて頂きました。
場所を取らないのでとても助かっています。
ありがとうございます！
初めまして！ListME!の参考にさせていただきました！
そこで質問なのですが、IEではCSSが効くものの
FirefoxだとCSSが効かないのですが、それは私に
問題があるのでしょうか？他の方のBlogを見たら
CSSが効いていたので、違う場所にHTMLを書き込んだりしたのですが、無理でした。ListMe!の部分が色を指定してあるのにFirefoxだと何もなってないんです。
忙しいと思いますが、宜しくお願いいたします。
EmailにURLを書いてしましました。すいませんでした！！
チョコさん＞
ＣＳＳの/* ListMe登録ボタン */の行の上に、【全角スペース】が入ってしまっているようなので、消してみてください。直るとおもいます。
ユズさんお返事ありがとうございます。
CSSの全角スペースが問題だったんですね。。。
勉強になりました。お早いお返事ありがとうございます！
無事直りました！！
はじめまして。
ListMe！使わせていただきました♪
ユヅさんは私の欲しい物を作ってくれるので
感激です！！
他にも色々使わせていただきますね♪
ありがとうございました。
初めまして★
こちらのエントリーを参考にさせていただきました。
解説が分かりやすかったので、
初心者の私には簡単に設置するコトが出来ました。
Blog歴は長いのですがレベルは初心者なので、
また色々参考にしたいと思ってます。
またTBもさせていただきます♪
はじめまして★
こちらの記事を参考にさせて頂きました！
ずっと探していたので嬉しいです。
ありがとうございましたm(_ _)m