« MS IGLOO試写会招待券げっと。 | トップページ | ココログのトラックバックの問題点 »

2004.06.24

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

 facet-diversさんとこの「とりあえずサイドバー折り畳み2」を使わせていただいているのですが、折り畳みボタンの[+](閉じているボタン)と[-](開いているボタン)について、開いているか閉じているかでボタンの色を変えてみました。

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

 そこで元記事にて、

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

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

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

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

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

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

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

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

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

|

« MS IGLOO試写会招待券げっと。 | トップページ | ココログのトラックバックの問題点 »

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

コメント

「...Style...という文字が含まれる変数の行を消去してから」のところは、「...Style...の行に書いたプロパティ指定のうち同じプロパティ名の部分は消去して」と読みかえていただければと思います。

たとえば開閉のスイッチに従ってボタンのサイズを変えたい場合、外部スタイルシートやstyleタグのところで、

.sidebar h2.unfolded button {...width:1em;height:1em;...}
.sidebar h2.folded button {...width:2em;height:2em;...}

という風に指定してやればいいのですが、同時にマイリストの

switchStyle = "...width:1.4em;height:1.4em;..."

という一行からwidth:1.4em;とheight:1.4em;という二つのプロパティ指定を消去してやる必要があります。

∵同じプロパティがある場合、switchStyleやlabelStyleでの指定の方が優先されるようになっているからです。

今回の場合、background-colorもcolorもswitchStyleのところで指定していないから大丈夫だった、というわけですね。

# なお、元記事のSwitchStyleの部分で、widthとheightの直後の「:」が「=」となっていたことに最近やっと気付きました(^^;。しかも、Opera7系でボタンがちーさくなってしまう不具合の原因がこれでした。さすがOpera。strictですね。∴Operaでの不具合を解消するためには、マイリストの該当部分を修正してください_(._.)_。

## ただ、この修正をすると、今度は+/-マークがかなり左に寄ってしまうかと思います。styleSwitchのところでtext-align:center;と指定してあるのですが、これがどうも効かないみたいです。一難去ってまた一難というか……。Operaでは、ボタンの盛り上がりもないし。何が悪いんでしょう(T_T)

投稿: facet | 2004.06.25 05:13

>facetさん 

 詳しいコメントありがとうございます。確かに、該当部分にボタンの色などの要素は入っていないのですから、全くもって仰るとおりですね。
 自分の不勉強ぶりを晒してしまいお恥ずかしい限りです。他の要素もまた触ってみようと思っています。

 元記事のSwitchStyleについてご指摘の「=」について直してみました。ボタンの大きさは良い感じになりましたが、盛り上がらないのは何故なんでしょうね。それだけに、色を変えられて良かったなと思います。改めてありがとうございました。

投稿: しののめ | 2004.06.25 17:56

しののめさん
はじめまして。折りたたみボタンの色変更
大変たすかりました。ありがとうございます。
まだ、うまくいかない所もありますが
何とかあたふたしてみるつもりです。
とりあえずは、お礼まで。

投稿: beans | 2004.07.15 20:40

>beansさん 遅ればせながらご来訪ありがとうございました。

 導入記事拝見しました。残念ながら自分の環境(Me/IE6)ではボタンが確認できません(;_;)
 そちらでのfacetさんのコメント拝見するとこういうケースは稀にあるそうなのですが……。

#という訳で詳しくはbeansさんとこの当該記事をどうぞ。
http://beans.cocolog-nifty.com/blog/2004/07/post_12.html

投稿: しののめ | 2004.07.21 23:35

はじめまして!以前、こちらで折りたたみボタンの色変更を参考にさせて頂きました!
ご報告が遅くなりましたが、ありがとうございました☆
今後もお世話になるかと思いますが、よろしくお願いたします!!

投稿: ろんちゃん | 2006.03.12 10:58

>ろんちゃんさん
 ご丁寧にありがとうございます。
 元々のfacetさんとこだと、ボタンの開閉で画像を変えるやり方も紹介されていますので、またこちらもご覧になってみてください。

■[f-] サイドバー折り畳みボタンを画像に
http://facet.cocolog-nifty.com/divers/2006/03/post_4eea.html

投稿: しののめ | 2006.03.15 22:50

しののめさん、こんばんは!
しののめさんの選んでいるグリーンが気に入ってしまい、開閉ともにグリーンで統一したんですよ!
お心遣いのメッセージありがとうございます☆
また、今後ともよろしくお願いします。

投稿: ろんちゃん | 2006.03.15 23:38

はじめまして。
こちらを参考にさせて頂いて、折り畳みボタンの色変更が出来ました。
嬉しいです♪ ありがとうございました!!
またお邪魔させていただくと思いますので、よろしくお願い致します。

投稿: joon-be | 2006.03.22 21:33

>ろんちゃんさん 改めましてご丁寧にありがとうございます。
 色はかなりテキトーにつけたままだったんですが(^^; お気に召したのでしたら幸いです。

>joon-beさん こちらもありがとうございます。
 カスタマイズはやりだすとキリがないんですが、勢いのあるうちにがちゃがちゃやっとくと良いと思いますので、どぞ楽しんでくださいね。

投稿: しののめ | 2006.03.23 13:33

コメントを書く



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


コメントは記事投稿者が公開するまで表示されません。



トラックバック

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

この記事へのトラックバック一覧です: サイドバー折り畳みボタンの色変え:

» 折りたたみボタンの色を開閉で変える [KOROPPYの本棚]
サイドバー折りたたみスクリプトで登場する、「+」と「-」ボタン。 それぞれ別の色にして、見やすくしている記事を発見しました。 サイドバー折り畳みボタンの色変えで... [続きを読む]

受信: 2004.06.25 11:10

» 今回のカスタマイズ。 [ケセラセラ]
懲りずに、ココログカ [続きを読む]

受信: 2004.11.28 06:54

» 折り畳みボタンの色変え [Curiosity Episode]
改装終了の時の書いたのですが[・・・] 記事を 独立させました。 サイドバーの折 [続きを読む]

受信: 2006.02.15 21:34

» ぷちカルチャーショック [じゅんべえず うぃむ ]
モブログにて画像だけ〜  これ、我が家の食べかけポテチです。  皆さんのお宅の [続きを読む]

受信: 2006.03.22 21:35

« MS IGLOO試写会招待券げっと。 | トップページ | ココログのトラックバックの問題点 »