« くしゃみひとつで呼ばれたからにゃ | トップページ | 歌いまくり。 »

2004/07/07

サイドバーの折り畳み

 前々から言っていたのですが、ついに本日、念願のサイドバーの折り畳みに挑戦することに致しました。

 もうね、オバサン、疲れちゃったよ。朝から夕方までずーっとPCにかじりついて頑張ったんだよ。
 なんでそんなに時間がかかったのかって? それはね、超初心者だからだよ(開き直り)。
 知識のある人なら、ちょちょいのちょいなんだろーなーって、ほんと情けなくなっちゃったよ。

 必要な二つのスクリプトをダウンロードさせていただいて、アップロードして、得意の丸々コピペで、さあどうだーっ!
 ……ところが、どうした訳か「+」「-」が表示されなくて、四角いボタンだけが表示されちゃったんです。それの原因究明だけで、一体何時間かかったことやら……。しくしく。

 どうやらこの「+」「-」の文字がボタン内に入りきらないらしい、ってことに気付いたのですが、他の方はちゃんと収まっているんですよね。
 なんで? どぼじで?! どーしてウチだけ?!
 という訳で、試しにスタイルシートの width と height の指定の後ろに overflow:visible; と入れてどんな大きさにしなければならないのか見ようとしたんです。
 すると、ボタンはやたらに横長になり、「+」は右隅にちんまりといらっしゃる……。
 ! !! !!! わかったあああ! (多分)
 そうです、私はサイドバーのタイトルにくまさんを表示させているので、.sidebar h2 で text-indent: 20pt; と指定していたのです。どうやらその影響をモロに受けた模様。
 
 という訳で、.sidebar h2 の text-indent: 20pt; を text-align: center; にして、タイトルは中央揃えに致しました。
 これで問題解決ー(のはず)。

 折り畳みに関しては、以下の記事を参考にさせて頂きました。ありがとうございます!
   facet-diversさまとりあえずサイドバー折り畳み2

 ただ、Netscape7.1で表示させるとなぜか、件数を表示させた項目だけタイトルが左寄せになってしまったので、泣く泣くこちらの記事のソースから以下の部分をがっつり消しました。

//
counterPrefix = "(";
counterPostfix = ")";
counterStyle = "letter-spacing:normal;color:silver;";
countBroadly = true;
//
pattern = "最近の|バックナンバー|カテゴリ";
countItemsBy(pattern);

 ……なんでだろう……一体、何をやらかしていたんだ、私。

 気を取り直して、今度は折り畳みボタンのデザインを変更いたしました。
 これに関しては、以下の記事を参考にさせて頂きました。ありがとうございます!
   KOROPPYの本棚さま折りたたみボタンの色を開閉で変える

 相変わらず、人様の知恵を拝借するしかできない私……。
 ほんと、先人の偉業に感謝感謝です。

★ 追記 ★
 7/8、こちらの記事の通りに修正いたしました。

 7/9、開閉ボタンの形状を変更するため、スタイルシートの以下の部分を変更いたしました。

.sidebar h2.unfolded button を

border-style: inset;border-width: 2px;border-color: #E0FFFF;background: #E0FFFF;font-size: 10pt;color: #0000CD;

.sidebar h2.folded button を

border-style: outset;border-width: 2px;border-color: #F0FFF0;background: #F0FFF0;font-size: 10pt;color: #3CB371;

「さあ、このボタンを押しやがれ!」的な(笑)、自己主張ができたと思うのですが……どうでしょう……。

|

« くしゃみひとつで呼ばれたからにゃ | トップページ | 歌いまくり。 »

コメント

こんにちは。

折りたたみスクリプトといい、ボタンの色替えといい、
皆さん素晴らしいアイディアを公開してくださいますよね。
私もひたすら真似っこさんなので、先輩方には頭が上がりません(*^^*ゞ

投稿: KOROPPY | 2004/07/07 18:50

>KOROPPYさん
 わあ、わざわざお越しいただき、ありがとうございます!

 見れば分かる通り(苦笑)、私はコピペするだけで、何も分かっていないことが殆どです。たとえ教わったものであっても、自分のものに昇華することができればなあ、と思います……。
 blogのデザインにしても、私はただちょこちょこ付け加えていくだけで、中々KOROPPYさんのところのように纏まりません。それはデザイン能力の違いなのかもしれません。あうー。
 これからも是非、参考にさせて下さいね♪ ありがとうございます!

投稿: リカ | 2004/07/08 00:50

Netscape 7.1でのこの不具合は、未確認なんですが、たぶん私のスクリプト自体の問題だと思います(同様の「本文折り畳み」スクリプトの方でも、数を表示している所だけに不具合があることが最近わかりましたので、たぶん同じ根から来ている問題だと思います。どうもこの数を表示する機能はいろんなところで問題があるようですね(T_T)。現時点では解決策が思い付かない状態ですので、不甲斐ないのですが、「次バージョンでこの不具合がないことを祈る」という程度でお許しいいただければ幸いです。_(._.)_

ところで、text-indentについてですが、これって「継承」の影響ではないかな〜と思います。なので、例えば、スタイルシートの方を .sidebar h2 {text-indent: 20px;} に戻して、マイリストの方で switchStyle = "...text-indent: 0;"; と追加してやれば両立できるんじゃないかなと思います。

# マイリストを使わずに、CSSの方で .sidebar h2 button {text-indent: 0;} という一文を追加するという方法でもOKかもしれません。

もしくは、継承しないpaddingプロパティを使えば、単に .sidebar h2 {padding-left: 20px;} だけでいけるかもしれません。

# KOROPPYさんのところのCSSでもtext-indentを使っていますね。padding-leftだとダメなのかな?

投稿: facet | 2004/07/08 07:10

>facetさん
 わざわざお越しいただいた上に、丁寧なご説明まで……ありがとうございます!

 「継承」の影響ですか……。そんなことがあることも知りませんでした。うう。
 教えていただいた方法で、試してみたのですが、
1. スタイルシートを .sidebar h2 {text-indent: 20px;} 、マイリストで switchStyle = "...text-indent: 0;"; 
 とすると、開閉ボタンがついた項目だけが左寄せになってしまいました。
2. スタイルシートに .sidebar h2 button {text-indent: 0;} という一文を追加
 これも、開閉ボタンがついた項目だけが左寄せになってしまいました。
3. padding-left
 なぜかまったく変化ありませんでした。

 私が何か構文ミスをしているのかもしれません(その可能性大)。でもおかげさまで、どうやら共存できそうな雰囲気が漂ってきたので、今後も試行錯誤しながら考えてみたいと思います。
 できました、とご報告申し上げたかったのですが、不甲斐なくてごめんなさい。とほー。
 他人のblogですのに、こんなに一生懸命考えて下さってありがとうございます。その姿勢に頭が下がります。

 Netscape 7.1での不具合についても、スクリプト自体の問題なのか私の構文ミスの問題なのか(後者の気がする)分かりませんが、拝借させて頂いているだけでもう充二分です。すがりつくばかりで申し訳ないです。
 これからも、そちらにお邪魔させていただこうと思います。その時は宜しくお願い致します。
 ありがとうございました!

投稿: リカ | 2004/07/08 15:21

>開閉ボタンがついた項目だけが左寄せになってしまいました。

適当なことを言ってすみませんでした。_(._.)_

継承の問題というより、ボタンを float: right; で右に飛ばしているのでtext-indentが無効になってしまうような感じでした。

で、いろいろ試してみた結果、 .sidebar h2 のpaddingのところを padding: 3px 3px 3px 20px; という感じにしてやると上手くいきました(padding: 3px;とpadding-left: 20px;は共存できないみたいです)。お試しください。

それから、Netscape 7.1での不具合の件ですが、もしかしたら修正できたかもしれません。

ただ、この修正の結果、text-indent(&float:right;?)を使っていると、Netscape 7.1だけじゃなく、IE6でもOpera7.23でもマーク無しボタンになるようになってしまったみたいです(^^;。ということで、text-indentは使わず、paddingで調整していただくようお願いします。_(._.)_

投稿: facet | 2004/07/08 19:44

>facetさん

 でっ、でででできましたー!(興奮気味)
 すごいです、私の希望通りのデザインですー!(私のデザインセンスはともかくとして(笑))

 ほんとにほんとにありがとうございます!

投稿: リカ | 2004/07/08 23:04

コメントを書く



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




トラックバック

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

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

« くしゃみひとつで呼ばれたからにゃ | トップページ | 歌いまくり。 »