子テーマのスタイルシート設定 a.hoverのcolor設定での挙動について

Simplicityの特徴 › フォーラム › Simplicity2に関する話題何でも › 子テーマのスタイルシート設定 a.hoverのcolor設定での挙動について

  • このトピックには5件の返信、1人の参加者があり、最後に雪豹により10年、 1ヶ月前に更新されました。
5件の返信スレッドを表示中
  • 投稿者
    投稿
    • #45469
      雪豹
      ゲスト

      2.2安定板から2.3開発版にアップデートしました

      親テーマのstyle.cssの設定はいじらずに、いままで子テーマのstyle.cssの中に、a.クラス名:hover { color:色; }として親テーマとは別設定でhoverでの色を設定していて正常に動作していました。

      最新の2.30bにアップデートしたところ子テーマのスタイルシートのhover{color属性}をすべて無視し、カスタマイズの色→リンクホバー色で設定した色に統一されてしまうようになっているのです

      ちなみにcolor属性だけ無視されbackground-color属性は正常に動作しています

      親テーマのcssはなるべくいじらずに、個別にhover色を子テーマのスタイルシート設定で変えられるように戻したいのですが可能でしょうか?

      初歩的な質問で申し訳ないのですが、確認してくださると大変助かります

    • #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がどうなっているか、あるいはサイトのアドレスを公開してもらえればすぐにどういう状態かはわかります。

    • #45478
      雪豹
      ゲスト

      お返事ありがとうございます

      hidekichi様ご指摘の通りに記述していたので、カスタマイズの設定をクリアしたところ正常になりました!
      アップデートによりデフォルトの設定が#cc0033になってしまったのが原因だったようです

      >>こう書いてあって、カスタマイザーでhoverの色を例えば#f00;にした時、今までなら.linkのhover色は#333だったけれども、今のバージョンではaタグ全部のhoverが#f00;になると言う意味合いですかね?

      その通りです。カスタマイズで設定してしまうと、クラスさえ無視してすべての色がカスタマイズの色に統一されてしまうんです

      >>クラスが指定してある以上無いかと思うんですけども
      わたしもクラスが指定してあるので無いと思っていたことが起こったので???になりここに書かせていただきました

      カスタマイズの設定をデフォルトの色#cc0033に設定後、子テーマに以下のように記述

      a.sidebar-profile:hover {

      color: #fff;
      background-color: #000;

      }

      本文リンクでは、以下のように記述

      リンク

      カスタマイズの設定をクリアすることで解決したので一安心出来ました。本当にありがとうございます。
      今バージョンではカスタマイズ設定がcss設定をすべて無視して最終設定になるみたいだということで納得しておきました

    • #45481
      雪豹
      ゲスト

      訂正

      本文リンクでは、以下のように記述
      本文のリンクではしっかりクラス設定をしてあり、background-color: #000;は動作しているのでクラス指定に誤りはなさそうでした

      <a class=”sidebar-profile” href=”#” target=”_blank”>リンク</a>

    • #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

      特定のものにそれだけの意味を持たせるには、クラスの組み合わせが一番重複がなくてよいかと思います。

    • #45500
      雪豹
      ゲスト

      ありがとうございます。大変勉強になりました。

5件の返信スレッドを表示中
  • トピック「子テーマのスタイルシート設定 a.hoverのcolor設定での挙動について」には新しい返信をつけることはできません。
スポンサーリンク
アドセンス(大)
アドセンス(大)