adiary開発マニュアル

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

細かいルール

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

複数行プロパティ

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 */
}

色名の例

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

固定色

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

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

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

画像を使う場合のヒント

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

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

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