2006年4月26日(水)

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

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

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

基本デザインがこれ

d-1.gif
このデザインに関わる画像は下記の一枚だけ



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

d-2.gif
d-3.gif
d-4.gif
スタイルシートの構成はこんな感じ。

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

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

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

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

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

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



カテゴリー: Web Design   パーマリンク

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

  1. りくと より:

    実は、nanotyにアクセスして最初にやったのはスタイルシート解析だったりします^^; この画像差し替えって、運営側にとっても、スキン作成(?)側にとっても便利ですよね。
    たまーに、表示が崩れてたりするのを見ますが^^;
    環境に依存する不安定なものなんでしょうか?

  2. hatto より:

    >たまーに、表示が崩れてたりするのを見ますが^^;
    どんな時?
    ブラウザによってはまだ未対応のもの(オペラやネスケ、macのIE)もありますが、他はだいたいいけてるような。
    おかしいときは教えてね。

  3. りくと より:

    それが、崩れてるなーと思って、次の日見たら崩れてなかったりしたので、わからないんですよ。今も見てみましたが、崩れてる様子なく。もしかすると、最初の頃だけなのかもしれません。
    枠線がずれてるやつがあったんですよ。
    また見つけたら報告しますね。

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <img localsrc="" alt="">