Simplicityの特徴 › フォーラム › Simplicity2に関する話題何でも › 子テーマのスタイルシート設定 a.hoverのcolor設定での挙動について
- このトピックには5件の返信、1人の参加者があり、最後に
雪豹により10年、 1ヶ月前に更新されました。
-
投稿者投稿
-
-
2016年9月22日 8:21 PM #45469
雪豹
ゲスト2.2安定板から2.3開発版にアップデートしました
親テーマのstyle.cssの設定はいじらずに、いままで子テーマのstyle.cssの中に、a.クラス名:hover { color:色; }として親テーマとは別設定でhoverでの色を設定していて正常に動作していました。
最新の2.30bにアップデートしたところ子テーマのスタイルシートのhover{color属性}をすべて無視し、カスタマイズの色→リンクホバー色で設定した色に統一されてしまうようになっているのです
ちなみにcolor属性だけ無視されbackground-color属性は正常に動作しています
親テーマのcssはなるべくいじらずに、個別にhover色を子テーマのスタイルシート設定で変えられるように戻したいのですが可能でしょうか?
初歩的な質問で申し訳ないのですが、確認してくださると大変助かります
-
2016年9月22日 9:18 PM #45471
hidekichi
ゲストカスタマイザーで色を設定せずに、子テーマだけで設定したらいかがでしょう?
カスタマイザーの設定がなくなれば、子テーマのcssが最後に読み込まれるでしょうから、それら設定を上書きすることはないかと思うんですが、どういう意図で子テーマのhoverの設定とカスタマイザーのhoverの設定をされているのでしょうか?
例えば、
<a href="#" class="link"> <div class="test">何かしらのテキスト</div> </a>このようにあった時に、子テーマstyle.cssに
a.link:hover { color: #333; }こう書いてあって、カスタマイザーでhoverの色を例えば#f00;にした時、今までなら.linkのhover色は#333だったけれども、今のバージョンではaタグ全部のhoverが#f00;になると言う意味合いですかね?
これだったら、クラスが指定してある以上無いかと思うんですけども。どういう場合の時にこう書くとこうなるというような具体例が欲しいところです。
だいたいの構造で良いのでhtmlとそのcssがどうなっているか、あるいはサイトのアドレスを公開してもらえればすぐにどういう状態かはわかります。 -
2016年9月22日 9:58 PM #45478
雪豹
ゲストお返事ありがとうございます
hidekichi様ご指摘の通りに記述していたので、カスタマイズの設定をクリアしたところ正常になりました!
アップデートによりデフォルトの設定が#cc0033になってしまったのが原因だったようです>>こう書いてあって、カスタマイザーでhoverの色を例えば#f00;にした時、今までなら.linkのhover色は#333だったけれども、今のバージョンではaタグ全部のhoverが#f00;になると言う意味合いですかね?
その通りです。カスタマイズで設定してしまうと、クラスさえ無視してすべての色がカスタマイズの色に統一されてしまうんです
>>クラスが指定してある以上無いかと思うんですけども
わたしもクラスが指定してあるので無いと思っていたことが起こったので???になりここに書かせていただきましたカスタマイズの設定をデフォルトの色#cc0033に設定後、子テーマに以下のように記述
a.sidebar-profile:hover {
color: #fff;
background-color: #000;}
本文リンクでは、以下のように記述
カスタマイズの設定をクリアすることで解決したので一安心出来ました。本当にありがとうございます。
今バージョンではカスタマイズ設定がcss設定をすべて無視して最終設定になるみたいだということで納得しておきました -
2016年9月22日 10:05 PM #45481
雪豹
ゲスト訂正
本文リンクでは、以下のように記述
本文のリンクではしっかりクラス設定をしてあり、background-color: #000;は動作しているのでクラス指定に誤りはなさそうでした<a class=”sidebar-profile” href=”#” target=”_blank”>リンク</a>
-
2016年9月23日 12:00 AM #45498
hidekichi
ゲストオススメの書き方としては、
a.CLASS:hover { //プロパティ }ではなく、
<a class="sidebar-profile test" href="#" target="_blank">リンク</a>と言うような識別用のクラスを入れて、
.sidebar-profile.test:hover { //プロパティ }とすることで、いろいろ変えることができたりします。他に.sidebar-profileと言うクラスが使われていればより効果が出ます。
サンプル: 色々テスト | jsFiddle
つまりはクラス2つで重複のないセレクタを作れると言うことです。
本来は、<div class="box"></div> <div class="box red"></div> <div class="box red circle"></div>このような感じで入れておき、
.box { width: 50px; height: 50px; background-color: #111; } .red { background-color: #f00; } .circle { border-radius: 50%; }このようにすることでクラスを使い回すことができます。
サンプル: ボックスのサンプル | jsFiddle
特定のものにそれだけの意味を持たせるには、クラスの組み合わせが一番重複がなくてよいかと思います。
-
2016年9月23日 6:00 AM #45500
雪豹
ゲストありがとうございます。大変勉強になりました。
-
-
投稿者投稿
- トピック「子テーマのスタイルシート設定 a.hoverのcolor設定での挙動について」には新しい返信をつけることはできません。