このエントリーをはてなブックマークに追加

CSSシグネチャとは?メリットと実用TIPS

CSSシグネチャとは

CSSシグネチャとは、ページのbodyなどにidやclassを設定し、 CSSでページごとのスタイルの切り替えを行う手法です。
シグネチャ(signature)は直訳すると署名、サインの意味です。

最近あまりこの言葉を目にすることがなくなりました(Twitterでは1件もヒットしませんでした・・)が、 便利な手法なので紹介します。

なお、ユーザーがブラウザの「ユーザースタイルシート」を 設定できるようにする手法という意味もあるようですが、 今回は前者について紹介します。

CSSシグネチャの解説

CSSシグネチャを利用すると、トップページとカテゴリページで 一部デザインを変える、ナビゲーションデザインで閲覧中ページが分かるようする、 といったことが、ひとつのCSSで簡単にできます。 xoopsnavi.jpg

メリット

  • ページごとのデザインをひとつのCSSで指定できる
  • ページごとにデザインが変わる要素が、ページ内に複数あっても、HTMLにはbodyにidを書くだけで良い
  • ページごとにデザインが変わる仕組みを、バックエンドで行う必要がない

CSSシグネチャの使い方

HTML

bodyなどにidやclassを設定します。 <!-- トップページ --> <body id="index"> <!-- カテゴリページ --> <body id="category">

CSS

CSSセレクタでスタイルを適用するページを選択します。 /* indexページ */ #index .exsample { font-weight: normal; } /* categoryページ */ #category .exsample { font-weight: bold; }

jQuery

jQueryを利用している場合も、セレクタで適用するページを選択できます。 $(function() { $('#category .exsample').exsample; });

Movable Type

Movable Type のデフォルトテンプレートには、 あらかじめ下記のclassがbodyに設定されています。
  • mt-main-index (インデックステンプレート)
  • mt-entry-archive (ブログ記事テンプレート)
  • mt-page-archive (ウェブページテンプレート)
  • mt-archive-listing (アーカイブテンプレート共通)
  • mt-datebased-monthly-archive (月別テンプレート)
  • mt-category-archive (カテゴリ別テンプレート)
  • mt-search-results (検索結果テンプレート)

XOOPS

XOOPSでも、テンプレート変数を利用して、 bodyにモジュール固有のidを追加することができます。

Dreamweaver

Dreamweaverで、テンプレートを利用する場合も、「属性を編集可能にする」ことで 各ページのbodyの属性を編集できるようになります。

via

WordPressテーマ配布しています

レスポンシブWordPressテーマ LIQUID PRESS

BLOGを購読する

Twitter