特定のテンプレートだけに適用可能なCSS「body class」

Tips_機能の拡張 Tips_プチ裏ワザ Tips_iPhone Tips_その他 購入者特典 購入者専用ページ

特定のテンプレートだけに適用可能なCSS「body class」

サンプル画像

シリウスに標準で用意されてるスタイルシート(CSS)は 3種類あります。

 

全体的なCSS設定→styles.css
基本となる共通CSS→commonstyles.css
テーブル専用CSS→tables.css

 

このうちカスタマイズでよく触るのが styles.css でしょう。

 

ここに設定されたスタイルは原則として
トップページやエントリーページなどすべてのページに共通のスタイル設定となります。

 

ページごとの設定はできません。

 

しかし時にはトップページだけ見栄えをちょっと変えたいとか
エントリーページだけ他のページと若干区別を付けたいという希望が出てくるやもしれません。

 

そんな時はワードプレスでよく使う機能をそのまま真似することで
CSSの適用区域を細分化することができます。

 

その機能とは body class

 

「テンプレート」→「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="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倍になります。
(上書きではなく”追加”ですよ)

 

ただしこれらはあくまでトップページやカテゴリーページ、エントリーページと言った
シリウスの各テンプレートごとに使い分けることのできるワザです。

 

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

 

以上です。

購入ページへ


TOPへ戻る