画像一枚だけで驚くほどデザインが変わるスタイルシートの利用法

nanotyでは、デザインのテンプレートを簡単に量産できるようにしています。

これがベストかどうかはわかりませんが、デザインに関連するヘッダや各ボックス用のイメージを全て一つの画像に集約し、この画像一枚を変えるだけでもデザインの変更が可能になるように設計しています。

基本デザインがこれ

このデザインに関わる画像は下記の一枚だけ

このようなテンプレート用の画像一枚を差し替えるだけで、こんなデザインに変更が可能

スタイルシートの構成はこんな感じ。

・ベース用CSSファイル（共通）
・テンプレート別CSSファイル

基本的なスタイルを定義したベース用のCSSファイルとテンプレート別のCSSファイルの2つが用意されています。

特にCSSの変更が無ければテンプレート用のCSSには何も定義しません。
微調整したい場合のみ、該当箇所のスタイルの定義を行います。

テンプレート用のCSSが後に読み込む順番となっており、必要な箇所だけ定義を上書きする形で個別に微調整したレイアウトが可能となっています。

これにより、特別な技術やノウハウが無くても容易にテンプレートのデザインが可能です。
現在は、運営スタッフしか変更できませんが、もっと簡単にした上でユーザーが自由にデザインできるようにしていきたい。

昨日から、nanotyのテンプレートを増やしていますので、nanotyでSNSを作成された方はテンプレートをお試し下さい。