追記: 2008.01-07. Mono Crystal サブスキンも追加しました。スキンページからダウンロードできます。
以前のエントリーで CSS スキンの構成について解説しましたが、そこでスキンの色彩定義等をまとめたサブスキンというものを作ったと書きました。今回、Ninja スキンをベースに、イメージを大きく変える Boomer というサブスキンを作ったので紹介します。
Ninja スキンはデフォルトではモノクロのやや暗い感じの配色なのですが、サブスキンの入れ替えでイメージを変えやすいように作ってあり、サブスキン第一弾として、Ninja スキン用の Boomer サブスキンを配付しました。
Boomer sub skin
Ninja スキンを適用後、style-ninja/subSkinを、Boomer のsubSkinフォルダと差し替えることで適用されます。
1-subSkin.css で変更した箇所は
- ヘッダーの上のボーダー色
- 背景色・背景画像の変更
- サイドバーのタイトルの背景画像
- サイドバーの項目の背景色
で、ここら辺の変更は、1-subSkin.css 内のコメントを見ながらCSSに明るくない人でも変えられる簡単なものです。 これだけでもだいぶイメージが違うと思います。ちょっとNinja から変えたと言えば、早速 Vicuna アイコン のものをいくつか使って装飾した点で、アイコンの表示例として見ていただけたらと思います。 使われていないアイコンは subSkin/images/ に同梱してあるので、CSSの背景画像のアドレスを変えれば色々なアイコンに変更して遊べるでしょう。
可能なレイアウト
構造的な部分は NInja スキンを継承しているので、Boomer サブスキンでも同じように、コメントアウトでさまざまなレイアウトに対応できます。
- 可能カラムレイアウト
- アイキャッチ画像の読み込み
- 組み合わせ例
2008年は Vicuna CMS でブログはじめちゃいましょう。
- Newer: HTMLは道具
- Older: ライセンスフリーのアイコン配付サイト
