Bonjour!

« 暴想: カテゴリ別バックナンバーをプルダウンメニューにするJavaScript | トップページ | Safariでpre要素の内容が消えてしまう »

2005-10-23

サイドバーのマイリストにスクロールバーを付けるJavaScript

以前、BlogPeopleなどのメモ欄で生成されるリストをCSSを使ってスクロールさせる方法について書いたのですが、マイリスト(私リスト/リンクリスト)をCSSだけで個別にスクロールバーをつけることが出来ませんでした。そこで、今回は、マイリストにスクロールをつけるJavaScriptを作ってみました。

リンク: [f-] サイドバーにあるリストをスクロールさせる方法.

----

▼設置方法

- スクロールさせたいマイリスト以降にあるマイリストのメモ欄をテキスト表示に設定する(適当なリストが無ければ新しく作る)
- 下記のコードをコピーしてメモ欄に貼り付ける
- 必要箇所を編集して保存し反映させる

# 「以降」というのは、HTMLソース的に以降という意味です(TypePad系ブログでサイドバーを左右両方使っている場合、右サイドバーは左サイドバーよりHTML的に下です)

▼貼り付け用コード

<script type="text/javascript">
<!--
function scrollLinkList(title, height) {
	var h2s = document.getElementsByTagName('h2');
	for (var i = 0, h2; (h2 = h2s[i]); i++) {
		if (h2.innerHTML.replace(/<[^>]+>/g, '').indexOf(title) == -1)
			continue;
		var ul = h2.parentNode.getElementsByTagName('ul');
		if (ul.length==0)
			continue;
		ul = ul[0];
		ul.style.height = height;
		ul.style.overflow = "auto";
		break;
	}
}
scrollLinkList("my utils", "150px");
//-->
</script>

▼編集箇所

上記のコードの下の方にある

scrollLinkList("my utils", "150px");

という一行を編集してください。書式は、

scrollLinkList("リストのタイトル", "高さ");

となっています。

# つまり、上記の例では、「my utils」というタイトルのマイリストの高さを150ピクセルに設定し、はみ出した部分をスクロールバーを使って見られるようにしています。

# 「my utils」は、今、このブログの右サイドバー下方にあります。

※なお、引用符内部は、大文字小文字など、小さな違いも区別しますので、リストタイトルは管理画面で作った通りに、高さは半角英数字(単位部分は小文字)で書くようにしてください。

# 例 : 「my utils」であれば "my utils" であって、"My Utils" でもなく、 "MY UTILS" でもなく、 " my utils" などでもないということです。また、150pxであれば、150PXでも150px(全角)などでもありません。

▼複数のマイリストにスクロールバーをつける場合

scrollLinkList("リストのタイトル", "高さ");の部分を繰り返してください。

----

以上です。不明瞭な部分がありましたらコメントしてください。

« 暴想: カテゴリ別バックナンバーをプルダウンメニューにするJavaScript | トップページ | Safariでpre要素の内容が消えてしまう »

ウェブログ・ココログ関連」カテゴリの記事

コメント

初めまして♪
サイドバーのマイリストにスクロールバーを付け、たいへん満足しました~
そこでスクロールバーの色を変えたいと思うのですが、どうして良いものかわかりません?
できたらアドバイスをお願いしますm(__)m

BECKさん、初めまして(^^)

ブラウザ自体のスクロールバーの色は Internet Explorer なら変えられたと思いますけど(Firefoxでは変えられません)、この div 要素のスクロールバーって色を変えられるのかな…。うーん。ちょっとわかりませんでした。ゴメンナサイ。
なにか分かったら教えてくださいませ。

先日はどうも~
マイリストにスクロールバーのタグを記述する事で解決しました!
ありがとうございます♪

bodyタグ用のCSSでdiv要素に付いたスクロールバーの色も変えた、ってことなんでしょうか? …結局、よくわからなかったのですが、解決したようで何よりでした。

はじめまして。
数日前、”折り畳みで続きを読む(新HTML暫定対応版)”を使わせていただき、該当記事にその旨コメントしたつもりなのですが・・・
今度はこのスクリプト、使わせていただきます。

なるほど、納得。
前回のコメント、「確認」だけして去ってしまいました。
失礼しました。

これから、たびたび寄らせて頂きます。
よろしくお願いします。

KATO-Pさん、初めまして(^^)

普通と違って[確認]ボタンしかなくてゴメンナサイ。これもJavaScriptで消してるんです…。余計なお世話だろうとも思うんですけどね(^^;

facetさん、初めまして☆そして、こんばんはです☆
サイドバーにスクロールバーを設置するため、ネットを漂流してましたら、やっとここへ辿り着きました!!
しかも、ココログの方で感動です(☆´∀`)/

なのですが、上記にあるコードをマイリストのメモ欄に貼り付けたのですが、スクロールバーが現れません。。。
マイリストの種類は『リンク』でメモ欄を『テキスト表示』にしているのですがダメです。。。
どうしら良いのでしょうか?
貼り付ける位置が間違ってるのでしょうか?
助けてください。。。

taichi☆さん、おはようございます&はじめまして(^^)

早速HTMLソースを見せていただいたのですが、javascriptコードが見当たりませんでした。外されてしまったのでしょうか。

今回の症状は、設置した状態を直接見てみないと何ともいえないので、再度設置してからまたご連絡いただけますか。

設置したままなのに?…ということならば、テキスト表示にするのが上手くできていなかったとか、設置したマイリストを表示し忘れているとかが原因でしょうか…。

facetさん、こんにちは。
ブログ人の記事折り畳みの際はお世話になりました。今回は、こちらのスクロールと、サイドバーの折り畳みを使わせていただきました。
大変快適です(^^)ありがとうございました。

秋津羽さん、こんにちは。カスタマ熱、復活ですか?(笑)

ところで、このスクロール、今のブログ人ならCSSだけでOKだったりするんですけどね(^^;

たとえば、

div.recent-post ul.module-list {
height: 9em;
overflow: auto;
}

とすれば、最近の記事が(たぶん)6件になります。

他は、recent-postのところを
module-recent-comments
module-recent-trackbacks
とかに変えればOKのはず。

で、スクロールにしたくないなら、
overflow: auto;
のところを
overflow: hidden;
にして、heightを適当に調整すれば、ご希望の件数になるんじゃないでしょうか。

同様に、このスクリプトも、
ul.style.overflow = "auto";
のところを
ul.style.overflow = "hidden";
にすれば、スクロールなしにすることができます。

いかがでしょうか?

…と思ったんですが、タイトルが二行にわたる時があるから、これじゃ希望の記事数を表示させられないことがありますね。うーむ。

JavaScript、作っちゃいました(^^;

このコメント欄ではJavaScriptのコードが書けないので、記事にしますね。

PS
折り畳み、最近のブログ人の設置方法を元記事に書いてなかったですね。スミマセン。遅ればせながら、元記事の方を修正し、対応方法の記事へのリンクを張りました。気づかせていただいて感謝です。

# しかし、そろそろあの記事、ちゃんと書き直さないといけないなあ。最初から酷かったけど、さらに酷いことになってます(^^;

あと、折り畳みボタン、横長ですね。ユニークです(^^)

こうやっていろいろなカスタマを見せていただけるのが結構楽しいです。

facetさん、こんばんは。
カスタマ熱、復活です(笑)。見た目をいじっている間に内容をもっと充実させればー、と自分で突っ込みを入れつつ、ついつい。
…ココログもブログ人も、デフォルトの状態だと、実はサイトのアクセシビリティはあまり良くないような気がしています。

>このスクロール、今のブログ人ならCSSだけでOK
はっ。そうですね。最初、自作の私リストもスクロールしようとしていたので、CSSでは無理だと思ったのでした。その後、他のリストは折り畳みに変更したりしたのですが、そのまま満足してしまいました~
私の記事の方にも、その旨追記しておきました。

>タイトルが二行にわたる時があるから
下手すると三行になってます…
でも、まさか、わざわざ新しいJavaScriptを作っていただけるとは!ありがとうございました。そちらの記事の方にコメントさせていただきますね。

サイドバー折り畳みは、実は一度嵌りました。またかいって感じですね、私(笑)facetさんの記事は決してわかりにくいとは思わないのですが。
えー、今回は、ブログ人の設置方法の記事を前もって読んでいたにも関わらず、折り畳みの初期状態やらボタンのマークやら、設置完了前にカスタマイズに走ってしまった結果、ブログ人用の設定はスッポリ頭から抜け落ちてしまったのでした。後日改めてやり直しました(笑)

ボタンは、マークを「▼,▲」「開,閉」「OPEN,CLOSE」(これは横長になりすぎて却下)とか色々試して、「+,-」で横長にすることにしました。

長文で読みにくいコメントで申し訳ありません。

秋津羽さん、こんばんは。

>…ココログもブログ人も、デフォルトの状態だと、実はサイトのアクセシビリティはあまり良くないような気がしています。

よくないですね。まあ、なので、いろいろと考えて作っているわけですが、難しいですね。

実際、サイドバー折り畳みを発表した時には、結構議論があったんですよ。折り畳むとアクセシビリティが落ちてよくないという意見もたくさん頂きました。クリックが多くなれば、それだけアクセシビリティが落ちる、と。特に、初期のバージョンでは、リストタイトルをリンクに変換するタイプのスクリプトで、リンクをクリックすることで開閉していたので、直感的に分かり辛いということもあって、反対意見もたくさん頂きました。まさに賛否両論。で、そういう議論を受けて作ったのがサイドバー折り畳み2だったんです。ボタンにして、押せば何か起こるんだと言うことが直感的に分かるようにした、と言うわけです。不細工で嫌だったんですが、妥協点を探した結果でした。

まあ、これで折り畳んだ時の方がアクセシビリティがよくなったと胸を張っていえるには程遠いのですが、折り畳みスクリプトの公開をやめるつもりもないですね。これは、折り畳みのアクセシビリティに関しては、最終的には、その人の感性の問題になってくるんじゃないかと思っているからです。一見でタイトルが俯瞰できた方がよいと感じる(私のような)人と、細目まで全部見えていた方がよいと感じる人と。

そういえば、このスクロールのやつも、スクロールバーが複数あると操作しづらい、という反対意見もあります。実は私も嫌いなんです。ただ、ブラウザの高さより長いリストは折り畳みとの相性が悪いので、併用するようにしています。

# あ。そういえば、そろそろ my utils のところを折り畳みに戻そうかな。このスクリプトの記事ためにスクロールをつけたのでした。

----

>最初、自作の私リストもスクロールしようとしていたので、CSSでは無理だと思ったのでした。

あ。そうでした。マイリスト(私リスト)に個別にスクロールが付けられないのでこれを作ったのでした。すっかり忘れてた~(笑)

>でも、まさか、わざわざ新しいJavaScriptを作っていただけるとは!ありがとうございました。

いえいえ。ホント、こういうことがあると、まずいつも作ろうとしてるので、別にわざわざでも特別でもないんですよ。で、成功するのは何%かなあ(笑)…つまり、単にラッキーだっただけで(^^;

----

>サイドバー折り畳みは、実は一度嵌りました。またかいって感じですね、私(笑)facetさんの記事は決してわかりにくいとは思わないのですが。

ああ、そういっていただけると嬉しいですけど、長く公開していて修正をたくさんかけている記事はホント酷いですからね。実際、解説記事をたくさん書いていただいてますもの(笑)

>ボタンは、マークを「▼,▲」「開,閉」「OPEN,CLOSE」(これは横長になりすぎて却下)とか色々試して、「+,-」で横長にすることにしました。

そうそう。私もOPEN/CLOSEとか開閉は考えたんですよ。で、開閉は違いが分かりづらいということで却下。OPEN/CLOSEは、仰る通りで却下。結局、Windowsユーザが多いことを考慮して、フォルダの開閉の±をイメージして±にしました。

実は、±だけでは納得できなかったので、ボタンにマウスポインタを置いておくとOPENとかCLOSEとかの説明が現れるようになってるんですが、誰か気づいた人、居ますかね(笑)

>長文で読みにくいコメントで申し訳ありません。

いえいえ、とんでもない。長文にはさらなる長文でお返し! …ってあれ?このセリフ、どこかで使ったような…

>折り畳むとアクセシビリティが落ちてよくないという意見も
それも一理あるんですけどね。私もちょっと悩んだんですが、サイドバーが長ーーくなって何があるのか訳がわからない害のほうが大きいと思いまして。折り畳み使わせていただいたほうがいいな、と。

>初期のバージョンでは、リストタイトルをリンクに変換するタイプ
あ、そうだったのですね。直感的に分かり辛い、でしょうか?私は割と、気になったリンクがあったらクリックしてみる(笑)方なので、ポチポチ押しそうな気がいたします。

>スクロールバーが複数あると操作しづらい
スクロールだと、操作"方法"は一見して分かると思いますが、折り畳みボタンを押すよりは操作しづらいですよね、確かに。

>ボタンにマウスポインタを置いておくとOPENとかCLOSEとかの説明が現れる
気づいてますよ~(^^) 実はそこも何度か変えてみました。今は「見る,閉じる」にしてます。
…スクロールの記事なのに折り畳みのことばかり書いてしまいました。

>…スクロールの記事なのに折り畳みのことばかり書いてしまいました。

わはは。よくあることです(^^)

title属性、気づいてらっしゃいましたか。ありがとうございます。

そこは日本語の方がいいと私も思った時もあります。結局英語にしたのは、JavaScriptのところは一般的な機会翻訳で翻訳できないので、より汎用な英語にしたということだったりします。…なーんて。今思いついたいいわけです(笑)

本当は、デフォルトでは全部英語にしておいて、マイリストのところで個別に日本語に変えれてもらえるようにしようと思い始めたんですけど、面倒くさくなってやめてしまったという感じだったかと(^^;

ここって、スクロールでしたっけ?(笑)

PS

title属性のOPEN/CLOSE、よく見たらマイリストで変更可能になってますね。あれ~いつの間に~?(^^;

はじめまして  みんなで解決広場から来ました
サイドバーのマイリストにスクロールバーを付けたいのです
ご指導して下さい

我がブロの右サイドバーにある”トラックバック・ピープル”に付けたいのデス

この場所に”貼り付け用コード”貼ってもだめでした
カスタムCSSを編集 に貼ってもだめでした

何かを理出来てないのだとおもいます
成功するまで教えて下さい よろしくお願い致します

りぼんさん、はじめまして(^^)

そうですね……思うに、根本的な問題は、りぼんさんが、今のりぼんさんのトラックバックピープルのリストが「マイリスト」じゃないということを理解していないと言う所にあるのではないかと。

つまり、りぼんさんのトラックバックピープルのリストは、マイリストの一項目のメモ欄を使った「自作のリスト」であって、マイリスト自身のリスト機能を使って作った「マイリスト」ではない、という意味ですが。

…伝わりましたでしょうか?

したがって、このJavaScriptを使ってもダメなのは、あたりまえなのです。

それから、記事内の設置方法の所に、

- 必要箇所を編集して保存し反映させる

と書いてあるのに、それをされていないようですので、そのあたりの理解力にも問題がある感じがします。

…「リンクリストのタイトル」というのが何かということ分からないということでしょうか。…ちょっと分かりかねますが。

同様に、りぼんさんのリストは、トラックバックピープルが自動で生成するリストでもありませんから、カスタムCSSを使ってCSSを適用してやるには、まず、自作のリストのHTMLの方にidやclassを付けてやるなどして、HTMLの方を先に整備してやらないといけないのですが、そのことも分かってらっしゃらない感じがします。

----

ということで、これからどうすればいいかについてですが……私見を書いておきます。参考になれば。

1.今のトラックバックピープルのリストを、本来のマイリストの機能を使って作り直し、このスクリプトを使う。

2.今の自作リストにカスタムCSSを使う方法を理解する。

二つの選択肢のうち、1.は作業が面倒ですが理解は簡単め、2.は作業は簡単ですが理解するハードルが高めかなと思います。個人的なお勧めは、2.です。つまり、この記事のJavaScriptを使わないで済ませる方法です。

----

いかがでしょうか。

ありがとうございます
個人的なお勧めは、2.です。←で、2の方法にしました
ビルダーで水面下にて作成しているのですが
部品の中に文字は入るのですが リンクがタグが出て
しまいます
泣けてきます 疲れました(笑)

りぼんさん、お疲れ様です。

せっかくの素晴らしい写真ブログなのに、こんなことで嫌になってしまってはもったいないですから、ボチボチやってくださいませ。こんなことできてもできなくても、ネットで生きていくというのでなければ、本当に対したことじゃありませんからね(^^;

さて。

>部品の中に文字は入るのですが リンクがタグが出てしまいます

みなさんが「みんなで解決!広場」で既に指摘されているように、「部品」というのは一般的な用語ではなく、結果としておっしゃっる意味が分かりません。また、「リンクがタグが…」というのも意味不明です。つまりどういう状態になっているのでしょうか。他の言葉で言い換えてみていただけますか?

また、ビルダー(?)でやったことを実際にここに書き込んでいただくと、より良いかもしれません。つまり、どんなHTMLにしたのか、どんなCSSにしたのかということですが。そうすれば、何処が問題なのかを具体的に指摘できると思いますので。

いや、それよりも良いのは、水面下ではなく、水面上でやっていただいて、うまくいかない状態のままこちらにご連絡いただくことでしょうか。お知らせいただければそちらに伺いますので。ただし、すぐに反応できるとは限らないということはあらかじめご了承ください。

そういう意味では、ブログに書いていただくというのが一番よいかもしれませんね。誰かが先にもっと適切な方法でアドバイスをしてくれるかもしれませんし。

ということで、以上、お好きな方法でどうぞ。のんびりいきましょう(^^)

こんな状態です
↓クリックして見てください
http://ribonw.fc2web.com/abcd.htm

りぼんさん、拝見しました。そして、わかりました。

「部品」と言うのは、「フォーム部品」の略だったわけですね。
(「ホームと入力部品」というのは、「フォームと入力部品」もしくは「フォームの入力部品」かと思われます)

で、仰られていた「部品」というのは、HTML用語でいう「textarea」のことだったというわけですね。
(textareaのことをビルダー用語では「複数行テキスト領域」というのですね。)

…と言うことならば、「リンクがタグが出てしまう」という意味不明だった一文も類推できます。textarea内ではタグは使えませんから、できなくて当然です。

----

今回、ページを作っていただいたお陰で、何が問題なのかがはっきりと分かりました。

つまり、りぼんさんは、ココログのサイドバーのリストでよく見られるスクロールバーは、フォーム部品(textarea)で作られていると思っていたということなのですね。

そうではないのです。

これらは、一見似ていますが、全く別物です。

textareaは使いません。CSSと言われる、HTMLで書かれた文章のスタイル(装飾部分)を指定するための記法(言語)を用いてスクロールバーを付けているのです。

…ということなのですが、さて、どうしましょう。

現状では、りぼんさんの知識がなさすぎて、これ以上、説明のしようがないですからねえ。

前回の2.というのは、divなどでリストを囲み、その(div)要素にstyle属性をつけ、CSS記法でheightを適当に決めて指定してやり、overflowをautoにしてやれば自動的にoverflowした部分が隠れてスクロールがついてくれるのです。

つまり、解答を書いてしまうと、

<div style="height:200px;overflow:auto;">
<a href="...">…</a><br />
<a href="...">…</a><br />

<a href="...">…</a><br />
<a href="...">…</a>
</div>

(<や>や/や=は半角で)

…という感じにして、後はheightを調節していただければよいだけなんですけど。

いかがでしょうか。

ビルダーに頼っている限り、こういうことはできないかもしれませんね。

HTMLとCSSの概念が分かっていれば簡単なことなんですけど。

また、本当は、aとbrでリストを作るのではなく、ulとliとaを使うのが、HTML的には正しいということもありますが、それはまあ、その次の段階ですか。

----

ということで、2.をするなら、HTMLとCSSを勉強する必要があります。

1.ならその必要はありませんが、応用が利きませんから、カスタマイズに関しては残念ながらいつまでたっても誰かに頼らないといけなくなります。

私は、そのどちらでも良いと思っています。

つまり、カスタマイズも自力でやれるようになりたいか、細かいことはどうでもいいからブログコンテンツの充実だけを目指したいか、ということです。

どちらを選ぶかは、リボンさん次第です。

自分がやってて楽しい方を選べばよいのではないでしょうか。

スクロールバーを使わせていただいております。
スクロールバーが縦だけではなく、横にも現われてしまうのですが、横幅のサイズを変更するやり方がありましたらアドバイスを頂きたく、お忙しいとは思いつつも質問させていただきました。

あかねさん、レス遅れてスミマセン。メンテでいろいろと調子が悪いみたいで(^^;

それで、ご質問の件ですけど、このJavaScript自体では対応してないです。

考えれば何とかできそうな気もしますけど、お使いのテンプレートによるでしょうし、中の文字の具合にもよるので、実際に見ながらやってみないと何とも…です。よければ、ブログのURLを教えていただけますか。

ulの幅と同時に中のliの幅を指定してやるようにすればできるんじゃないかなあと思いますが…。

お返事ありがとうございます。
URL張らずにすいませんでした;

いえいえ(^^)
ところでせっかくURLを教えていただいたのですが、スクロールがついているところが見当たりません。
もう不要ということでしょうか?

コメント欄につけたのですが、横のバーが気になってチェックを外していました。何度もすいません。

「最近のコメント」のところでしたか。
そこだと、このJavaScriptじゃなくてCSSだけでやった方がよいのですけど、とりあえず、ツリー化を使ってらっしゃるようなのでそっちの方で

ul ul.tree {
...
width: 100%
}

と ul ul.tree のところに幅の指定を追加してみたら、横スクロールバーが消えました。

ただし、Firefox 1.5 ではそれでOKでしたが、ちょっとバタバタしていてIE6など他のブラウザでどうかは確認できてませんので、情報までということで。

お返事ありがとうございます。
横スクロールバーを消すことができました。

あかねさん、うまくいったようで何よりでした(^^)

初めまして。メルと申します。
いつも参考にさせて頂いております('∇')

私のブログも、サイドバーのリンクリストが長くてどうしたものかと困っておりました。
そこで、こちらの記事を参考にさせて頂き、スクリプトを貼り付けてみたのですが・・・スクロールバーが現れず、どうすれば良いのか分かりません。
メモ欄も、きちんとテキスト表示にしていますし、スクリプトの編集箇所も編集したのですが・・・;

ご多忙中、大変申し訳ないのですが・・・URLを明記しますので一度見に来て頂けませんでしょうか?

★URL→http://aquamarine.moe-nifty.com/
★スクロールさせたいマイリスト→FF11*Link
★スクリプトを記述したマイリスト→Search

宜しくお願い致します(´人`)

メルさん、初めまして(^^)

今、確認したんですけど、IE6でもFirefox1.5でもOpera8.5でもスクロールできてます。
もう解決したってことでしょうか?

早速のお返事、ありがとうございます('∇')

そちらからだと、ブログのトップページにもスクロールが、きちんと反映されているのでしょうか・・・?

私もIE6から見ているのですが・・・
ブログのトップページを見る限りでは、スクロールバーが反映されていないのです。
けれど、どれか一つの記事を選択すると、そこのページではサイドバーに反映されているようなのです・・・。

私の見たのはトップページでしたよ。…メルさんが入力してくれたURLのページのことをトップページというならば。

記事別ページ(「固定リンク」をクリックした時に現れるページ)は、今初めて見ましたけど、同じく問題なしです。

うーん。妙ですね。なんでしょう。

トップページでCtrlとF5を同時に押すなどして強制的に再読み込みしてみるというのも一つの手かもしれません。ココログ、メンテ後にちょっと不安定みたいなので。

それでもダメなら…うーむ。思いつきません…

度々、申し訳ありません;

CtrlとF5の同時押しを試してみた所、トップページでも正常にスクロールバーが表示されました!
ココログのメンテの影響だったのかもしれませんね;

大変、お騒がせ致しました(´Д⊂
ありがとうございました!

あ、うまくいきましたか。良かったです(^^)

こんにちは。

以前は別のスクリプトをご指南頂いていたのですが、
諸事情により改良したいと思ってます。

参考までにつくってアップしてみましたが、うまくいきません。
今回は、3つスクロールしたくて
scrollLinkList("j_leaguepeople", "250px");
scrollLinkList("s-pulse-ole", "250px");
scrollLinkList("jba_s-pulse", "250px");
って加えて、マイリストで下部においてみましたが
動きません。

大変 初歩的で申し訳ないのですが、宜しくお願い致します。

川口さん、お久しぶりです。こんばんは。

これ、たぶん、大文字小文字の違いじゃないかと。
# 区別するのは、JavaScriptの仕様なんです。大文字小文字を区別しないようにすることもできるんですが、してません。

で、動作未確認で申し訳ないんですが、たとえば
scrollLinkList("JBA_S-PULSE", "250px");
とすると、動作すると思います。
# その他の大文字小文字は、管理画面のマイリストかHTMLソースでご確認ください。

もしダメでしたらまたご連絡ください。
# よっぱらってるので、ちと手抜きでスミマセン(^^;

facetさん、ありがとうございます!あっという間に直りました、っていうか普通に動いてます。<あたりまえか。

>これ、たぶん、大文字小文字の違いじゃないかと。
># 区別するのは、JavaScriptの仕様なんです。大文字小文字を区別しないようにすることもできるんですが、してません。

(^_^;)てっきりall半角小文字でいかなと、と思ってましたが。参照先が "×××" で囲みなんだから、「文字は正しく」なんですね。

また、カスタマイズを考えてますので、そのときはお世話になります、ありがとうございました。

適当だったのでちょっと心配してたのですが(いや正直に告白すると、さっきメール通知をもらうまで完全に忘れてましたがw)、うまくいって良かったです。(^^)

facet様、こんにちは。
今、マイリストにスクロールバーをつけようと頑張っているのですが、どうもうまくいきません。
マイリストのタイトルをリンクリストにつけてみたのですが、さっぱりです。
スクロールさせるスクリプトはコメントアウトに表示したのが、間違いなのでしょうか。
前回に引き続き教えて頂けますか?
よろしくお願いいたします。

tsudukuさん、こんにちは。

説明が足りてなくてスミマセン。JavaScriptって、大文字小文字も区別するんですよ。。。

なので、
scrollLinkList("accessanalysis", "150px");
ではなく、管理画面でのマイリストタイトル通りに、
scrollLinkList("AccessAnalysis", "150px");
としてください。

また、最初の方の
function scrollLinkList(title, height) {
のところもいじっちゃってるようですけど、いじらないでくださいね。

# いじるのは、記事本文に書いてあるように、最後の方にある scrollLinkList(...); のところだけです。

それから、今回は大丈夫なはずですが、複数行にわたって書いてあるJavaScriptを今のように一行で書いてしまうと動かないときがあるので、お気をつけを。

では、Good Luck!

facet様、こんにちは。
facet様が仰るとおり、大文字と小文字を区別して、あと、最初の部分を直したら、無事表示させる事が出来ました。
いつもいつも、ありがとうございます。
感謝感謝です。

tsudukuさん、こんにちは。
上手くいったようで何よりでした。(^^)

facetさん、お久しぶりです。
あれからかなり経ちましたが、まだ試行錯誤の日々です。
今回は、サイドバーのトラックバック一覧にスクロールバーを付けることができました。ありがとうございました。
まだいろいろやってみたい事はあるんですけど、ぼちぼちやって行きますので、またよろしくお願い致します。

★節約ごはん★ さん、あけましておめでとうございます。

コメントまで読んでいただいたようで恐縮です。(^^;
もし調べていることが見つからなかったら、コメント欄で重複しててもいいので、お気軽にまたどうぞ。

カスタマイズは、終わりがないですね。
私も弄りたいところがまだまだありますが、絶賛放置中です。(笑)

# あまりに放置しすぎてて最近はスパムばかりなので、今回のもあやうく消しそうになってしまいましたw

お返事ありがとうございます。消されなくてよかったです(笑)。今日までお正月休みでゆっくりできているので、なんとなくまたカスタマイズに熱中しています。って、こんなことをここに書いてもいいのでしょうか?(^_^;)また、カスタマイズすることを見つけて寄らせていただきますです。^^

雑談上等、夜露死苦!です(笑)

facetさんの「マイリストにスクロールバー付ける」を使っていましたが、先日ブラウザをIE7にしたところ表示がおかしくなりました・・・

スクリプトやCSSなど良く分からないのでどうしたら良いのか悩んでます。

宜しければ解決法など教えて頂けたらと思っています。

BECKさん、こんにちは。

いろいろ調べてみたのですが、きちんとした解決方法は見つけられませんでした。どうもスミマセン。

とりあえず、以下のCSSをマイリストのメモ欄等に追加すると、アルバムイメージは重ならなくなります。

<style type="text/css">
<!--
.typelist-thumbnailed .module-list-item {
min-height: 75px;
}
-->
</style>

※全角の「<」と「>」を半角にしてください。

上記設定だと、イメージの大きさを基準にしているので、アルバムタイトルが長くなると問題が発生してしまうのです。ざっと見、今は許容範囲内かと思いますが、今以上に長いタイトルのアルバムを追加するとダメになるでしょう。

また、そうでなくても、文字を大きくして見ている人のことを考えると、いい解法ではありません。

が、現時点ではこの解決方法しか思いつけませんでした。IEの挙動はどうもよく分からないもので…。申し訳ありません。

facetさん
ありがとう!問題はあるそうですが全然OKですよ~

ブラウザによって表示が崩れるのが…ちょっと私には難解です。

BECKさん、どうも。
とりあえずOKとのことで良かったです。

>ブラウザによって表示が崩れるのが…ちょっと私には難解です。

いや、全くです。
IEさえなければもっと楽なんですが。

それにしても……どうしたものやら。うーむ。

コメントを書く

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/1941/6541436

この記事へのトラックバック一覧です: サイドバーのマイリストにスクロールバーを付けるJavaScript:

» サイドバーの最近のトラックバックをスクロール表示する [★節約ごはん★]
サイドバーに載せている、「最近のトラックバック」の表示が、どうしても縦に長くなっ [続きを読む]

« 暴想: カテゴリ別バックナンバーをプルダウンメニューにするJavaScript | トップページ | Safariでpre要素の内容が消えてしまう »

contact

検索

無料ブログはココログ
2017年3月
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31  

BANNERS