サイドバー折り畳みボタンの色変え

　facet-diversさんとこの「とりあえずサイドバー折り畳み２」を使わせていただいているのですが、折り畳みボタンの［＋］（閉じているボタン）と［－］（開いているボタン）について、開いているか閉じているかでボタンの色を変えてみました。

　元々の記事に、【カスタマイズ】としてスタイル変更について触れられている部分があるので、色々と触ってみえる方もおいでですが、自分はスクリプトの素の状態での「ここにボタンがありますという自己主張」が分かりやすくて良いなと思ったので、特に触らないでいました。ただ、Operaで見るとボタンの表示状態に少々問題があることもあり、やはり閉じているか開いているかの視認性を上げたいなとも思いました。

　そこで元記事にて、

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

　などとコメント差し上げたところ、facetさんからこんなアドバイスを頂きました。

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

　あ、そっか。と思い、CSSに以下の２行を追加。

.sidebar h2.folded button {background:#99cc99; color:#ffffff;}
.sidebar h2.unfolded button {background: #cc99cc; color: #ffffff;}

　ボタンの形状は触らずに、ボタンの色と文字色だけを変えてみました。勿論他の要素も変えられますがとりあえず。色のセンスは相変わらずないんですが、如何でしょうか。

　元記事の【カスタマイズ】では、

二つ目はstylesheet（styles.cssなど)に手を加える方法ですが、この方法を使うためには、上記の...Style...という文字が含まれる変数の行を消去してからCSSに下記のような感じで追加してください（確認してませんが、たぶんそれでOKだと思います）。

　と書かれているのですが、この変数の行は触らなくても出来てしまったようです。……あれ(^^;