サイドバーにあるリストをスクロールさせる方法
何度か皆さんからご質問いただいたこともあり、自分なりのまとめという意味も含めて、ここに書いておくことにします。分かりにくいところは随時編集して、なるべく分かり易く、という方針でいきたいと思います。ご批評下さい。
▼BlogPeopleなどのリンクリストの場合
下記のCSSコードをコピーするのが最も簡便かと。
<style type="text/css"> <!-- .blogpeople-main { overflow: auto; height: 250px; } .blogpeople-tbp { overflow: auto; height: 250px; } .myclip-main { overflow: auto; height: 250px; } .mybloglist-main { overflow: auto; height: 250px; } --> </style>
「250px」の部分は、お好みで変更してください。
設置場所(ペースト先)は、普通headタグ内なんでしょうが、HTML文法に拘らないのならどこでもいいでしょう。
(ココログの場合、マイリストの、テキスト表示設定済みのメモ欄など)
最初と最後のstyleタグやコメント記号を除いて、既存のstyleタグ内や外部CSSファイルに追加してもOKです。
----
これが一般的な方法かと思いますが、Opera 6系では overflow:auto; が overflow:visible; として扱われてしまい、しかも height プロパティだけは効いてしまうので、次のリストと重なってしまうという問題があったりもします。なにかいい方法があるといいのですが...
# 当ブログも含め、ほとんどのサイトで overflow:auto; で行っちゃってるみたいですね
----
また、最後の .mybloglist-main {...} というのはオマケで、そのままじゃスクロールしません。
MyblogListだけは(他と違って対応が遅れているので)、もう少し細工をしてやる必要があります。
具体的には、MyblogList用のjavascriptコードを、下記のような感じで、divで囲んでやる必要があります。
<div class="mybloglist-main"> <!-- ここにMyblogList用のjavascriptコード --> </div>
なお、「mybloglist-main」ってclass名は適当にでっちあげただけなので、divに付けたclass名とCSSのclassセレクタ(「.」で始まる部分)が一致さえすれば、ここは何でもOKです。
----
蛇足ですが、このdivで囲む方法は、MyblogListだけじゃなくて、どんなコンテンツにも応用可能なので、そのコンテンツ固有の名前を付けてやりさえすれば、そのコンテンツだけに任意のスタイルを適用してやることができます。
例えば、Blogpeopleのトラックバックピープルなんかは複数あることも多いと思いますが、TBP純正のjavascriptコードをdivで覆ってやって、それぞれに別の名前(たとえばclass="tbp-finding-neko"とかclass="tbp-neko"とか?)を任意に与えてやれば、
.tbp-finding-neko { ovarflow: auto; height: 200px; border: double maroon; } .tbp-neko { ovarflow: auto; height: 250px; border: double magenta; }
みたいな感じで追加してやれば、リスト毎にスタイルを変えることもできます。
# この場合、.blogpeople-tbpでのスタイル指定を修正したり消去する必要があるかもしれません。
----
▼Typepad純正のマイリスト(私リスト/リンクリスト?)の場合
ココログなどのTypepad系ブログ純正のリストの場合、
.sidebar ul { overflow: auto; height: 250px; }
としてやるぐらいしかないんでしょうか...こうしてしまうと、全てのリストの高さが250pxになってしまうんですよね(T_T)
IE以外のブラウザなら、heigtの代わりにmax-heightを使ってやるだけで、指定高さ以上になったリストだけにスクロールバーがついてくれるのですが...orz
# javascriptを使えば、それらしきことはできると思いますが、ちょっと面倒なのでやってません。
MTやココログのプロコースなどのように、テンプレートを自分でいじれるのなら、リストごとにidやclassを振ってやることで解決するんですけどね...
ということで、まだいい方法を知りません(T_T)
いい方法がありましたら、是非、御一報ください。
« キャプテン・フューチャーとNIKKEIかよっ(三村風) | トップページ | 「結果は残念。だが、未来へのドアを開けたのはライブドアだ」 »
「ウェブログ・ココログ関連」カテゴリの記事
- [ココログ] 「記事の公開日時変更をもっと簡単に」するBookmarkletを再びIE6でも動くようにしました(2010.01.29)
- [ココログ] 「ウェブページ」のファイル名を index.html にしてみたら…(2008.09.03)
- [ココログ] コメント入力欄に「(任意)」の文字も!(2008.04.01)
- げ。(2008.01.10)
コメント
この記事へのコメントは終了しました。
トラックバック
この記事へのトラックバック一覧です: サイドバーにあるリストをスクロールさせる方法:
» facet-divers: サイドバーにあるリストをスクロールさせる方法 [此処録ANNEX:ココログTIPS]
facet-divers: サイドバーにあるリストをスクロールさせる方法 [続きを読む]
» サイドバーのマイリストにスクロールバーを付けるJavaScript [facet-divers]
以前、BlogPeopleなどのリストをCSSを使ってスクロールさせる方法について書いたのですが、自作のマイリスト(/私リスト/リンクリスト)はCSSだけでは個 [続きを読む]
« キャプテン・フューチャーとNIKKEIかよっ(三村風) | トップページ | 「結果は残念。だが、未来へのドアを開けたのはライブドアだ」 »
ひゃー、早速のご対応ありがとうございますー。
>▼Typepad純正のマイリスト(私リスト/リンクリスト?)の
>場合
こちらを試させていただきました。
でもfacetさんがおっしゃるように全部バーが
ついてしまいましたー。
わたしもBlogPeopleとかでリンクリスト作れば
いいんですが、どれも登録してない方が中には
いらっしゃって…(^^;
いつもいつも教えていただいてるばかりですみません(>◇<)
投稿: ほし | 2004-11-04 00:10
ほしさん、おはようございます(^^)
前々から一度書いておいた方がいいかなあと思っていたことなので、ちょうどいい機会でした。
でも、やっぱり普通のマイリストの方でしたね。サイトを見て多分そうだと思ったんですが、スクロールしたいという要望はBlogPeopleのリンクリストなんかの場合が多いので、そちらを先に書かせていただきました。
# というか、マイリストの方は、まだいい方法が見つかってないもので...(^^;
お役に立てなくて残念です。簡単でいい方法があるといいのですが。
投稿: facet | 2004-11-04 09:03
はじめまして。nigoeと申します。
ココログ1ヶ月目の超初心者です(^^ゞ
facetさんのブログ、いつも参考にさせていただいています。
実は、自分で設定したマイリストを含め、マイリストにスクロールバーを設置したいのですが、全然動作しません。まず第一にスクリプトの意味がちんぷんかんぷんで。。。(泣;
自分のブログ用にどうやって手を加えていいかわかりません。
特にfacetさんのように「サイドバー.jp」の集計リストをスクロール化したいのですが、、、
現在、facetさんの「折りたたみ2」を使用させてもらっています。
これはこれで大変良いものなのですが、この一週間ほど「スクロールバー」設置で悩んで相当意地になっています(笑)
是非解決したいと願ってますので、哀れな初心者と思ってご教授願えますでしょうか?
わがままで恐縮です、よろしくお願いいたします m(_ _)m
投稿: nigoe | 2005-10-21 05:30
nigoeさん、はじめまして(^^)
Sidebar.jpのリストには "sb-list" というclass属性値が付いていますので、適当な位置(同じメモ欄など)に、
<style type="text/css">
<!--
.sb-list {
height: 150px;
overflow: auto;
}
-->
</style>
と書いてやれば、高さが150ピクセルになって(height: 150px;)、はみ出した部分を見られるように自動的にスクロールバーをつけてくれるようになります(overflow: auto;)。
「CSS入門」とか「CSSとは」とか「スタイルシート入門」とかで検索すればいろいろ情報がでてきますので、探してみてください。
# たとえば、下記のサイトとか。http://www.ink.or.jp/~bigblock/css/start.html
http://www.nextindex.net/web/tut/CSStut/index.html
どこかいいサイトが見つかりましたら、是非教えてください(^^)
投稿: facet | 2005-10-21 09:40
facetさん、感謝感激です!
単純に「サイドバー.jp」マイリストのメモ欄にコピぺっただけで、スクロールバーがつきました(^o^)/
一瞬にして私の一週間の悩みが吹き飛びました。ありがとうございましたm(_ _)m
お忙しいところ迅速なご対応、誠にありがとうございました。
試しに自作のマイリストをスクロール化しようと、これを貼り付けたところ、全然作動しませんでした。当然でしょうか。。。(笑)また他の既設のマイリストでは応用効きませんか?
投稿: nigoe | 2005-10-21 17:14
nigoeさん、うまくいったようで何よりです(^^)
ところで、既設のマイリストのスクロールですが、この記事の最後に書いた通り、CSSだけでは不可能だと思います。
が、JavaScriptを使えば可能なので、ちょうどいい機会だったので作ってみました。
実験的に、右サイドの「my utils」とその上の「スクリプト(JavaScript)」っていうリストにスクロールを付けてみました。
こんな感じでよければ設置方法を記事にしようかなと思いますが、いかがでしょうか。
//明日は忙しいので明後日以降に。
なお、既存のマイリストのリンク機能をそのまま使わず、メモ欄を活用してそこに手書きHTMLでリストを作るようにすれば、CSSだけでスクロールさせることも可能です。
投稿: facet | 2005-10-21 23:29
すごい!折りたたみとスクロールバーがダブルで機能してますね。
こんな感じを目指しています。
ご多忙のところお手数をおかけします。
#急ぎませんので。。。
よろしくお願いいたします m(_ _)m
投稿: nigoe | 2005-10-23 06:10
nigoeさん、おはようございます。
こんなんでいいですか。では。
// 忙しいって、単に、買い物で遠出しただけなんですけどね(^^;
ところで折り畳みとスクロールの併存ですが、どうなんでしょう、使いやすいんでしょうか。とりあえずそういうこともできるということで設置してみたのですが、個人的には、手間が多すぎてイマイチかなあという気もします。折り畳みなら折り畳み、スクロールならスクロールと、どちらかにしてくれた方がいいような…
投稿: facet | 2005-10-23 09:31
あれ???昨日お返事差し上げたのですが、うまくアップされていなかったようです。失礼しました m(_ _)m
>折り畳みなら折り畳み、スクロールならスクロールと、
>どちらかにしてくれた方がいいような…
混乱させてしまい、すみません。
当初目的が「スクロールバー」設置でしたので、こちらをご教授お願いいたします。
自作マイリストもスクロール化できれば、悩み解消です(^^;
全然急ぎませんので、、、
よろしくお願いいたします。
※重複返信になっていた場合は、何卒ご容赦ください。
PS:「サイドバー.jp」のスクロール、とてもスムーズで助かっています。なにせサイト配信のスクロールは重くて不便でしたので・・・感謝です。
投稿: nigoe | 2005-10-25 07:59
nigoeさん、こんにちは(^^)
新しく記事を書きましたので、そちらをご参照ください。http://facet.cocolog-nifty.com/divers/2005/10/post_b5c4.html
なお、折り畳みかスクロールかどちらか、という話は、一般論です。ユーザビリティ的に、閲覧までの手順があまり増えない方がいいだろうという話ですので。
それから、「サイドバー.jp」の「サイト配信のスクロール」ってのは、どんなものですか?
本家( http://sidebar.jp/app/ )にあるスクロールも、うちのと全く同じ(CSSでつけたスクロールバー)に見えるのですが…。
投稿: facet | 2005-10-25 12:11
facetさん、こんにちは。
落涙です.・(;´д`;)・.
スクロールバーがつきました!!!
お陰様で念願叶いました、ありがとうございました。
ただ、自作のマイリストがスクロール化されません。その場合、どこか手を加える必要がありますか?
またまた質問魔ですみません。。。
よろしくお願いします。
追伸:
>それから、「サイドバー.jp」の「サイト配信のスクロール」
>ってのは、どんなものですか?
落書きツールのスクリプトを貼り付けると、集計画面がスクロール化されて出てくるんです。上部が電光掲示板になってます。このせいか、動作が重くあまりおすすめできません。
こんな事くらいしかお教えできない私です、お恥ずかしい・・・(^^;ゞ
投稿: | 2005-10-26 08:04
すみません、上記コメントが名無しでした。
私です m(_ _)m
投稿: nigoe | 2005-10-26 08:06
nigoeさん、
どこがどう問題なのか、見てみないとなんとも言えないので、ブログのURLを教えてもらえますか?(対象のマイリスト名も)
sidebar.jpの話は、落書きツールを入れたときのことなんですね。使ってないのでイメージできませんが…、まあ、解決したようですし、良しとしましょう(笑)
投稿: facet | 2005-10-26 10:49
facetさま
長々とご面倒をおかけします。URLはhttp://nigoe.cocolog-nifty.com/
です。
現在、スクロールと折りたたみを試験的に併用しています。
自作マイリストでスクロール化したいのは、
・「浦和レッズ系ブログ」
・「リンクあれこれ」
のところです。
窓の高さを50くらいに小さくしたり、リストをダミーでたくさん入れてみたりしましたが、作動しません。折りたたみも同様です。
教えていただいたスクリプトは、メンテ画面の最下部のマイリスト(テキスト表示)に入れてあります。
お手数おかけして恐縮です、よろしくご検討ください。
投稿: nigoe | 2005-10-27 07:07
nigoeさん、おはようございます。
わかりました。問題は、scrollLinkList(..., ...);の行が対象のマイリストより上にあることです。
記事の一番最初に書いてあるように、あのJavaScriptは、対象リスト「以降」にないと動作しません。
ということで、今の位置だと、「最近の~」系の二つはOKだけど他の二つは何をしてもダメ、ということになります。
なので、もっと後ろ、たとえば、「アクセス集計」のメモ欄(この前、.sb-listのstyleを置いた、その後)にコードを全部移すか、該当の二行を消して、その二行を改めてそこに仕込んでみてください。
こんな↓感じで。
<script type="text/javascript">
<!--
scrollLinkList("浦和REDSブログ", "80px");
scrollLinkList("リンクあれこれ", "80px");
//-->
</script>
投稿: facet | 2005-10-27 09:51
facetさま こんばんは
朝早くから恐縮です。
長らくお騒がせいたしました。
ようやく理解することができ、無事スクロール設置が完了しました!!!(号泣;;;
私の基本的な「読解力の無さ」が原因でした。。。
>スクロールさせたいマイリスト以降にあるマイリスト
>のメモ欄をテキスト表示に設定する
># 「以降」というのは、HTMLソース的に以降という意味です
の意味を勘違いしていたようです。
つまり、マイリストの位置関係を論じていたのは、『メンテ画面』での順番でなく、『公開するウェブログ上』での順番だったのですね・・・
同様に、折りたたみバーも無事作動しました!
本当にお恥ずかしい、、、ご迷惑をおかけしました。
心よりお詫びいたします。m(_ _)m
こんなシロートの私に、遥かフランスから懇切丁寧にお教えくださり誠にありがとうございました。感激です。
今後もまた「?」がありましたら、これに懲りずにお教えください。
時節柄、どうぞ御身御大切にお過ごしください(^o^)/
投稿: nigoe | 2005-10-27 14:24
nigoeさん、うまく設置できたようで何よりでした。
いや、分かりづらいのは、私の書き方のせいです。自分で読んでも、分かりづらいと思いますもの。どう書けば分かりやすくなるか試行錯誤しながらやってますが、いかんせん文才が無いようで…(^^;
ということで、恐縮されてもこちらが困ります(^^;。逆に、分かりづらいところはビシビシご指摘くだされば幸いです。
またなにかありましたら、お気軽にコメントくださいませ。では。
投稿: facet | 2005-10-27 15:20
facetさま こんばんは(日本)
まだココログ始めて(正確には他ブログから引っ越した)1ヶ月余りで、わからないことだらけですので。。。
またいろいろ勉強させてくださいね。多分すごく近いうちに(笑)。
facetさんの存在は心強いです。
今後ともよろしくお願いいたします (^o^)/
投稿: nigoe | 2005-10-28 18:06
nigoeさん、こんばんは(フランス)
私も最初のころはよく戸惑いました。他のブログでもやっぱり戸惑いました。そんなものですね。
ということで、こちらこそよろしくお願いします(^^)
投稿: facet | 2005-10-28 20:38