2019年12月14日
CSSシグネチャとは？メリットと実用TIPS
CSSシグネチャとは
CSSシグネチャとは、ページのbodyなどにidやclassを設定し、
CSSでページごとのスタイルの切り替えを行う手法です。
シグネチャ（signature）は直訳すると署名、サインの意味です。
最近あまりこの言葉を目にすることがなくなりました（Twitterでは1件もヒットしませんでした・・）が、
便利な手法なので紹介します。
なお、ユーザーがブラウザの「ユーザースタイルシート」を
設定できるようにする手法という意味もあるようですが、
今回は前者について紹介します。
CSSシグネチャの解説
CSSシグネチャを利用すると、トップページとカテゴリページで
一部デザインを変える、ナビゲーションデザインで閲覧中ページが分かるようする、
といったことが、ひとつのCSSで簡単にできます。
メリット
- ページごとのデザインをひとつのCSSで指定できる
- ページごとにデザインが変わる要素が、ページ内に複数あっても、HTMLにはbodyにidを書くだけで良い
- ページごとにデザインが変わる仕組みを、バックエンドで行う必要がない
CSSシグネチャの使い方
HTML
bodyなどにidやclassを設定します。
CSS
CSSセレクタでスタイルを適用するページを選択します。
jQuery
jQueryを利用している場合も、セレクタで適用するページを選択できます。
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
SNSでフォローする
関連記事
