読者です 読者をやめる 読者になる 読者になる

せかいや

いまいるここを、おもしろく http://sekai-in-the-box.appspot.com/

【css】【jQuery】初回表示時だけ色を変えたい

自分のサイトで、コンテンツ表示のたびにcss定義をいじっているのが煩雑だなー、
と思って相談メールをしてみる↓

師匠ー、アイデアあったら聞かせてください

■現状
サイト(※1)で、コンテンツを白背景で表示しています。
今の実装は、背景色は水色で、クリックするたびに関数(※2)で背景色を白くしている。
初期表示時(タイトル表示時)の背景は水色がMUST。

■やりたいこと
クリックするたびに白くするのは煩雑だなと。
デフォルトの背景色を白にして、最初の表示だけ、背景が水色にしたい

■ためしたこと
CSSで背景を白に定義(※3)して、初期表示時にcssを変更(※4)してみた。
でもこうすると、定義がずっと ※4 によって上書きされてるから、白くならない。

こういうときってどうすればいいのでしょう。。


※1
http://sekai-in-the-box.appspot.com/
※2
$("#contents").css("background-color", "#ffffff");
※3
#contents {
background-color: #ffffff;
※4
jQuery(document).ready(function() {
$("#contents").css("background-color", "#00bfff");



こんな状態で、デフォルトは背景が水色↓
f:id:sekaiya:20130831170143j:plain

 
コンテンツ表示のたびにcssをいじって背景を白くしている↓
f:id:sekaiya:20130831170146j:plain


初回表示だけを判断する方法があるのかなーと思うが見つからず。

しばらくすると

タイトルのボックスだけcssかえては?

こんなお返事が。


 
やっぱりそうだよね。。
タイトルdivのサイズをコンテンツdivと同一にして色を水色にすれば、
デフォルトは白くて、タイトル表示時だけ背景を水色に出来るかー。
素直にその方法でやってみよう。



■結果
タイトルdivをコンテンツdivよりちょっと小さめにすることで、
あらいい感じ。
f:id:sekaiya:20130831170144j:plain
jsから、css変更している箇所を削除して完了。


■修正全量
このハッシュ値でコミットしてます
https://github.com/sekaiya/sekai-in-the-box/commit/07796bf8455c9ca469a7fd4536c3d606e3b3f9b0


BtoBの世界だと、表示速度とかぶっちゃけ気にしたことなかったけど、
自分のサイトとなると訳が違うね!!