サイドバーウィジェットの特定のカテゴリーの非表示について

PR 2017/1/11

このトピックには3件の返信、2人の参加者があり、最後にシンにより9年、 8ヶ月前に更新されました。

3件の返信スレッドを表示中

投稿者

投稿
- 2017年1月5日 6:42 AM #49227
  シン
  ゲスト
  いつも、simplicity2を使わせていただいてるシンです。
  
  以前、この質問と同じトピック#41584
  がありそれについての質問です。
  
  そのトピックで教えていただいたコード
```
.widget_categories .cat-item-13 {
  display: none;
}
```
  で特定のカテゴリーを非表示にすることができたのですが非表示にしたいカテゴリーの数が20近くあった場合、このコードを20個ほど書くと、ちょっとcssが重くなってしまう感じがします。
  
  ですので
```
.widget_categories .cat-item-13,14,15{
  display: none;
}
```
  のような感じで一つのcssで複数の特定のカテゴリー（サイドバーウィジェット）を非表示にする方法はないでしょうか？
  
  よろしくお願いします。
- 2017年1月5日 2:29 PM #49243
  Hidekichi
  ゲスト
```
.widget_categories [class^="cat-item-"] {
  display: none;
}
```
  とすると、.widget_categories .cat-item-何かしらが全部非表示になります。
  必要なものだけ、例えば
```
.widget_categories [class^="cat-item-"] {
  display: none;
}
.widget_categories .cat-item-20 {
  display: block;
}
```
  とすることで.cat-item-20だけ表示する事ができますが、cssで重くなるということはまず無いです。
  htmlをレンダリングする際にcssが参照されますが、htmlより前にcssは読み込まれていると思うのでdisplay: blockの部分はレンダリングされません。
  
  また子テーマstyle.cssに書いたものは基本ブラウザにキャッシュされるためより高速に動作するはずです。タグに直接style属性で書いていたりしていたら別ですが。
  
  他にも構造的にどうなっているかにもよりますが、
```
#sidebar .widget_categories > * {
  display: none;
}
```
  とか色々できます。全てはどのような構造になっているかです。
  * はユニバーサルセレクタといい、全部が該当するトランプで言うジョーカー(ワイルドカード)みたいなものです。全てが該当するため重いと言われますが多用しない限りそれほど重くはなりません。また上記の場合範囲が限られているので比較的重くなることはないかと思います。
- 2017年1月5日 6:15 PM #49261
  わいひら
  キーマスター
  hidekichiさんの書いたものが、最もスッキリ書けるものだと思います。
  ただ一応、以下のような書き方もあります。ちょっとましになる程度ですが。
```
.widget_categories .cat-item-13,
.widget_categories .cat-item-14,
.widget_categories .cat-item-15 {
  display: none;
}
```
  あと、CSSのスタイルを20個くらい書いた程度では、表示は重たくならないと思います。
  何か他に原因があるのかもしれません。
- 2017年1月10日 10:12 PM #49398
  
  シン
  ゲスト
  
  hidekichiさん、わいひらさんいつもお世話になっています。
  
  教えてもらった通りにやったらcssを短縮できました。
  
  ありがとうございました！
投稿者

投稿