CSSに関する質問

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

      #sidebar li{margin-bottom:10px;}
      #sidebar ul{padding-left:1em;}
      レイアウトのカスタマイズをしているのですが、これらをいじるとウィジェット全体に影響がでます。
      そこで質問なのですが、前述の値を変更したものを特定のウィジェットにだけ適用させることはできるのでしょうか?
      疎いので、もしかしたら滅茶苦茶なことを言っているかもしれません。

    • #9635
      アバター画像わいひら
      キーマスター

      Chromeのデベロッパーツールなどで(もしくはFirefoxの開発者ツールなどで)編集したいウイジェット部分を右クリックして「要素を検証」を選択してださい。

      例えば、「新着記事」ウイジェットだったら以下のように表示されます。
      ce6d73aa8a3445d32f1bbc07b8ff5b13.png (PNG 画像, 600x124 px)
      それの、赤枠部分のIDもしくは、classと組み合わせたCSSセレクタを使用して設定すればOKかと思います。

      例えばこんな感じです。

      #new-entries li{
      	...
      }
    • #9638
      pon
      ゲスト

      わいひらさん、お返事ありがとうございます。すみません、質問の仕方が悪かったです。
      #sidebar ul{padding-left:1em;}はデフォルトの値です。この部分は残しつつ、
      例えば、子テーマに.widget_archive li{padding-left:1em;}と記述したとします。
      そうすると実質2em動いたことになると思います。#sidebar ul{padding-left:1em;}の部分を無効にし、
      .widget_archive li{padding-left:1em;}だけを適用させることができれば、アーカイブのウィジェットを1emだけ動かすことができるのではないかと考えました。このようなことを実現させる記述の仕方はあるのでしょうか?

      HTMLやCSSに触れるのが初めてなので、勉強の一環として今回このような面倒くさい質問をいたしました。

    • #9651
      アバター画像わいひら
      キーマスター

      いろいろな方法はあると思いますが、僕だった以下のようにします。

      .widget_archive ul{
        padding-left:0;
      }
    • #9704
      pon
      ゲスト

      わいひらさん、ご回答ありがとうございました!!

4件の返信スレッドを表示中
  • トピック「CSSに関する質問」には新しい返信をつけることはできません。
スポンサーリンク
アドセンス(大)
アドセンス(大)