配色可変テーマ

世の中のCMSを見渡すと、同じデザインなのに色違いでいくつもテーマが存在したりしませんか? 以前のadiaryもそうだったのですが、同じデザインなら色はユーザーが変えられたら便利だと思いませんか?

adiaryにはそれを実現するための仕組みが備わっています。

配色可変テーマの作り方

そんなに難しくありません。色を変更したいところに、ちょっとしたマーキングを付けてあげるだけです。

body
{
	background-color:	#fff;			/* $c=fixbg */
	color:			rgba(0, 0, 0, 0.8);	/* $c=fixfont */
	font-size:		12pt;
}
h1
{
	font-size:		20pt;
	font-weight:		normal;
	line-height:		100%;
	border-bottom:		2px solid #6b75b8;	/* $c=border */
}
#footer
{
	border-top:		2px solid #6b75b8;	/* $c=border */
}

コメントに「$c=色名」で設定してあげます。同じ色(を使いたいところ)には同じ色名を付けます。名前に使えるのは「半角英字」のみです。

  • 配色可変にする場合は1行に1色のみです。1つのプロパティに複数の色指定がある場合、行を分けてください。
  • 対応する色形式は「#xxx」と「#xxxxxx」と「rgba()*1」です。rgba()のαチャンネルは変化しません。
  • すべての色を配色可能にする必要はありません。テーマとして色を変えたら使い勝手が増えるだろうというところに設定すれば十分です。
  • 同じ色名のところは、必ず同じ色を使ってください*2。色の書き方が違う分には問題ありません。#ccc と #cccccc は同じ色とみなされます。
  • 逆に、同じ色を使っているからといって同じ色名にする必要はありません。例えば記事背景とwiki背景で同じ色を使ってるけど、ユーザーが別々に設定できるようにしたい場合は色名を分けておきます。
    • 色が多すぎても結局設定が煩雑になるので、あまりわけないほうか良いかもしれません。

細かいルール

  • 「$c=色名」には間に空白を入れないでください。

*1 : Ver3.10以降

*2 : 違う色が使われているとテーマ配色画面でエラー表示するようにしてあります。

複数行プロパティ

button
{
  background-image:linear-gradient(to bottom,	#ddf,	/* $c=btnbg0 */
						#aaf);	/* $c=btnbg1 */
}

横に長くなって見づらくなるので、適当に改行することもできます。

button
{
  background-image:
	linear-gradient(to bottom,
			#ddf,		/* $c=btnbg0 */
			#aaf);		/* $c=btnbg1 */
}

色名の例

色名色名
mainメイン色mainbgメイン背景
art記事btnbgボンタ背景
bg背景border2枠線2
border枠線wikibgwiki記事背景
font文字色combgコメント欄背景
linkリンクfootnotebg注釈背景
ddbgドロップダウンメニュー背景
ddhoverドロップダウンメニュー選択中

こんな感じで命名します。*3

*3 : ここに書いた字句はテーマ配色画面で、適当に翻訳表示されます。

固定色

色名が「fix」で始まる色は、固定色となります。例えば文字色などに指定します。

テーマ配色機能にはHSVにより全体を一括して色変更できる強力な機能がありますが、逆に一括で変更されると困る色というのも存在します。エラーの時の色、フォーム部品の背景色(textarea)。

一括では変更されてたくない、でもユーザーによって変更できるようにもしたい。そういう時に fixfont、fixbg などの色名を使用します。

画像を使う場合のヒント

テーマに色付きの画像を使う場合、どうしても配色可変テーマの妨げとなります。これは避けられない問題ですが*4、うまく処理できることもあります。

白い背景にテーマカラーのアイコンを載せる場合、色付きアイコンの部分を画像にしがちですが、白い部分を画像にして、アイコン色をbackground-colorで指定してサイズを調整してあげれば、CSSで色を変更できるアイコンができます。


通常の透過色では2色までしか対応できませんが、ちょっと難しい技を使うこともできます。色のない(モノクロ単色)pngファイルに0~255段階の透過度を使って絵を描きます。同じようにCSSで設定した背景を透かせることで、色の階調を表現できます。*5

*4 : CSS3のfilterプロパティが普及すればこれも解決するんですけどね……。

*5 : satsuki2-pop/konomi/ テーマの背景で使っている手法です。背景は3色のボーダーになっていますが、背景画像自体は色を持っていません。