Origin Skin

もっともシンプルな形状のスキンで、 Vicuna のスキンは全てこの Origin スキン を土台に作られています。

コンテンツの領域と背景, メニュー領域と本文領域が色で区切られているスキンを作成する場合に土台として利用すると楽にカスタマイズできます。

画像を一切使っていないので、シンプルなデザインや、ポイントとなる画像をここから付け足していく場合にも、他のスキンよりも比較的楽に進められます。

Smart Canvas Skin

Origin スキンに、コンテンツ領域と背景のボーダー(左右6px)と、メニュー領域と本文領域のボーダー(1px) をつけたしたデザインです。

ボックスにボーダーを付けることで発生するIE6 でのずれを緩衝するための記述が各モジュールに書き足されています。

領域をボーダーで区切ったデザインを作る場合に利用してください。背景が黒ベースのものを作る時も、サブスキンモジュールセット(後述)に Galaxy というのを用意しているので、ここから付け足すと作りやすいと思います。

Ninja Skin

Smart Canvas から左右のボーダーを抜かし、ポイントとなる箇所に画像を使ったデザインです。

メニュー領域と本文領域は、Smart Canvas 同様、1pxのボーダーで区切られており、IE6 での処理が各モジュールに記述されています。

見てもらえばわかるとおり、各エントリーのコメント、トラックバックへのリンクや、メニューの項目、カレンダー、ページ送りリンク部分などに画像が使われています。これらの画像はサブスキン(後述)に定義してあるので、例えば同じ箇所の画像を自分の作ったものや famfamfam icons などを利用する際には、画像ファイルとリンクの変更だけで差し替えることができます。

Flat Skin

他のスキンがコンテンツ領域と背景を色で区切るのを想定して作られているのに対して、Flat Skin では一体となるデザインを作る土台向けに用意しました。

各要素(タグ)の左右の margin (余白) を 0 にしてグリッドを揃えているので、基本、余白だけで各領域を区別するデザインを作る時に向いています。逆に、Flat Skin から領域を色で区別するようなデザインに変更するのはとても難しいので、その場合は他のスキンを選択してください。

色やフォントで選ばない

配色やフォントの種類等は サブスキンという1枚の CSS ファイルにコメントつきで纏めています。 この CSS ファイルは記述量こそ多いですが、全体に関わる定義から優先して記述してあるので、カスタマイズの度合いによっては、数行編集するだけで全体のイメージを変えられます。(後で例を解説します。)

Vicuna のスキンは、一見どれも似通っているのですが、このようにそれぞれに特長があり、構成する CSS ファイルの記述も違いますので、配色やフォント、レイアウトは自由に変更できるものと考えて、最終的にどのようなデザインにしたいかを考え、最も近い特長を持ったスキンを土台として選択してください。

モジュールセット

各スキンには、レイアウトの変更やカレンダー, 上部ナビゲーションを利用した場合に適用する CSS モジュールが複数付属しています。これらの定義は必要な場合にのみ、5-module.css からコメントアウトを解除して読み込む仕組みになっています。

• モジュールの読み込み方法
• 一般的な 5-module.css の例

配色の定義などをまとめたサブスキンは、モジュールの1つとして予め読み込まれた状態で配付しています。 スキンによっては、サブスキンモジュールと、他のモジュールをまとめたサブスキンモジュールセットを配付しており、スキンフォルダ内の module フォルダの差し替えで適用することができます。

つまり、例えば Smart Canvas スキンであっても、その見栄えは同梱してあるデフォルトの module フォルダのサブスキンで定義してあり、スキンの特長はコアとなる CSS ファイルで定義してあるということです。(上記の画像でいうオレンジのCSSファイル)

Smart Canvas には、

の、サブスキンモジュールセットが用意してあるので、利用したい場合は style-smartCanvas/module を、ダウンロードしたサブスキンモジュールセットの module フォルダを入れ替えて使います。

ちなみに、カレンダーやグローバルナビのCSSモジュールを使わない場合は、module/mod_subSkin フォルダの差し替えだけで正常にサブスキンが適用されます。サブスキンによる配色の変更によって、カレンダーやグローバルナビのデザインも変更されることがあり、これらは必要ないときには読み込まれたくないのでこのような仕様になっています。基本、module フォルダの入れ替えでサブスキンを適用してください。

サブスキンの編集

module フォルダ内、 mod_subSkin/1-subSkin.css には、余白や配置以外の、配色やフォント表示の定義がまとめてあります。

• Smart Canvas skin の 1-subSkin.css

この CSS 内の定義は、カスケーディングの流れで最後に位置するので、どんな場合でもそれまでの指定を上書きすることができます。(他のモジュールを利用する場合を除く)

定義は、デザイン上影響力のある箇所 (もっとも出現する要素)から、徐々に局所的な箇所へと順に書かれており、編集する値のほとんどは 16進数の色の定義になっています。 編集するとレイアウトや表示がぶっこわれちゃうようなものはここには書かれてありませんので、CSSがよくわからないという人でも、ここである程度デザインを変更することができます。

定義されていない箇所を編集したい場合は、セレクタ (div#headerとか)が記述されているのならば、プロパティを追加し、定義されていない場合は HTML ファイルを見て新たに定義を追加記述する必要があります。

実際のカスタマイズ手順

Vicuna のスキンをカスタマイズする際の一通りの手順を解説します。

CMS は設置してあるものとして、まずはローカルでスキンの編集を行うことにします。

div#header,
div#content,
div#footer {
	width: 90%; /* (example: 50%~100%, 400px~1000px, 60em, etc. )*/
	min-width: 35em; /* 最小幅 */
	max-width: 70em; /* 最大幅 */
}

/*---------------
 Link Color
-----------------*/

a:link {
	color: #c50976;
}

a:visited {
	color: #b85376;
}

a:hover {
	color: #fd3d9e;
}

/*---------------
 Website Title
-----------------*/

div#header p.siteName {
	font-size: 138.5%;
	font-weight: bold;
}

div#header p.siteName a {
	color: #f00976;
}

div#header p.siteName a:hover {
	color: #ff4aad;
}

div#header {
	background-color: #111;
	border-bottom: 1px solid #eee;
}