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 ファイルの記述も違いますので、配色やフォント、レイアウトは自由に変更できるものと考えて、最終的にどのようなデザインにしたいかを考え、最も近い特長を持ったスキンを土台として選択してください。

ローカルでの編集

このように、 Vicuna では、スキンは1つのフォルダにパッケージされ、各 CMS ツールはそれらをインポートする仕組みになっています。

ローカルでスキンを構成する CSS ファイルを編集し、FTP でアップロードして表示を確認するのは大変なので、Vicuna の HTML の構成とほぼ同じ HTML ファイルのセットを使い、ローカルで編集、確認したのち、出来上がったスキンをフォルダごとアップロードする方法をお勧めします。

• Vicunaのスキンをローカルで編集・調整する方法

コア CSS

スキンはコアとなる以下の4つの CSS ファイルから構成されているので、CSS に詳しい人はこれらを直接編集することもできます。

1. 1-element.css (各要素単独のデザイン)
2. 2-class.css (特定の class を持った要素のデザイン)
3. 3-context.css (文脈によって定義されている要素)
4. 4-layout.css (主要レイアウト)

以下はこれらのコア CSS の定義方法なので、編集する方は参考にしてください。

• 分割CSSファイルの構成とそのルール

どのような規模のサイトでも対応できるように、また、僕自身がデザインの追加拡張や新しいスキンを作る際に楽なようにと、定義そのものが階層的に分かれていますので、とっつきにくいかもしれませんが、Vicuna のスキンはどれも同じ構成でほとんど記述順序も一緒なので、定義の構成さえ理解できれば割とスムーズに編集できるようになるかもしれませんし、ならないかもしれません。

Step1

ローカル編集用ファイルをダウンロードします。

• styleTest.zip

上記ファイルをダウンロードし、解凍しておきます。

Step2

このページで解説した内容をふまえ、スキンページから土台用のスキンをダウンロードします。ここでは、Smart Canvas スキンの利用モジュールを Vega サブスキンモジュールセットに切り替えて土台とすることにします。

まず Smart Canvas Skin と Vega Sub skin module set の2つダウンロードして解凍し、Smart Canvas フォルダ内の module フォルダを、Vega を解凍して出てきた module フォルダと入れ替えます。

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;
}

• Vicuna CMS