別サイトをいじってたときに、CSSでホーム画面やカテゴリ一覧の画面だけ違う背景を適用したくなりました。
ちなみに、「カテゴリ一覧画面」というのは、カテゴリをクリックした後の画面のことを指しています↓
というわけで、それらに対するCSSについてを、メモとして残しておきます。
ホーム画面やカテゴリ一覧の画面だけ違うCSSを適用する
CSSのセレクタで、ホーム画面であれば「.home」、カテゴリ一覧の画面であれば、「.archive」とつけると、それぞれの画面だけを指定することになります。
例えば、それら2つの画面を指定して、mainの領域の背景を透明にしたい場合、下図のようになります。
.home #main, .archive #main { background-color: transparent; }
なお、transparent は、透明にするときの値です。
ちなみに上記のCSSは具体例としては、下図のようになります。
下図はホーム画面で、テーマはSimplicityを使っています。
【適用前】↓