特定のテンプレートだけに適用可能な「body class」を設置する
SIRIUSに標準で用意されてるスタイルシート（CSS）は3種類あります。
- 全体的なCSS設定→styles.css
- 基本となる共通CSS→commonstyles.css
- テーブル専用CSS→tables.css
このうちカスタマイズでよく触るのがstyles.cssですね。
ここに設定されたスタイルは原則としてトップページやエントリーページなどすべてのページに共通のスタイル設定となります。
残念ながらページごとの設定はできません。
しかし時にはトップページだけ見栄えをちょっと変えたいとか、エントリーページだけ他のページと若干区別を付けたいなんていう希望が出てくることもあるでしょう。
そんな時はワードプレスでよく使う機能をそのまま真似することでCSSの適用区域を細分化することができます。
その機能がbody class。
追記
レスポンシブ対応テンプレートになってから（ver.1.5～）はスタイルシートが4種類に増えました。
実装方法
このコンテンツ（記事）の機能はカスタムテンプレート【Volar】に搭載済みです。
カスタマイズの際の注意点として、失敗したときには元に戻せるようオリジナルファイルのコピーは必ず作ってください。
不安な方はサイトのバックアップを事前に作成しておくとより安心です。
「テンプレート」→「HTMLテンプレート編集」を開きます。
トップページのHTML編集画面が表示されます。
このうち実際にブラウザに表示される部分は <body>から<body>までの間に書かれたものになります。
この<body>そのものにクラスを付与することで、テンプレートごとにCSSを分けることができるという考えです。
具体的にはコチラ↓の<body>という箇所になります。
・
・
・
</head>
<body>
<div id="container">
当サイトでは以下のように <body> にクラスを割り振って書き換えてあります。
- トップページ→<body class="toppage">
- カテゴリーページ→<body class="catpage">
- エントリーページ→<body class="entrypage">
- サイトマップページ→<body class="sitemappage">
- サイト内検索ページ→<body class="searchpage">
- 404エラーページ→<body class="404notfound">
たとえば『エントリーページ記事本文エリアのフォントサイズだけ標準サイズの1.5倍に変えたい』という希望があったとします。
この場合、実際の記事本文エリアは、HTMLタグでいうとid="text1"～id="text10"内になります。
しかしながら、
#text1, #text2, #text3, #text4, #text5, #text6, #text7, #text8, #text9, #text10 {
font-size:1.5em;
}としてしまうと、すべてのページの本文エリアでフォントサイズが1.5倍になってしまいます。
これを<body class="entrypage"> を使って、
body.entrypage #text1,body.entrypage #text2,body.entrypage #text3,body.entrypage #text4,body.entrypage #text5,body.entrypage #text6,body.entrypage #text7,body.entrypage #text8,body.entrypage #text9,body.entrypage #text10 {
font-size:1.5em;
}と追加してやることで、エントリーページが開かれた時だけフォントサイズが1.5倍になります。
（上書きではなく”追加”です）
ただしこれらはあくまでトップページやカテゴリーページ・エントリーページと言ったSIRIUSの各テンプレートごとに使い分けることのできるワザです。
特定のページだけにスタイルを適用したいというのであれば、『上級者向け設定-スタイル割り込み』を利用します。
inoreader