Bonjour!

« 折り畳みスクリプト関連リンク一覧 | トップページ | 妥当な概要の文字数は? »

2004-03-14

とりあえずサイドバー折り畳み2

※ この版はもうメンテしていません。
以下の「状態保持」機能付きの版をご利用ください。
# 状態保持機能をOFF(*)にすれば、同じ動作になりますので。

----

* こんなの↓も作ってみました。

facet-divers: サイドバー折り畳み2:状態保持機能付き

----

前回から随分と間が開いてしまいましたが、とりあえずサイドバー折り畳みスクリプトの第二弾を暫定公開します。

サイドバーにある任意の(h2要素をもつ)コンテンツにスイッチボタンを付け、折り畳みができるようになります。折り畳むか展開したままにするかといった初期状態も選べます。

* 特徴

今回の変更点は、以下のような感じです。

  • 折り畳みスイッチを設置する箇所を指定できるようにした
  • 初期状態を折り畳みにする箇所を指定できるようにした
  • 折り畳みスイッチとしてbutton要素を採用してみた
  • 呼び出しスクリプト側でスタイルを指定できるようにしてみた(不具合あり)
  • 呼び出しスクリプトを分割して複数回呼び出せるようにしてみた(遅延対策)
  • リスト内の項目数を数えて表示してくれるようにしてみた(別スクリプトとして分離したので別記事で書きます)(やっぱり戻して統合しました:2004-03-15)

* 動作状況

InternetExplorer6 & Opera7.23 /[Windows XP], Firebird0.7 & Netscape7.1 /[Linux (Mandrake 9.2)]で動作を確認しました。(h2要素のスタイル指定がうまく反映されていなかったり、Opera7.23でスイッチがボタンじゃなく小さくなったりしてますが、動作自体は問題ないようです。)

(追記 2004-05-23)
Safari 1.1 [Mac 10.3]でも動いているそうです。Konquerorでは、相変わらずボタンさえでてきてくれません(どうもスクリプト本体最初の方にあるdocument.getElementsByTagName("H2").lengthが0になってしまっていて、それ以降の処理が全くできていない様子)。

Opera 6.05 [Win] や Mac IE もダメだそうです。

* 設置方法

設置は、マイリストです。テキスト表示に設定した任意のマイリストのメモ欄に、以下のスクリプトをコピー&ペーストし、ご自分の好みやテンプレートに合わせて適宜カスタマイズしてください。

(追記 2004-05-09)
このスクリプトは、設置したマイリストより(HTML的に)前にあるコンテンツしか折り畳むことができません。なので、なるべく最後の方に設置してください。
 
ただし、読み込みが遅い項目の後に設置してしまうと使いづらくなってしまうことがありますので、読み込みが遅いコンテンツの前後に分けて呼び出しスクリプトを設置することで対応できるようにしています。詳しくは、後述の動作遅延対策を御参照ください。

<script type="text/javascript" src="http://facet.cocolog-nifty.com/divers/myFunctions01a.js">
</script>
<script type="text/javascript" src="http://facet.cocolog-nifty.com/divers/foldSidebar02a.js">
</script>
<script type="text/javascript">
<!--
foldMark = "-";
unfoldMark = "+";
switchStyle = "padding:0px;margin:0px;width:1.4em;height:1.4em;line-height:1em;text-align:center;float:right;";
labelStyle = "letter-spacing:0.1em;";
//
pattern = "最近の|カレンダー|バックナンバー|カテゴリ|contact|検索|scripts|blog";
makeSwitchesBy(pattern);
//
pattern = "コメント|トラックバック|カレンダー|バックナンバー|カテゴリ|contact|scripts|blog";
foldContentsBy(pattern);  
//
counterPrefix = "(";
counterPostfix = ")";
counterStyle = "letter-spacing:normal;color:silver;";
//
pattern = "最近の|バックナンバー|カテゴリ|contact|検索|Recently Updated Weblogs|ココログ|scripts";
countItemsBy(pattern);
//-->
</script>

(追記 2004-06-19)
上記のswitchStyleの部分が間違っていたので修正しました。

一つめのpatternで折り畳みスイッチを設置する箇所を指定し、二つめのpatternでページ読み込み時に折り畳み状態にしたい箇所を指定、三つめのpatternでリスト項目の数を数えたい箇所をします。

patternは、コンテンツの名前(もしくはその一部)を半角縦棒(|)で区切って指定します。patternの行を記述しないと、この呼び出しスクリプトを埋め込んだマイリストより前にある、H2要素をもつコンテンツ全てにスイッチがついたり折り畳まれたりします。

設置自体は以上で完了です。

なお、リストの名前がコメントアウトされたマイリストは、折り畳み対象外になっています。

また、例えば、「カレンダー」という文字を含むリスト名(例えば「今月のカレンダー」)をもつマイリストを創ってカレンダーの直前に配置し、上記のようにpatternにカレンダーを含めることで、カレンダーも折り畳めるようになります。

----

* カスタマイズ

上記の呼び出しスクリプトは、今わたしが使っているTypepad風テンプレートに合わせてスタイルを調整してあります。折り畳みスイッチを小さくして正方形にしたり、右寄せしたり、下線の表示を状態のスイッチに伴って変化させたりしてます。テンプレートによっては不具合があるかも知れませんので、適当にいじってカスタマイズしてください。

カスタマイズ方法は二つです。

一つ目は、上記の呼び出しスクリプトのpattern以外の変数を調整する方法です。

変数switch...は、スイッチボタン(button要素/.switch)に対する指定、label...は文字の部分(「最近の記事」など。label要素/.switch-label)に対する指定、heading...はそれらを包含している見出し要素(h2要素)に対する指定です。

ついでに折り畳みスイッチの記号(+/-)もカスタマイズできるようにしておきました。

(追記 2004-03-16)
リスト名の部分(h2)のスタイルを定義していた下記の3行は当面はずすことにしました。初期状態でのスタイルの反映がうまくいかないためです。
headingStyleFolded = "border-bottom:none;";
headingStyleUnfolded = "border-bottom:solid thin gray;";
headingStyleCommentedOut = "border:none;";

また、counter...が項目数を数える部分の指定で、Prefixが前置記号、Postfixが後置記号、StyleがCSSです。

countBroadlyというのは、li要素を持たないコンテンツ(メールを送信、XML連携、ブックマークに加える等々)を折り畳んだ場合に、それらを数えるかどうかの指定で、trueにすると数え、falseにすると数えません。

(追記 2004-07-08)
あまり役にたたないので
countBroadly = true;
の行もはずすことにしました。(^^;

二つ目はstylesheet(styles.cssなど)に手を加える方法ですが、この方法を使うためには、上記の...Style...という文字が含まれる変数の行を消去してからCSSに下記のような感じで追加してください(確認してませんが、たぶんそれでOKだと思います)。こちらは、スイッチ記号や項目数前後の記号の変更や、コメントアウトされたコンテンツ見出しのスタイル変更などには対応していません。

.sidebar h2 .switch {
	padding: 0px;
	margin: 0px;
	width: 1.4em;
	height: 1.4em;
	line-height: 1em;
	text-align: center;
	float: right;
}
.sidebar h2 .switch-label {
	letter-spacing: 0.2em;
}
.sidebar h2 {
	letter-spacing: normal;
	border-bottom: none;
}
.sidebar h2.folded {
	border-bottom: none;
}
.sidebar h2.unfolded {
	border-bottom: solid thin gray;
}

----

* 動作遅延対策

前回の折り畳みスクリプトでは、読み込みに時間がかかるコンテンツの後に呼び出しスクリプトを置くと、ページを読んだ時しばらくしてからパタパタと折り畳まれてしまい、せっかくクリックしようとしたリスト項目が消えてなくなってしまってハラダタシイことがありました。

そこで、今回は、そういう遅延の原因となっているコンテンツの前後に分割して呼び出しスクリプトを配置できるようにしました。たとえば、私のサイトの場合、最初の呼び出しスクリプトが上記のような感じになっていて、最後の方でもう一度、下記のような呼び出しスクリプトを書いています。

<script type="text/javascript">
<!--
pattern = "Recently|ココログ|List|scripts";
makeSwitchesBy(pattern);
foldContentsBy(pattern);
//-->
</script>

----

* 注意点

予想外のものまで折り畳んでしまうことがあるかもしれませんが、その場合は、折り畳みたくないコンテンツの直前にダミーのマイリストを配置してみてください。

# これは、カレンダーなどのH2要素を持たないコンテンツも折り畳めるようにしたかったので、「次にH2要素が現れるまでの全てを折り畳み対象とする」という仕様にしたためです。

* 補足

myFunctions.jsというスクリプトの呼び出しは部分は、foldSidebar02a.jsを呼び出すより前であればどこに設置してもOKです。

# myFunctions.jsは、私のスクリプトで何度も使いそうな関数を抜き出してみたものです。今回はこれを改良することでIE6でもCSSがうまく反映されるようになったんですが、まだまだ改良の余地がありそうです。

外部スクリプト本体(foldSidebar02a.js)は、ダウンロードして改変し、ご自分のサイトにアップロードして使っていただいても結構です。もちろん、ダウンロードせずに呼び出しスクリプトだけを使用していただいても結構です。後者の方が設置は楽ですが、もしかしたら私がファイルを修正したり、このココログが消えてしまったりすることもないとは言えませんので、その点はあらかじめ御承知ください。

----

不具合などの情報やご意見、ご感想はいつでも募集中&大歓迎です。_(._.)_

« 折り畳みスクリプト関連リンク一覧 | トップページ | 妥当な概要の文字数は? »

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

コメント

参考にさせていただきました。
ありがとうございました。

kuuさん、コメントありがとうございました。もし動作に不具合があれば是非お知らせください。とても助かります(^^)。

風茶房、奇麗なサイトですねー。折り畳みボタンが浮いてしまって申し訳ないほど(^^;。

いえいえ。おかげさまでサイドバーがスッキリまとまって嬉しいです。ありがとうございます。
ファイル修正や、facetさんのココログが消えることがないよう、お祈りいたしております。^^;
Opera 6.05を、動作確認のために入れております。(面倒で入れたときのままです。^^;)6.05だと折りたたみは効いていないのですが、そんなブラウザで見ている人は滅多にいないと思いますので(汗)。

何かあれば、ご報告させていただきます。
よろしくお願いいたします。

Opera 6.05ですか…。うーむ(^^;。検討してみます。

---

>ファイル修正や、facetさんのココログが消えることがないよう、お祈りいたしております。^^;

もし私がココログをやめてもページは残るそうですのでご心配なく。あ。でも、ブログの記事別ページなどのhtmlページは残るらしいですが、アップロードしたファイルに関してどうなるかは記憶にないですね。どうなることやら。

あと、ファイル修正は、ないと思います。でも、ファイル名を間違えてアップしちゃったりすることはあるかも知れませんね。で、その直後にウチのHDDが逝ってしまったら……あり得るかも(笑)。

> Opera 6.05ですか…。うーむ(^^;。検討してみます。

(^_^;)バージョンアップをいずれしますので、お気になさらず。
ご報告の意味で書きましたが、かえって失礼してしまいました。申し訳ありません。m(_ _m)ペコリ
不具合ではありませんし。

> ……あり得るかも(笑)。

あわわわわ!
甘えてばかりいないで、こちらも勉強いたします(汗)。

kuuさん、
http://facet.cocolog-nifty.com/divers/2004/03/post_21.html#c164674

「かえって失礼」なんてとんでもないです。ご報告していただけて本当にありがたく思っています。「うーむ(^^;。」なんて書くべきではなかったですね。申し訳ありませんでした。_(._.)_

後半の文章も、冗談になっていなかったようです。失礼しました。できるだけそういうご心配をお掛けしなくていいよう、ファイルの保守にも留意したいと思います。
とりあえず、ミラーをつくりました。
もし、ココログの方のファイルが死んでいたら、こちら↓の@homepageの方のアドレスに切替えてみてください。

http://homepage3.nifty.com/facet/divers/foldSidebar02a.js

こちらの方が失礼を書いてしまったのに、お気遣いありがとうございます。その上、ミラーまでご配慮いただいてありがとうございます。m(_ _m)ペコリ
ココログには、facetさんのようなご親切な方が多くて、いつも助かっています。
ウチのブログはパクリまくりでして…。(^_^;)
皆さまのご好意に感謝です。

きっと、またいつか、facetさんにぶら下がって(^_^;;)お世話になることでしょう。m(__)m
自分でもスキルアップは心がけていきたいと思います。
今後とも、どうぞよろしくお願いいたします。

はじめまして。

当方はOCNブログ人なんですが、
ダウンロード&自サイトアップロードで使わせて頂きました。

適切な解説とスクリプトありがとうございます
ペコリ(o_ _)o))
おかげさまで、僕のような初心者でもなんとか設置できました♪

>>http://facet.cocolog-nifty.com/divers/2004/03/post_21.html#c226368

ろぷさん、レス遅れましたが、コメントどうもありがとうございました。

実は、長いレスを書いているうちに消えてしまって、ショックで二日ほど立ち直れませんでした(笑)。もうどんなレスをしたのか忘れてしまったので繰り返して書くことはできませんが、ブログ人で採用していただくと、とても幸せな気分になれます。どうもありがとうございます。

このスクリプトは、いろいろと不具合がありますし、使いづらいところもありますので、いつでもご意見やご要望をお寄せいただければ幸いです。

一応、次回の改良版の公開を目指して開発中です。

facet さん。スクリプトありがとうございました。ブログへご挨拶するのが遅れてしまいました。わたしのブログでのご指摘の件、私のブラウザ(IE6)では両サイドバーの日本語表記の部分は全く同じ大きさに見えます。スクリプトはTHANKSの所に埋め込んでありますが、順調に動いてるようです。ただ、右下のところにココログのバナー、プロフィール~…マイリストに追加 がまとまってるのは、途中に入れると消えてしまうからです。確かfacetさんの所にその問題の解消法が記載されてましたよね。こんどじっくり読ませて頂いてトライしてみようかと思います。

>>http://facet.cocolog-nifty.com/divers/2004/03/post_21.html#c238422

LayBackさん、わざわざこちらにまで書き込み、ありがとうございます。

レスはそちらのコメント欄にて。

一文字だけのトラックバック失礼しました(笑)
あれはあれで面白い?かと思いますし、あのまま放置させていただきます(^^;)

http://facet.cocolog-nifty.com/divers/2004/03/post_21.html#c248299

∴∵さん、わざわざどうも。了解です。(^^)

facet さん はじめまして
スクリプト拝借しました。
お陰様でスッキリ整理することができました。
設置が楽な方を使わせていただきましたので
今後ともよろしくお願いします。

http://facet.cocolog-nifty.com/divers/2004/03/post_21.html#c253193

ふにゅさん、TB&コメント、ありがとうございました(^^)。
設置が楽な方って何かよく分かりませんが、お役に立ててよかったです。
こちらこそ、よろしくお願いします。_(._.)_

スクリプト参考にさせていただきました。
なんとか設置できたみたいです。
了└|力"├(゚▽゚*)♪

スクリプトを使わせていただいています。
おかげさまでサイドバーがすっきりしました。
ありがとうございました。

 こんにちは。
 この度「とりあえずサイドバー折り畳み2」を使わせていただきました。
 「折り畳みスクリプト関連リンク一覧」にて、以前「折り畳めない」などと連ねていた寝言を取り上げていただいておきながらではございますが、使ってみてその良さを実感しました。ご報告とお礼を申し上げます(^^)

トラックバックが2連続で送信になってしまいました!本当に申し訳ございませんでした(>_<)
----------------------------------
4. サイドバーを折りたたみたい! [Blog de Affiliate(ブログでアフィリエイト) から]
----------------------------------
↑一件分削除してくださいます様、お願いもうしあげます。

お忙しいところ本当にごめんなさい!!
P.S.この削除依頼のコメントにつきましても、お気遣いなく削除してくださいませね。宜しくお願いいたします。

http://facet.cocolog-nifty.com/divers/2004/03/post_21.html#c304701

秘書さん、ブログ人での設置、どうもありがとうございました。設置に苦労されたようでどうもすみません(^^;。設置をもっと楽にできるように次回はがんばります。

http://facet.cocolog-nifty.com/divers/2004/03/post_21.html#c305595

kamedocさん、「私リスト」にリンクを張ってくださってどうもありがとうございます。最近ブログ人での設置が増えてきましたね〜(^^)。

http://facet.cocolog-nifty.com/divers/2004/03/post_21.html#c334586

しののめさん、折り畳みの採用、ありがとうございます。

この折り畳みスクリプトを作る上で、以前
http://blueeyes.air-nifty.com/muimui/2004/02/post.html
http://blueeyes.air-nifty.com/muimui/2004/02/post_5.html
で仰られていたユーザビリティに関するご意見を大変参考にさせていただきましたので、お礼を申し上げたいのはこちらの方です。

上記の記事中で、例えば

>畳むことによる欠点:「最近の記事」「カテゴリ」の見出しを畳んでしまうと、他の記事への誘導がしにくくなる。そもそも畳まれていることが分かりにくい。

と指摘していただいた点などをふまえ、折り畳み箇所を任意で指定できたり、折り畳まれているということができるだけ分かりやすくなるように開閉スイッチをボタン型にしたりして頑張って作成したつもりでしたので、今回このスクリプトを採用していただけて本当に嬉しく感じています。

ユーザビリティに関しては、結局、一覧性と分かり易さの兼ね合いだろうなという結論に私的には落ち着いているのですが、まだまだ迷っているところもあるし、このスクリプトに満足しているわけでもありませんので、今回のように改めて記事を書いていただけることは有難い限りです。_(._.)_
http://blueeyes.air-nifty.com/muimui/2004/06/sidebar.html

「aboutページ的な記事」へのリンクをサイドバーの上部に設置し、その中でサイドバーが折り畳まれていることを説明されているところなど、本当に参考になります。

説明無しでも折り畳まれていることが分かり易く、かつ、デザイン的にもすっきりさせるというのは難しいですね。これが次回の課題であり、この記事のタイトルが「とりあえず」で始まっている所以でもあります(^^;。

----

「見出し一覧」や「ページのトップに戻る」スクリプトも採用してくださっているようですね。これからも、スクリプトに限らず、ユーザビリティを向上できるようなTIPSを考えていきたいなあと思います。ありがとうございました(^^)。

http://facet.cocolog-nifty.com/divers/2004/03/post_21.html#c343999

AYAKOさん、重複したトラックバックは削除しておきました。トラックバックの削除は非常に簡単ですし、重複するのはよくあることですので(私なんか10回ぐらい重複させてしてしまったこともありますから(^^;)、全然問題なしです。お気遣いなく〜(^^)。

facetさん、感激です♪書き込みありがとうございます!
すごいです!!!!!!!!!!!!!
このスクリプトを編み出したのはfacetさんだったん
ですね(@@)/

とても親切で丁寧な説明文のおかげで、とても分かりやす
かったです。ありがとうございました。
これからも応援していますので宜しくお願いします(^0^)/

P.S.重複トラバの削除ありがとうございました(TT)>

facetさんこんばんわ。初めまして。
スクリプト使わせていただきました。
思ったより簡単にできてとても満足です。
これもfacetさんのおかげです(^-^)ありがとうございました。

今回は大変お世話になりありがとうございます。
使わせて頂きました。

 ご丁寧なコメントありがとうございました。
 あのような寝言でもお役に立てたのだと思うと嬉しい限りです。
 サイドバーの折り畳みボタンはスタイル変更でフラットな感じになじませておいでの方も多いようですが、自分としてはこちらの「ここにボタンがあります」と明確に分かるのが良いなと思ったので、そのまま使わせていただきました。閉じているボタンと開いているボタンの色を変えてしまうともっと分かりやすいのかも知れませんが、まだそこまで試せておりません。

 aboutページ的な記事(変な名前ですがココログのabout.htmlはプロフィールページなんですよね)については、別ページに隠してしまうのではなくサイドバーに直接書いてみえる方も多いのですが、敢えて内容を並べておいて、サイドバーの内容を「畳む」ということを説明してみたつもりなのですが……このあたりもまだまだ思考錯誤という感じです。

 折り畳みとユーザビリティの問題はサイドバーだけではないものでして、先日はこちらへのコメントもいただき、本当にありがとうございました。

http://blueeyes.air-nifty.com/muimui/2004/06/blog_hikaku.html

 他のスクリプトにもお世話になってます。「続きを読む」についてはそちらの方へコメント差し上げます。

#「このコメントにレス」も良いですね(^^)

http://facet.cocolog-nifty.com/divers/2004/03/post_21.html#c371145

しののめさん、コメントありがとうございました。

>閉じているボタンと開いているボタンの色を変えてしまうともっと分かりやすいのかも知れませんが、

なるほど。この折り畳みボタンの色は、+/-マークのように、開閉状態に従って変えられるようには設計していないので難しいかなと思ったんですが、幸い上位要素のh2が開閉状態によってfolded/unfoldedというclassが付くようになっていましたので、CSSを使って、
.sidebar h2.folded button {〜}
.sidebar h2.unfolded button {〜}
という風に指定してやれば、ボタンのスタイルも変化させることができますね。

>#「このコメントにレス」も良いですね(^^)

どうも。でも、実はこれ、マトモに動いているのはfirefoxだけでして。そんなのばっかり(^^;。

最近、どんどんページが重くなってしまってユーザビリティが損なわれているよーな気がするので、その辺りも改善できたらいいなと思っていますが、果たして……。

http://facet.cocolog-nifty.com/divers/2004/03/post_21.html#c363719

mahaloさん、こちらこそ、お役に立てず申し訳ありませんでした。
IE6で初期状態が閉じない問題がもし解決したら、是非ご一報ください。_(._.)_

 コメントありがとうございました。早速ボタンの色を変えてみました。「Style」変数の行はそのままでしたが、CSSへの追加だけで変更できたようです。環境はIE6とOpera7.11(Me)です。

> 最近、どんどんページが重くなってしまってユーザビリティが損なわれているよーな気がするので、その辺りも改善できたらいいなと思っていますが、果たして……。
 ユーザビリティ向上のためのスクリプトが重くなってしまうのは痛し痒しですね(^^; 自分も「続きを読む」をテストしたとき、トップに10件入れてみたら、折り畳んで表示されるまでに、1段落目どころかほぼ本文を読み終えそうなくらいの時間が掛かってしまって、「もう少しで読み終わるのに畳まれてしまった」状態になってしまいました。5件くらいだと1段落目が読み終わるかどうかだと思うので、使う際にはこのくらいでと思っています。

http://facet.cocolog-nifty.com/divers/2004/03/post_21.html#c375570

しののめさん、開閉状態の変化に合わせたボタン色の変更、拝見させていただきました。お蔭様で、このサイドバー折り畳みで使える技がまたひとつ増えました(^^)。

私もお相伴させていただくことにしましたが、CSSをいじりだすと、センスがないので時間ばかりかかってしまいます(^^;。最初、開いた時にボタンの色をバックと同じ白にしてみたんですが、Operaでは完全にボタンじゃなくなってしまったので、薄い灰色にしてみたりしたあげく、結局、border:inset 1px; を指定することにして、開いた時にボタンを引っ込めるようにしてみました。

その試行錯誤の結果、気付いたことがありました。IE6/Operaでは、ボタンのbackground-colorやborderを指定すると、ボタンの形が変わりますね。

従って、Operaでボタンをボタンらしく見せるためには、 border:outset; と明示してやる必要があるようです。

一方、IE6では、 background-color や border を指定するとデフォルトボタンの特性がなくなってしまう(角の丸みがなくなってしまったり、マウスオーバー時にボタンの枠がオレンジ色に変わってくれる長所までなくなってしまう)ので、 border や background-color を指定することを躊躇してしまいました。

あっちを立てればこっちが立たず。難しいです。

# 「続きを読む」、やっぱり結構時間が掛かってますか。むう。_(._.)_

こんにちは。2週間ほど前にblogを始めた初心者です。
公開していただいているスクリプトを私のblogにも適用してみました。これは素晴らしいですね!!とっても実用的です。いろいろblogをカスタマイズするツールがあるみたいですが、こういう実用的なモノが一番ありがたいと思います。
私はプログラマのくせにJavaScriptは全然分からないのですが、こちらで公開していただいているモノを参考にしながら勉強してみようかと思います。
どうもありがとうございましたm(__)m

こんにちは。コメントどうもありがとうございました。私のblogよりもこちらに書き込んだ方がいいだろうと思ったので書き込みさせていただきます。

> また、patternという変数を共用しているので、スイッチを付け、折り畳み、かつ、数える場合、
(略)
> という感じで、一度だけpatternに値を代入し、それを3つの関数で共有することもできます。

やはりそうでしたか。ろくにソースも見ずに記事にしてしまって申し訳ないです。すべての機能を適用させるつもりなのでそのように修正しますね。


> バグは多いし、対応ブラウザは限られているし、中身はツギハギだらけというスクリプトばかりでして……(^^;。この「サイドバー折り畳み」もいろいろと不具合が残っているようですし

質問させてください。作成したスクリプトの検証はどのようにされているんですか?目視でしょうか?仕事ではツールを使って自動で動作確認を行っていましてJavaScriptでもそういったツールがあるのかと思いまして(自分で調べろって話ですが。。。)。よろしくお願いしますm(__)m

http://facet.cocolog-nifty.com/divers/2004/03/post_21.html#c384487

笑い男さん、こんにちは。

>すべての機能を適用させるつもりなのでそのように修正しますね。

あいや、わざわざ修正していただくには及ばないです。それに、同じでもいちいちpatternを書いていた方が、後々「あ、ここの数を数える必要はないな」とか思ったときに修正しやすいですしね。

>作成したスクリプトの検証はどのようにされているんですか?

それが問題でして(^^;。……目視というか、実際にブラウザで実行してみてエラーを確認するという、超原始的な方法でやってます。

firefoxにはJavaScript Consoleというツールが付属しているので検証しやすいです。Operaも同様、javascript consoleで確認しています。問題がIE6で、このエラーメッセージがさっぱり意味がわからず役にたたないので、IE6でのバグ取りは本当に嫌なんです。いいツールをご紹介いただきたいのはこちらの方で(^^;。Linux上でIEまで含んだ動作検証ができるようなツールがあれば最高なんですが。

>意外なところで効用が。(^^;
>お役にたてて良かったです。

わざわざ私のページにまで来てコメント下さってありがとうございました。「効用」は私の周りでも好評です。(^^)/
facetさんのページには他にも色々、楽しい工夫があるようですので、今度ゆっくり読まさせていただきます。
では!

facetさん、はじめまして。
 スクリプトを拝借させて頂きました。
 おかげさまで、私のような超初心者にも、どうやら折り畳みができたようです。
 ありがとうございました! 感謝感謝です。

 連投申し訳ありません。書くのを忘れてしまって……。
 こちらのサイトをBLOGPEOPLEに登録させていただきました。事後報告で申し訳ありません。
 とにもかくにも、ありがとうございました!

http://facet.cocolog-nifty.com/divers/2004/03/post_21.html#c418366

通勤マンガーZさん、こちらこそどうも(^^)。

項目数の表示はスタイルも変更できますので、見辛い場合は適宜変更してください。

# 最新情報によると、Netscape 7.1で項目数の表示に問題があるらしいです。orz

http://facet.cocolog-nifty.com/divers/2004/03/post_21.html#c421314

リカさん、コメントありがとうございました。

記事にもしていただいたようで、本当にありがたい限りです。_(._.)_
http://rika777.air-nifty.com/poyapoya/2004/07/post_8.html

# BlogPeopleは、「ひろがるぶろぐ」機能を使っていますのでお気遣いなく〜。

コメントにカキコありがとうございました!
ちなみにMacのsafari1.0ですが、(自サイトでは間違えて、1.1としてました)ボタン自体は表示されています。そして、押せばたたむ事もできます。
なので、最初に表示した時に折りたたみになっていないだけです。

ところで、先ほどMacOS10.2.8のネスケ7.0でこちらのブログを見た所、本文が隠れてしまって表示するボタンも見当たらない状態になっていました…(汗)
右と左のサイドバーだけの状態…
私だけでしょうか?

JINさん、わざわざこちらに書き込みありがとうございました。

safari 1.0ではボタンは見えていて一応折り畳みはできるわけですね。やっぱりKonquerorとは何かが違うのですね。むう。

(Netscape 7で本文が見えない不具合ですが、御指摘の通りです。まだどのスクリプトが原因なのか判明していない状態です。_(._.)_)

facet さん はじめまして。
スクリプト拝借させていただきました。
また、しののめさんの記事を読んで色の変更も試みたんですが、”+”と”-”の文字色の変更がうまくいかないみたいで・・・。また、試行錯誤してみます。
とりあえずはお礼まで。

beansさん、コメント&トラックバック、ありがとうございました。

文字色の方だったんですね、うまくいかないのは。

今、Internet Explorer 6でも確認して見たんですが、ウチのIE6だと、折り畳みボタンすら現れてくれないですね。(T_T)

何かエラーがでているようなんですが、IE6のエラーメッセージは私には意味不明なもので、申し訳ありませんが、今回はお手上げです。_(._.)_

HTMLソースを見る限り、サイドバー折り畳み関連の部分でのミスはなさそうに見えるんですが……。実際、Netscape 7.1やFirefox 0.9.1、Opera 7.23では、問題なく指定通りに反映されています。文字色も背景色もOKです。

ありがとうございます。
サイドバー折り畳みスクリプト参考にさせてもらいました。
長くなってしまった記事欄、コメント欄がすっきりしました。
ありがとうございます。

のんのんさん、コメントありがとうございました。みなさんのところでも、きちんと折り畳めていることを祈りつつ。

こんばんわ。
はじめまして、facetさん。
サイドバー折り畳みスクリプト使わせていただきました。
ありがとうございました。

hydetricさん、コメント&トラックバックありがとうございました。(^^)

設置、難しくてごめんなさい(T_T)

facetさん、おはようございます。
はじめてコメントさせていただきます。
ろぷさんの記事より
とっても素敵な“折り畳み”を知りました。
facetさんの記事を何度も読みながら
無事設置完了です。

ありがとうございました。

urioさん、コメントありがとうございました。

>facetさんの記事を何度も読みながら

ひえー。分かりづらい記事でスミマセン! でも、無事設置していただけた様で何よりです。(^^)

はじめまして。
折りたたみ、できました。

facetさんのおかげで、見やすくなりました。
有難うございます!

コヤジさん、コメント&トラックバック、ありがとうございました。思ったより簡単だったと言っていただけて嬉しいです。(^^)

はじめまして。
折りたたみスクリプト(あと隠すやつ^^;)
使わせていただいています。

ブログをはじめてまだ間もないのですが、
あちらこちらで[+][-]のボタンを見かけ、
なんだろーこれカッコイイなぁと思ってました^^
ようやくfacetさんを発見し感動している次第です^^
とてもスッキリしました。ありがとうございます。

次はコメントツリーに挑戦だー!

covaさん、コメントありがとうございました。

covaさんのRelease Candidate 2、すごく綺麗なブログですね〜。こんな綺麗なサイトを作る方にカッコイイと言われると、なんだか照れちゃいます(^^;。

あと、隠すやつってのは、下線とか消すやつですかね。同じスクリプトでできたらよかったんですけどねえ。一応スクリプトにはその機能を付けてたんですけど、上手く動いてくれなかったのですよ。なんとか修正したいと思ったんですが、どうしようもないほどスパゲッティなスクリプトなのです。わはは(T_T)

# ところで、covaさんって、tsupoさんですか?(笑)
# → http://watcher.moe-nifty.com/memo/
# サブタイトルに注目。
# RSSリーダーに登録すると出てきました。<サブタイトル

>covaさんのRelease Candidate 2、すごく綺麗なブログですね〜。

きょ、恐縮です(@@;)こちらの方が恥ずかしいです(^^;)
facetさんのサイトは私の先生みたいなものですから(^^)
常に新しいことに挑戦されていてすごく勉強になります。
そのうち自分でもスクリプト書けるようになれると良いのですが。

># ところで、covaさんって、tsupoさんですか?(笑)
># → http://watcher.moe-nifty.com/memo/
># サブタイトルに注目。

ぁぁ!!
独自スタイルシートの設定方法を探していた時に
観測気球さんの記事を見つけて、例をそのまま貼り付けてしまっていたようです。。tsupoさんとは別人です(^^;)
観測気球さんへは大変失礼なことを。。
ご指摘ありがとうございますm-_-m;
RSSリーダ使っていないもので気づきませんでした。

ああ、やっぱりtsupoさんじゃなかったんですね。いや、tsupoさんがそんなにデザインセンスがあるわけは(以下自粛)(笑)

# tsupoさんとは一面識もありませんので念のため。いつもネタにしてスミマセン、tsupoさん。(と、万が一tsupoさんに見られた時のためにフォロー)

初めまして

サイドバー折りたたみ式をソースを
拝借してお陰様でブログがスッキリ出来ました
有り難う御座いました。

http://facet.cocolog-nifty.com/divers/2004/03/post_21.html#c678790

straycatさん、コメントありがとうございます。お役にたてたようで良かったです。(^^)

初めまして

straycatさんに、このブログを教えていただきました。
facetさん、私のブログにコメント有り難うございました。
まさかお見えになるとは・・・とても嬉しく思い
なんとか頑張ってみよう思いました。
まだ何も分からないので、サイドバー折り畳み式を
これからチャレンジしてみたいと思っています。
これからもこちらのブログで学ばせてくださいね。


http://facet.cocolog-nifty.com/divers/2004/03/post_21.html#c684240

hinoさん、ご丁寧にどうも(^^)。学ぶほどのコンテンツはありませんが、またいつでもいらっしゃってください。

ところで、プリントゴッコなんですね<あいでああーと。懐かしいなあ。。。そういえば私、デパートの年末商戦でプリントゴッコの店頭販売のアルバイトをしたことがありました(その時はjetではありませんでしたが(^^;)。試食ならぬ試用をしていく子供たちの、できあがったときに喜んでくれる様子を見るのが一番楽しかったです。ほう、こんな風にできるのかとう新鮮な驚きもあったりして結構楽しいアルバイトでした。匂いに弱いので一年だけでやめてしまいましたが。いまなら乾燥にも手間取らないだろうし、もっと純粋に描くことを楽しめるのでしょうね。。。

アドバイス有り難う御座います
又折りたたみ式サイドバーを利用させて頂いてます

折りたたみ式は画面の整理にはぴったりですし
こんな方法は今まで全然気が付きませんでしたので
早速使わせて頂きました・・感激

バックナンバーの取り扱いはど言う仕様か
迷っているうちに(いずれ増えてくるし)
バックナンバーと言う名前の私リストを作り
全て折りたたんでしまえと,単純な発想で
折りたたんでしまいました。

http://facet.cocolog-nifty.com/divers/2004/03/post_21.html#c686086

straycatさん、こんにちは。

この折り畳みスクリプトは、最初に公開した時点でユーザビリティに関していろいろと議論がありまして、この第二段になってもまだ胸を張ってどうぞと言えるほど満足できたわけではないので、ついついそういう視点で見てしまうのです。

その時の議論はこちら
http://tiger.air-nifty.com/tigers_logs/2004/01/post_85.html#c44762

今回のバージョンではボタン形式にしたので、第一段よりは直感的にわかりやすくなったんじゃないかなと思っているんですが…。

そんな感じでさらに考慮しつつ、第三段を作りたいなと思っています。(難しくて一向に進んでいないんですけど(^^;)

facetさん、はじめまして。
urioさん、ろぷさんと渡り歩いてきました。
スクリプト拝借させていただき
無事設置することが出来ました。
こうゆう機能は視覚的、機能的にも
とってもありがたいです。
ホントにありがとうございました!!

fecetさん、ご連絡遅くなりましたが、出来ましたので、ご連絡いたします。念願が叶いとっても嬉しいです。私のブログの
サイドバー折り畳みの見方を、早速初代プリントゴッコを作られた社長様にご説明してきました。見やすくなったとほめられました。心よりお礼申し上げます。

http://facet.cocolog-nifty.com/divers/2004/03/post_21.html#c694602

めぃすた。 さん、コメントありがとうございました。お役に立てて良かったです。

# urioさんやろぷさんにも感謝。

http://facet.cocolog-nifty.com/divers/2004/03/post_21.html#c696320

hino さん、わざわざの御報告、ありがとうございます。

>社長様にご説明してきました。

そうなんですよね。やっぱり説明しないと分からない所が、この「折り畳み」の難点です。一度でもボタンを押して何が起こるかが分かってしまえば、単なるスイッチですから簡単ですし、すっきりしていいんですが。何かもっと分かり易くなる方法があればいいんですけど…。

facet-diversさん,今晩は
前回はスクリプトを,お借りしまして
 有り難う御座います。

今回はお詫びに伺いました

お借りしましたスクリプトのcountItems行の箇所を非表示にしたくて,勝手に削除して使用してます,折角苦労して作成されたスクリプトを自分のわがままで勝手に削除して使用していることをご容赦下さい。又facet-diversさんに連絡もしないで勝手に自分のブログにfacet-diversさんへリンクを貼らせて頂きました.(色々と参考にしたい為)

 ご容赦下さい・・  

追伸

前回書くのを忘れていましたので
  再度コメント欄に書かせて頂きました

facet-diversさんへのリンクを
 私書箱,バックナンバー参考資料室の
 2箇所に使用させて頂きました。

改めてご了承下さい・・・?

http://facet.cocolog-nifty.com/divers/2004/03/post_21.html#c699438

straycat さん、ご丁寧にどうも。でも、そういう配慮は全く無用ですよ〜。

リンクの方は、断り無しでどんどんやってくださって結構です。インターネットですから。

スクリプトの方も、そこだけを使わないという使い方をしていただけることは、それが簡単にできることの証明でもありますから、逆に非常に嬉しい限りです。どうもありがとうございます。(^^)

さらに言うと、本当は、ダウンロードしてお使いいただいているスクリプト本体(foldSidebar02a.js)内のcountItems関連の部分も簡単に削除できれば、ページの読み込みにかかる時間がその分だけ短くなりますから、ユーザにやさしいんですけどね…。

最初からそういう風に設計していればよかったんですが、このスクリプトを作った時の私の知識では、思いつきもしませんでした。

そこで、今、改めてスクリプト本体を見てみたのですが、190行目ぐらいにある
 var counterPrefix = "(";
という一行以降を全て削除して再度アップロードするだけで大丈夫みたいです。そういえば、countItems機能を付けたのがかなり遅かったのでした。偶然。(^^)

ということで、もし興味がおありでしたら、一度お試し下さい。なお、countItems機能を削除し、かつ、最近の他の修正も反映させているバージョンを以下のリンクに置いておきましたので、こちらもご自由にお使い下さい。

http://facet.cocolog-nifty.com/divers/foldSidebar02a3.js

----

いつか他の使い方を思い付いた時には、是非また御一報ください。「こういう使い方をしてみたいんだけど」というようなご要望も大歓迎です。「こんな重いページ、コメントなんて書いてられるか!」というような場合は、コメントの少なそうな他の記事にでも構いませんので(笑)、お気軽にコメントいただければ幸いです。

早速,ご返答頂き又ご了承頂いて
   有り難う御座いました。
 此からも,宜しくご指導下さい。

スクリプトファイルは自分のブログに
 アップロードして使用していますが
 動作は初期状態のままで何も問題なく
 動作し,軽くて早いです・・感激です
 

http://facet.cocolog-nifty.com/divers/2004/03/post_21.html#c701347

straycat さん、

>動作は初期状態のままで何も問題なく動作し,軽くて早いです

あ、いや、その、これは、他の閲覧者の環境はさまざまですから、できるだけたくさんの方に問題なく見えるように修正を続けているという話でして、また、ダイアルアップやPHS経由で見ている方なんかは軽ければ軽いほど望ましいだろうという話です。

「ユーザ」という語が紛らわしかったですかね。前回のコメントの文脈では、「ユーザ」=「他の閲覧者」と考えてください。_(._.)_

はじめまして。

色んなサイトでみつけていいな~と思っていたのですが
サイドバー折り畳み2導入させていただきました!

スクリプトって何?の初心者でも
ようやく形になりました。

何か間違ってないかと微妙に不安ですが
とりあえずお礼に来ました。
ありがとうございましたm(__)m

http://facet.cocolog-nifty.com/divers/2004/03/post_21.html#c716171

すみ さん、

すみろぐ、拝見させていただきました。

>何か間違ってないかと微妙に不安ですが

いや、完璧です。(^^)

後は、仰られている通り、どれを折り畳んでおくかでしょうね。これは私もすごく悩みましたが、私のところでは結果的に「最近の記事」と「検索」のところを開いておくようにしましたが、それでよかったかどうかは結局わからないままです。

こういう問題があるので、最初は折り畳みボタンだけ付けて全部開いておいて、閲覧者が好きな時に全部簡単に開閉でき、また、各リスト別にも自由に選んで折り畳んでもらえて、しかも、最後の開閉状態が閲覧者ごとに記憶されている、というのがベストかなあと考えているところです。

また、ユーザビリティ的な問題(+/-ボタンで開閉できるということ自体が最初にわかりにくいなど)を、デザインとどう両立させるか、という課題も残っています。

まだまだ先は長そうです(^^;。

ということで、使ってみた後でのご意見、ご感想などもいつでも大歓迎です。是非またお気軽にコメントいただければ幸いです。

はじめまして、ブログ人新参者のsennです。
B-logのBishopさん経由でお世話になりました。
おかげさまで見栄えよく折りたたむことができて満足です♪
次はリストツリーに挑みます。
どうもありがとうございました。

http://facet.cocolog-nifty.com/divers/2004/03/post_21.html#c730237

senn さん、いらっしゃいませ。

ブログ人の方は、ろぷさんやBishopさんがいらっしゃるので私の出番が少なくて助かってますが、こちらにもお気軽にまたどうぞ。(^^)

こんにちは。

ご指摘有り難う御座いました
 早速修正しました。
こんな文章で間違えているなんて
 お恥ずかしい限りです。(未熟でした)
キャプチャー画面は,開いた状態の画面です
 余りにも殺風景でしたので
 日記では賑やかにしてみました

 此からも,どしどしご指摘して下さい。

http://facet.cocolog-nifty.com/divers/2004/03/post_21.html#c740221

straycat さん、わざわざこちらにコメントをどうも。(^^)
了解しました〜。

facetさん、こんにちわ♪
わざわざお越し下さって恐縮しております。
教えていただいたところは先ほど直してみました。本当の数字?が出てきた模様です(^^ゞ
ご親切にありがとうございました(*^^)
『折りたたみ遅延機能』を拝見して設置させていただきましたが、やはり重いところ(例えばBlogPeopleなどの外部リンク関係)のところは遅くなりがちだったので、昨日は配置を変えたりして苦戦していました。
『遅延機能』をお借りしたことのご報告が遅くなってしまってすみません。後ほど記事にしてまとめておきますね。
大事に使わせていただきます

puyoyonさん、わざわざコメントありがとうございました。

まだ「本当の数字」じゃなかったので、対策法を含め、そちらの記事のコメントにかかせていただきました。

http://puyoyon.tea-nifty.com/blog/2004/10/post_18.html#c880985

このスクリプトはややこしくて申し訳ないです(^^;

facetさん、度々おいでいただいて恐縮しております。
お話のところは先頭を//で消しておきました。

で、今頃気づいたのですが(遅)、コメントのカウントは私の場合、10件が上限だったようです。それとその表示件数はサイドバーのファイルで指定できることも解ったので、今は15件に変更しました。
<MTComments lastn="15" sort_order="descend">
(facetさんのスクリプトでコメント数を表示させなくても、自分で解っていればいいことだったのですが(^^ゞ 無知な私で申し訳ないです)

でも今回は本当にお世話になりました。改めてありがとうございました
またお邪魔すると思います。よろしくお願い致します♪

すみません、またお邪魔しました。
コメントのところに書込みしていただいた件は、『サイドバー折り畳み2・動作遅延対策』のスクリプトをコピーさせていただいた、ということです。ですので、私のコメントは書込み場所を間違えてしまったかも知れません。
何度も来ていただいて、更にご迷惑をおかけしてすみませんでした

ということで
http://puyoyon.tea-nifty.com/blog/2004/10/post_18.html#c883176)
こちらの凡ミスでした。お手数お掛けしました。

それと、コメントは何処でも結構ですので、お気遣いなく(^^)

そもそも今回は、私の頭の回転が遅いせいで妙なコメントを残してしまったのが原因ですし。

----

しかし、プロコースはさすがにいいですね。最新のコメントの数も自分で変えられるんですものね。

あとは、自分の読んでいないコメントがあった時にNEW!とか出てくれたら完璧ですね。...無理かな...(^^;

facetさん、こんにちわ♪
今回は本当にお世話になりました。ありがとうございました。
ペコm(_ _;m)三(m;_ _)mペコ

>自分の読んでいないコメントがあった時にNEW!とか出てくれたら完璧ですね・・

ほんとですね、そういう機能もあるといいなぁ~(^^ゞ

puyoyonさん、いえいえ、こちらこそ(^^)

はじめまして。『サイドバー折り畳み2』
導入させていただきました。素晴らしいです。(*^-^)
スクリプトはダウンロードさせていただきました。
感謝です!これからものぞかせていただきますね。

まにさん、コメントありがとうございました。お役にたてて良かったです(^^)

最近、「状態保持機能付き」ってのも作ったので、ご入り用でしたらそちらをどうぞ。基本的には02aを02cに書き換えるだけですので。

はじめまして、優れたアイディアと使い勝手の良い折り畳みの機能がとても気に入りました。
まだまだ、わたしのサイトでは始めたばかりなので実際に使わせていただくには、程遠いのですが、お気に入りに登録させていただきました。

maypopさん、はじめまして。ありがとうございます(^^)

このスクリプトは、「状態保持機能つき」の方が最新版ですので(といってももう古いですが)、設置の折には
http://facet.cocolog-nifty.com/divers/2004/10/post_1.html
からお試しください。不明点がありましたら、何でもまたコメントください。
では(^^)

facetさん、早速のコメントをいただきありがとうございます。忘れないようにお気に入りの項目を作成いたしました。「情報保持機能付き版」設置の折にはあらためてご報告いたしますね。

maypopさん、またまたご丁寧にどうもです。

設置は、思い出したらぐらいで結構ですよ。あえて使うほどのものでもありませんし、結構面倒ですし。

ということで、報告とかは特に不要ですので、お気軽にどうぞ(^^)

折り畳ませて頂きました!w
初心者なもので、こういうカスタマイズができるだけで感動してしまいます。ありがとうございます。

ところで、私の場合、ボタンの「+」「-」が表示されません。なぜなのでしょうか。機能的にはバッチリなんですが。
もしよろしければ教えてください。

続けて書き込み失礼します。

テンプレートを変えてみたら、「+」「-」は無事表示。
…っとおもったら、今度はボタン自体の表示がおかしくなっちゃいました。
というわけで、
自分でもいろいろいじってみたいと思います。

地理屋さん、こんばんは。

ご指摘の現象(±がない)ですが、switchStyleの行の右辺の引用符内に
text-indent:0px;
というのを追加してやると解消されるかと思います。お試しください。

このスクリプトもいいかげん古いので、新しいテンプレートには完全に対応していないことがありますが、ご了承ください(^^;

あと、他のテンプレでの不具合ですが、気になるので、もう少し具体的に症例を書いていただけると、今後の参考になって有難いです。よろしくお願いします。

ご丁寧な対応、本当に頭が下がります。
ありがとうございます。

さっそく、上記のtext-indent:0px;を追加してみたところ、めでたく「+」「-」が表示されました!…と思ったら、なにやら「カテゴリー」等の見出しの表示がダブってしまいました…。
(とりあえずコレで今日は過ごしますんで、よければ見てください。)

ちなみに、他のテンプレでの話ですが、具体的にはサンタクロースのやつにしてみたら、ページのダウンロード中の最初はバッチリ表示されるのですが、ダウンロードの最後に、最上段のサンタの絵がドンッと表示されてページ全体がグッと下に少し下がったと同時に表示がおかしくなってしまいました。
…なんだか表現しにくくて、わかりにくい説明になってしまいましたが、大丈夫でしょうか。。。

またお手数かけますが、よろしくお願いします。

地理屋さん、どうもスミマセン。
そういえば、text-indentだけだとそうなるのでした。

ちょっとうまくいくかどうか分からないのですが、一度labelStyleの行を
labeStyle="visibility:hidden;";
に差し替えてみていただけますか?
もしかしたらタイトル全部消えちゃうかもしれないんですが。

だめなら、labelのところを元に戻してから、スクリプトを設置したメモ欄の最後などに、以下のCSSを書き加えてみてください。

style type="text/css"
!--
#archive-category h2 label,
#gallery h2 label, #recent-entries h2 label,
#recent-comment h2 label,
#recent-trackback h2 label,
#update-list h2 label,
#archive-datebased h2 label {
visibility:hidden;
}
--
/style

こちらの方法は、間違いなくOKだと思います。

# 実は、つい最近、同じ症状でご相談を受けたばかりだったのに、すっかり忘れていました(^^;。スミマセンでした。

あと、サンタのテンプレですが、情報、ありがとうございます。
コメントいただいた状況からすると、ちょっと共存は難しいようです。
サンタのテンプレのリッチな部分を諦めて私のスクリプトを使うというような、二者択一なら、ちょっとした小技で可能そうなのですが…。
もし是非ということならば、また改めて考えてみたいと思いますので、その時にご一報ください。

では。うまくいくといいのですが。

何度もお手数かけます。

さっそく試してみました。
始めのlabeStyle="visibility:hidden;";の差し替えは、変化が無くて、
次の方を試しました。
そしたら予定通りかぶっていた字が消えたのですが、副作用?で「バックナンバー」という見出しだけが全部消えてしまいました。なかなか難しいものですね~。どうしましょ?(笑)

とりあえず、もとからテンプレートは衣替えを考えていたので、上手く表示されるのを選んでみました。根本的解決にはなっていませんが(笑)。

何度もありがとうございました。ひとまず、また気が向いた時にチャレンジしてみたいと思います!

では、またお邪魔すると思いますがよろしくお願いします。

結局。
バックナンバーだけプルダウンメニューにしてみました(笑)。

地理屋さん、こんばんは。

間違いないとかいっておきながら、間違えてましたか(^^;。もうしわけない。

他のテンプレだと前回ので大丈夫だったんですが、そのテンプレのバックナンバーは、また独特だったのかもしれません。

style type="text/css"
!--
#archive-category h2 label,
#gallery h2 label,
#recent-entries h2 label,
#recent-comment h2 label,
#recent-trackback h2 label,
#update-list h2 label {
visibility:hidden;
}
--
/style

こうだったかな?

まあ、プルダウンでいいなら、それで良しとしますか(^^;。

---
あと、labelStyleの方も、実はタイプミスでした。
× labeStyle="visibility:hidden;";
○ labelStyle="visibility:hidden;";

申し訳ありませんでした。ま、でも、この方法は、たぶん選択的に必要なやつだけを消すことは出来なかったはずですので、忘れてください。

# ついでに検証していただこうかなーなんて安易な考えだったので、バチがあたったようです(笑)

…と、こんな適当なやつですが、また何かありましたら何でもコメントいただけると幸いです。ではでは。

どーも。
またまた、さっそく試してみました!

そしたら、バックナンバーのところがクリックできるようになっていて、そこをクリックすると、なんと記事のところがバックナンバー&カテゴリーの目次ページのようになっちゃいました。

これはこれで、なんかいいですねw
サイドから中央に出てきて「さあ、選んでください!」って感じがします。

私もスクリプトを勉強して、いろいろいじってみたいなあ~。

ではまた。

地理屋さん、

サイドバーのバックナンバーのリストタイトルがarchives.htmlへのリンクになっていてジャンプするのは、ココログのデフォルトなんですよ。

実は、このリンクを生かすために「サイドバー折り畳み2」が生まれたといっても過言ではなかったりします。

で、地理屋さんのところのテンプレは、折り畳みとバックナンバーのリンクがうまく共存できない初めての例です(ボタンで開閉したくてもリンクが優先でジャンプしまう)。

今ざっとテンプレのCSSを調べてみた所、バックナンバーのリンクに
#archive-datebased h2 a { width: 170px; }
というスタイルが指定してあって、リンクがサイドバーの幅いっぱいになっているのが原因でしたので、前回のCSSの最後に

style type="text/css"
!--
#archive-category h2 label,
#gallery h2 label,
#recent-entries h2 label,
#recent-comment h2 label,
#recent-trackback h2 label,
#update-list h2 label {
visibility:hidden;
}
#archive-datebased h2 a {
width: 150px;
}
--
/style

という感じで、#archive-datebased h2 aへのスタイル指定を追加してリンク幅を調整してやると、開閉とジャンプが共存できるようになりました。ご入用でしたら、お試しください。

facetさん
はじめましてみゅーと申します。

今回超初心者な私ですが
素敵なスクリプトお借りしてみました^^/

見事にブログ整理ができて訪問された方にも
とても見やすい素晴らしいスクリプトですね^^

ひとつ教えて欲しい事があります。
右サイドバーの相互リンクのお仲間に
折り畳みを使ってみたのですが
ページが変わるごとに
ダラっと折り畳みがはずれてしまいます^^!
左側の最近の記事やコメントは大丈夫なんですが
何が原因でしょうか?
サポート下さればうれしいです。

みゅーさん、はじめまして。

このスクリプトを二箇所以上に設置される場合、二箇所目以降の
(つまり、みゅーさんの場合は右サイドの方の)
foldContentsBy(pattern);
のところを
foldContentsBy(pattern,"continued");
に変えていただく必要があるようになってしまっています。
申し訳ありませんがよろしくお願いします。

facetさん
こんばんわ^^/

お忙しいところありがとうございました。
サポート頂いた通り
foldContentsBy(pattern);
のところを
foldContentsBy(pattern,"continued");
に変えてみたのですが
状態は同じで変わりません・・・。
2つまとめて(お仲間リンクと素材やさん)折り畳んでるのですが
下の素材やさんはちゃんと作動しています。
すみません、もう一度サポートお願いします。

facetさん
こんばんわ^^/

お忙しいところありがとうございました。
サポート頂いた通り
foldContentsBy(pattern);
のところを
foldContentsBy(pattern,"continued");
に変えてみたのですが
状態は同じで変わりません・・・。
2つまとめて(お仲間リンクと素材やさん)折り畳んでるのですが
下の素材やさんはちゃんと作動しています。
すみません、もう一度サポートお願いします。

facetさん
こんばんわ^^/

お忙しいところありがとうございました。
サポート頂いた通り
foldContentsBy(pattern);
のところを
foldContentsBy(pattern,"continued");
に変えてみたのですが
状態は同じで変わりません・・・。
2つまとめて(お仲間リンクと素材やさん)折り畳んでるのですが
下の素材やさんはちゃんと作動しています。
すみません、もう一度サポートお願いします。

みゅーです。

すみません^^!
送信できなくて何度か押してしまって
3回も送信になってしまってました。


スミマセン!久しぶりだったもので完全に間違えてました(^^;

"continued"を書くのは、「最初以外」じゃなくて「最後以外」でした。。。

ということで、右サイドの方は
foldContentsBy(pattern);
に戻して、左サイドの方を
foldContentsBy(pattern,"continued");
にしてみていただけますか。

お手数かけて申し訳ありません。

あと、コメント重複の件はお気遣いなく~(^^)

facetさん、こんばんわ^^/

何度もすみません・・・
"continued"
サポートして頂いた通りやってみたのですが
相互リンクの部分だけがどうしても
折り畳めません(__!
それで2つに分けていた折り畳みスクリプトを
一つにまとめて
foldContentsBy(pattern);
と修正してみたのですが
やはり同じく相互リンクの部分だけボタンさえ
付かなくなってしまいました。

すみません、も一度サポート
お願いできますでしょうか?


みゅーさん、
こちらこそ何度もスミマセン。
申し訳ありませんが、もう一度だけ前回書いた通りにやってみてもらえますか。
で、ダメならダメな状態のまま再度ご連絡いただけると幸いです。
よろしくお願いします。

なお、現在の問題は、ひらがなとカタカナを間違えて「ホッとなお仲間リンク」のところを「ホットなお仲間リンク」と書いてしまっていることのようです。
# JavaScriptって、こういう細かいところで動かないときがあるんです。。。

facetさん、こんにちわ^^/

重ね重ねのサポートありがとうございました~
出来ましたっ!♪

字変換のうっかりミスを訂正したら
きれいに作動してくれました^0^

よく確認もせずにお手間をとらせてしまい
申し訳ありませんでした(__)>

facetさん感謝です^^/

追伸:自分のサイトからお仲間のサイトへ行った時に
   何度もセキュリティ警告表示が出るようになり
   気になってます。
   今回カスタマしたこととは別の原因でしょうか?
   


うまくいきましたか。ホッとしました。(^^)

セキュリティ警告表示の方ですが、お仲間サイトへ行った時に出るならば、このスクリプトの問題ではないと思いますが、移動する直前(まだみゅーさんのサイトが表示されている状態)ならば、拙作スクリプトが原因である可能性もあります。
他に何もせず、このスクリプトだけを外してみていただくと、そうであるかどうかが分かると思います。
それで、やっぱりこのスクリプトが原因っぽいなと思われた場合は、またまたお手数ですが、お使いのブラウザ&OS名と、警告表示の内容(文面と警告を出しているソフト名)を教えていただけると幸いです。よろしくお願いします。

facetさん

度々のサポートありがとうございます

セキュリティ警告の件ですが
またまた私の早とちりだったようです(汗)

IEの新機能の通達?らしく
難しいことはよくわかっていないのですが^.^!
「表示しない」にチェックを入れました。

facetさん
色々ありがとうございました^^/

いえいえ。解決してよかったです。
何かありましたらまたお気軽に。(^^)
ではでは。

facetさん
こんにちわ、みゅーです。

その節はスクリプトをお借りして
色々アドバイス共々お世話になりました^^/

今回スクリプト関係以外のヘルプお願いしたくて
おじゃましました。

ココログヘルプでもお尋ねしてみたのですが
原因・解決策がわかりません。
改めてfacetさんにお尋ねしてみようと
思いました^0^!


実は昨日、サイドバー内の並び列を揃えようと
リンクリスト記事内全てに
を追加していくと、
気付いたら全ての本文、
本文タイトル、コメントに至るまで
画面中央寄せになってしまっていました(。。!

タイトルとサブタイトルは、なんら変わっておらず問題ありません。

リンクリスト内を
全て元の作業する前の状態に戻したのですが
それでも中央に寄ったままです。

記事作成画面や確認画面では
元々のちゃんとした状態で表示されています。
公開画面だけがおかしくなってしまいました。

何が原因しているのでしょう?
どうかご教示くださいませ。


度々みゅーです。

文中に文字落ちがありました・・・。

リンクリスト記事内全てに---を追加していくと。
---の部分に(cennter)(/center)が入ります。

よろしくお願いします。

お仲間リンクの (のの様) のところに、閉じタグのスペルミスがあるのを発見しました。そこが原因かもしれません。

facetさん

お陰さまで元に戻りました^.^!

お疲れのところ
サポートありがとうございました。
とってもうれしいです*^.^*

戻りましたか。良かった良かった(^^)

はじめまして、tsudukuと申します。
facet様の折り畳みを設定させて頂いています。
サイドバーのタイトルにアイコン画像を表示させる様に設定しているのですが、マイリストで作成した折り畳みスクリプトがある為、アイコン画像が一つだけポツンと取り残された様な感じになってしまいます。
アイコン画像を1つだけ取り除く方法はあるのでしょうか?
折り畳みとは直接関係のない質問で申し訳ありませんが、教えて頂けますか?

tsudukuさん、はじめまして。(^^)

まず、ご質問の件ですが、ちょうど最新の記事がその問題を解消するのに使えますので、ご利用ください。
http://facet.cocolog-nifty.com/divers/2007/08/javascript_ce01.html

あとは余談というかお節介なのですが、
マイリストに書かれているHTMLに問題が多数あるみたいで、Firefoxなど、Internet Explorer以外のブラウザで閲覧すると、デザインが崩れたり、スクリプトが効かなくなったりしています。
とりあえず問題を見つけた箇所としては
- マイリスト「BlogMascot」:数種の問題あり
- マイリスト「BlogPet」:何らかの問題あり(未調査)
BlogMascotの方の間違いとして、具体的には、
- centerタグの入れ子ミス(閉じタグの位置がおかしい)
- brタグの書き方ミス(スラッシュが逆)
- 不要なdivやaの閉じタグがある
- imgタグの最後がborder=0/>となっている( border="0" /> と、少なくとも半角空白をはさまないといけない。#半角の>はこのコメント欄で書けないので全角で書いています)
。。。という感じです。

それから、これはJavaScriptの書き方なんですが、
改行まできちんと設置例に従って書かないと問題が起こる場合があります。JavaScriptはちょっとしたことで動かなくなるので、お気を付けを~

facet様、お返事ありがとうございます。
今までスクリプトの事、全く無知だったのがバレバレですね。
恥ずかしい。。。
この夏休みを利用して、ちょっとPCのこと、勉強しなくちゃいけないですね。

JavaScriptの方は、知らなくても何も気にすることないと思います。上手くいかなければ人に聞くという程度でいいんじゃないかと。
HTMLの方は、カスタマイズとかがお好きなら、ちょっと気にしたほうが後々楽になるだろうと思いますけど。

facetさん、お久しぶりです。
今までは、TOPページの記事の長さの関係で、
サイドバーに載せるリストを最小限?にしてたんですけど、これからも増えそうなので、折りたたみに挑戦してみました。

ひとつ解らないのですが、facetさんのブログのように、カーソルを乗せると「open」「close」の説明が出るようにするにはどうしたらいいのでしょうか?

foldMark = "-";
foldTitle = "close";
unfoldMark = "+";
unfoldTitle = "open";

のように入れてみたりもしたんですけど、できなくって、、、なので、ボタンを大きくしてボタンに書いてみました(笑)。まあ、これも結構気に入ってるのですが、今後のために教えてもらえたら嬉しいです。よろしくお願いします。

先日の件ですが、「サイドバー折り畳み2:状態保持機能付き」の方のスクリプトに替えたら出るようになりました。お騒がせしました。(^^ゞ
でも、私的には、状態保持機能が無い方でも説明が出るようになるとありがたいのですが、、、どうでしょうか?

スミマセン、2泊3日の旅行に行っててネットからOFFでした。_(._.)_

こちらのスクリプトはもうメンテしてなかったんですけど、そうですね、状態保持機能がいらない方もいらっしゃるかもしれませんね…。
ちょっと検討してみます。
ただ、先週ちょうどPCが落雷で壊れちゃって、今、新しいパソコンを待っているところなので、少々お待ちいただければ(^^;
# たぶん、来週までにはなんとか。
# もし忘れてたら催促してくださいませ。

お手数かけます。(^^ゞ
ほんとうにいつでも良いのでよろしくお願いします。
雷ですか?怖いですね。うちも昔、TVが壊れた事があります。

Gohanさん、
遅くなりましたが、ご希望の機能を追加しました。

最初はこのスクリプトを改造していたのですが、今後のメンテしやすさのことを考えて、「状態保持機能付き」の方を改造させていただきました。

つまり、「状態保持機能付き」を「状態保持機能なし」でご利用いただけるようにしたという、妙なことになりましたが…。(笑)

…ということで、「状態保持機能」なしでご利用いただくには、「状態保持機能付き」のページ:
http://facet.cocolog-nifty.com/divers/2004/10/post_1.html
にあるマイリストのメモ欄用コードに新しく書きましたように、

FS2.USE_COOKIE = true; //状態保持機能ON:true、OFF:false

という一行を新しく追加していただき、それを

FS2.USE_COOKIE = false; //状態保持機能ON:true、OFF:false

と修正して保存・反映させてください。

以上、ご不明な点や不具合がありましたら、またご連絡いただければ。

なお、「ココログからのお知らせ」は、規約により隠してはいけないことになっています。また、この部分は、ブラウザによってきちんと動作しないわかっています。…ということで、ここに開閉ボタンを付けるのは非推奨とさせていただいています。ご了承ください。

機能の追加、ありがとうございました。^^
これからゆっくり、いろいろ検討して載せてみたいと思います。

コメントを書く

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

トラックバック

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

この記事へのトラックバック一覧です: とりあえずサイドバー折り畳み2:

» サイドバー折り畳み2がリリース [あそびをせんとやうまれけむ]
なんだか、いくらでも眠れてしまうという体調のために、今日のメモばっかりになっていますが(笑 忘れないうちにクリップ。 前回から随分と間が開いてしまいましたが、と... [続きを読む]

» ■サイドバー折り畳み・堂々復活! [ごまめのつぶやき]
ということでまたまたfacetさんの記事facet-divers: とりあえずサイドバー折り畳み2で折り畳みスクリプトがバージョンアップしました。 [続きを読む]

» サイドバーの項目折畳みに関して [KITORA's Blog]
facet さん謹製折畳みスクリプトの導入を随分と長い間積残し事項としてほったら [続きを読む]

» サイドバー折り畳んでみた。 [電脳と書に捧げる莫迦β]
 cssは弄れば弄るほど己のセンスの無さを露呈しそうなので一段落させた電莫迦です [続きを読む]

» facet-divers: とりあえずサイドバー折り畳み2 [此処録ANNEX:ココログTIPS]
facet-divers: とりあえずサイドバー折り畳み2 [続きを読む]

» ちょっとカスタマイズ [空はただ蒼く]
してみました。 facet-divers:とりあえずサイドバー折り畳み2:で相 [続きを読む]

» サイドバーを折りたたみ(完結編) [KOROPPYの本棚]
「BlogPeople」「MyBlogList」や、「ひよこぴーぷる」「さくらりすと」などのメンバーリストで、もともと長かった右サイドバー。 最近は、さらに「M [続きを読む]

» サイドバーの折りたたみ。 [ || 翠*茶 || ]
「facet-divers」さんの"とりあえずサイドバー折り畳み2"を見ながら試 [続きを読む]

» 改装、ほぼ終了・・ [The evening star ]
 あーでもないこーでもない・・としておりました改装ですが、大きくはほぼ終了致しま [続きを読む]

» “腕に覚えありPeople@ココログ”コーナー開設 [The evening star ]
 ココログを始めて2ヶ月半ほどになりますが、デザインのカスタマイズなど、様々なサ [続きを読む]

» サイドバーを折りたたもう! [もげきゃっち]
このブログ、左右のサイドバーの項目が「+」マークで折りたたまれてるでしょ? 先日からお試しでやってみてたんですが、ブログ人でも不具合が無いようなので報告します [続きを読む]

» 最悪な寝起きから好転(笑) [テクノマエストロに憧れて]
サイドバーの折り畳みに成功!(ろぷさんありがとう) 畳めるとわかると今度はバラ [続きを読む]

» サイドバーの折りたたみ [隠れ家]
サイドバーがやたらと伸びてしまったので facet-diversさんのとりあえずサイドバー折り畳み2の スクリプトを拝借して設置してみました。 懇切丁寧に設置... [続きを読む]

» 4. サイドバーを折りたたみたい! [Blog de Affiliate(ブログでアフィリエイト)]
サイドバーを「+」とか「-」で出したり閉じたりするなんて、きっとこの技はCSSと [続きを読む]

» ちょっと改造 [Free Sky]
スクリプトってすごいです。 ということでサイドバーを折りたためるようにしました。 これでデザイン的にもすっきりしたかな? [続きを読む]

» 閑話休題 その7 [M A H A L O ]
いやぁ、つくづくパソコンに弱いんだと思いました。  もげきゃっちさんのところみた [続きを読む]

» サイド-バー折り畳み [カラフルボックス]
サイド-バーのコンテンツが長くなってきてスッキリする方法はないかと思っていて、f [続きを読む]

» サイドバー折り畳みボタンの色変え [むいむい星人の寝言]
 facet-diversさんとこの「とりあえずサイドバー折り畳み2」を使わせていただいているのですが、折り畳みボタンの[+](閉じているボタン)と[-](開い... [続きを読む]

» 「最近のコメント」のツリー化! [facet-divers]
いつものぴっくあっぷ。さんのめも経由で知りました。 ふろむにぅじぃ | コメントリストツリー化 for ココログ & ブログ人 というわけで、早速適用! tak [続きを読む]

» ぱたぱた♪ [LittleDocument]
facet氏の折畳みスプリクトを拝借してみた。 下の空き面積が減って、結構すっき [続きを読む]

» サイドバー折り畳んでみました。俺15冊買ってます(笑) [通勤マンガーZ]
facetさんのとりあえずサイドバー折り畳み2へのトラックバックです。 face [続きを読む]

» すてきだ [Penso, dunque sono]
あちこちで見かけていてやってみたいなーと思ってたサイドバー折り畳み方法を遂に! [続きを読む]

» 折りたたみボタン [田舎でblog]
ふにゅさんの記事を読んだときに、 facetさんのところに折 [続きを読む]

» サイドバーの折り畳みが出来たよ♪ [Felice]
あなたのサイドバー縦に長くなってごちゃごちゃした感じになっていませんか?そんな時にオススメみつけました。 [続きを読む]

» サイドバーの折り畳み [B-log]
サイドバーの折り畳み方法を自分なりに整理してみました... [続きを読む]

» http://hydetric.no-blog.jp/hydetric/2004/07/_.html [++ hydetric@blog ++]
サイドバーの折りたたみ成功!! 前々からサイドバー折りたたみたいと思ってたけど [続きを読む]

» サイドバーを折り畳んでみた [(仮)どこまで行ったらお茶の時間]
最近、サイドのリストが長くなってきたなあ、なんとかしたいなあ… 夜中にふと思い立 [続きを読む]

» サイドバーを折りたため!! [チョックの道草]
カテゴリも記事を書くたびに増えていき、見栄えが…。 しかたないな~折りたたんでみ [続きを読む]

» 検索&ボタン [コヤジのファッション通信]
ねむ~・・・ 新しく右上のトコロに検索窓と、サイドバーの開閉ボタンをつけました [続きを読む]

» 検索&ボタン [コヤジのファッション通信]
ねむ~・・・ 新しく右上のトコロに検索窓と、サイドバーの開閉ボタンをつけました [続きを読む]

» 検索&ボタン [コヤジのファッション通信]
ねむ~・・・ 新しく右上のトコロに検索窓と、サイドバーの開閉ボタンをつけました [続きを読む]

» プチカスタマイズ♪ [Eeyoreのしっぽ]
この所~「お気に入り」が増えてしまったのと コメントやトラックバック表示が長いの [続きを読む]

» サイドバー折り畳み2 [のこのこGOGO]
できました!!! facetさまにメールで問い合わせること数 [続きを読む]

» サイドバー折り畳み2 また修正しました [facet-divers]
拙作「サイドバー折り畳み2」ですが、先日nokoさんからいただいたお問い合わせのお蔭で、スクリプト本体(foldSidebar02a.js)の問題箇所が判明しま [続きを読む]

» すっきり…。 [Hiro's Message]
今日は思い切って、だるだる日記さんの記事とfacet-diversさんの記事を参考にサイドバーの折りたたみに挑戦した。この分野ド素人の自分にとって分かりやすい説... [続きを読む]

» サイドバー折り畳みを設置 [SHIBAの日記]
えっと、俺のblog、サイドバーに物を置きすぎ。 しかも、「My Blog」に登録しているサイトが、軽く50を突破してしまい(全部のblog読んでます)、サイド [続きを読む]

» かつしこ日記 機能強化計画(その1) [かつしこのトレーニング日記]
今日は朝から雨です。 午前中の LSD(ゆっくり走) 180分…という計画が、お流れです。 午後から スポーツクラブへ出向き、水泳のほかに Treadmil をすることにします。 朝イチ 思わず時間が [続きを読む]

» サイドバーの折りたたみDEスッキリブログ! [英 語 日 和 。]
このブログ、左右サイドバーの「カテゴリ」や「最近のコメント」の横に+と-ボタンが [続きを読む]

» ブログカスタマイズ [ヨサゲな素]
コメントのツリー化してみました トラックバックもそうしたいのですが、他所のスクリプトそっくりそのまま [続きを読む]

» サイドバーの折りたたみ♪ [Pleasant days]
サイドバーって、何でもぺったんできていいけれど、長くなってしまうしすっきりしない [続きを読む]

» Blog改造中(2)および新ブログ [ともぐろぐ(tomoglog)]
http://facet.cocolog-nifty.com/divers/さん [続きを読む]

» サイドバー折り畳み2:状態保持機能付き [facet-divers]
サイドバーにあるリスト名の部分(h2要素)にボタンを付け、リストを開閉できるようにするスクリプトです。今回のスクリプトは、以前公開した「サイドバー折り畳み2」に [続きを読む]

» 「サイドバー折りたたみ」を 1から2へ変更 [白いツバサ@cocolog]
昨日のココログ・サーバーの大きなメンテナンスの結果なのか、Daa's Blogさ [続きを読む]

» ブログのリニューアル [ボク達は家族 Hem Hem Diary]
年の瀬も迫って何かと忙しいですねー。こういう時に限って余計な事に熱中してしまう性 [続きを読む]

» Customising my blog [The Hog's Head]
サイドバーをいじってみました。 でも、ほんとにやりたかったのは、できなかった。 [続きを読む]

» サイドバー折り畳みを設置 [SHIBAの日記]
えっと、俺のblog、サイドバーに物を置きすぎ。 しかも、「My Blog」に登録しているサイトが、軽く50を突破してしまい(全部のblog読んでます)、サイド [続きを読む]

» ブログにツールを追加 [地理屋のひとりごと]
この前は、「サイドバー折り畳み」をつけました。この左側の、「+」「-」ボタンで閉 [続きを読む]

« 折り畳みスクリプト関連リンク一覧 | トップページ | 妥当な概要の文字数は? »

contact

検索

無料ブログはココログ
2017年4月
            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            

BANNERS