※モバイル機器のみ有効→PC表示に切替 モバイル表示に切替

SIRIUSで特定のテンプレートだけに適用可能な「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の各テンプレートごとに使い分けることのできるワザです。

 

特定のページだけにスタイルを適用したいというのであれば、『上級者向け設定-スタイル割り込み』を利用します。

SIRIUSカスタムテンプレート【Volar】

キャプチャ画像

SIRIUS ver.1.5で大幅刷新された新テンプレートを元に、独自のカスタマイズを加えた改良型SIRIUSカスタムテンプレートが【Volar】です。

入手方法についてはコチラ↓をご覧ください

 この記事をシェア 
キャプチャ画像