カスタマイズオプション

色以外にも、サイドバーの位置など「ちょっとした表示オプション」を設定するための機能があります。

配色は変更可能なのですから、ちょっとした表示オプションもついでに変更可能になればさらに利便性が向上しそうです。

オプション機能ができた背景

左サイドバーのテーマでは、「設定値を上書き」することで右サイドバーを簡単に実現できる場合が多く、以前は「satsuki-right」や「satsuki-multisidebar」といった具合に import したCSSを置いたテーマを作成していました。

@import url("../satsuki2/satsuki2.css");
.main {
	float:			left;
}
#sidebar {
	float:			right;
}

しかしこれではテーマの種類が無駄に増えてしまいますし、作成する側もわざわざ「それ専用にわざわざテーマフォルダを作る」必要が出てきて煩雑になってしまいます。

これを解決するのがテーマオプション機能です。

テーマオプション機能

オプション機能を使用するには次のように設定します。

/* $option=right-sidebar
.main {
	float:			left;
}
#sidebar {
	float:			right;
}
*/

オプションはコメント内に記述されます。
オプションは「$option=（選択肢名）」と書かれた行からコメント終了（*/）までを1つのオプションとして認識されます。
- つまりオプション中にはコメントが書けず、配色変更の記述もできません。
- コメント終了行から行頭（もしくは「;」か「}」）までは無条件に除去されます。
オプションは選択されたときのみコメント内の設定値が有効になります。

選択肢は複数記述することができます。

/* $option=right-sidebar
.main {
	float:			left;
}
#sidebar {
	float:			right;
}
---------------------- */

/* $option=multi-sidebar
#sidebar {
	float:			none;
	width:			auto;
}
#side-a {
	float:			left;
	width:			160px;
}
#side-b {
	float:			right;
	width:			160px;
}
---------------------- */

オプションのデフォルト値（Ver3.10以降）

オプション項目のいずれか1つをデフォルト値にすることができます。

例えば、元々用意されている背景画像を利用者がカスタマイズ（置き換える）ケースを考えます。

オプションではない素のCSSの部分で背景画像を読み込み、追加のCSSファイルでカスタマイズした背景画像に置き換えることを考えます。この際、元々の画像読み込み設定は生きていますので、元々の画像と新しい画像の両方が常に読み込まれることになります。これは無駄でしかありません。

ですので素CSSでは背景画像を読み込まない設定をすべきですが、反面何も画像を読み込もないならテーマ付属の画像を読み込ませたいところです。このために使用するのがデフォルト値オプションです。「$option?」の後ろに「:default」と記述することで、特に設定されない限りはそのオプションが有効になります。

body {
	background-color:	#ffffff;
}

/* $option:default=bg-image
body {
	background-image:	url('bg.jpg');
}
*/
/* $option=bg-image2
body {
	background-image:	url('bg2.jpg');
}
*/

複数のオプション

「$option2=」「$option3=」といった具合に数字を付加することで複数のオプションを作ることができます。

「option0」や「option00」なども使用できます。
- 文字列として認識されますので「option01」と「option1」は違うものとして扱われますが、紛らわしいうえに将来仕様変更が無いとも言えませんので、同じ数値のものは定義しないでください。

高度な配色可変テーマ