panel
warning
※ ボタンテンプレートの編集にはHTMLとCSSの基本的な理解が必要です。
-

p
このページではボタンテンプレートのCSSファイル( k^css/tpl.css$ )でよく使われるプレースホルダとセレクタを説明します。

p
ボタンテンプレートのCSSファイルのパスは、b^%root-folder-name%/templates/(テンプレートの名前)/css/tpl.css$ です。このファイルにボタンのCSSコードが記述されています。

t
CSSファイル内で使用されるプレースホルダ

p
ボタンテンプレートのCSSファイル内では、以下の２つのプレースホルダが使われます。

ui
%css-ctar%

ui
%url-tpl%

br

p
以下に一つずつ解説します。

t2
%css-ctar%

p
ボタンテンプレートのCSSファイル内では、どの項目も以下のように、k^.%css-ctar%$ で始まります。

code
.%css-ctar%　............. {
.....................
.....................
.....................
}
/code

p
CSSファイルがホストページにロードされる時に、k^%css-ctar%$ は「v^aiin-css-(テンプレート名)$」に置換されます。例えば、ボタンテンプレートのフォルダ名が「v^tpl-example$」だとすると、k^%css-ctar%$ は「v^aiin-css-tpl-example$」に置換されます。

p
常に k^.%css-ctar%$ で始まる理由ですが、違ったスタイルのいいねボタンが、同じページにロードされた際に、スタイルが混ざらないようするためです。

info
新しいCSS項目を追加する際は、k^.%css-ctar%$ で始めてください。これがない場合、他のいいねボタンのスタイルに干渉してしまうことがあります。

t2
%url-tpl%

p
k^%url-tpl%$は、テンプレートフォルダのURLアドレスに置換されます。おもに画像を指定する際に使われるプレースホルダです。例えば、テンプレートフォルダ内の「b^img$」フォルダに「b^icon.png$」という画像を入れたとします。以下のような行で、この画像を背景として指定できます。

code
background:url("%url-tpl%img/icon.png");
/code

t
スクリプトで参照されるCSSセレクタ

p
CSSファイルにあるCSSの項目は、l^button-template-html-file|HTMLファイル$内あるHTMLダグのスタイルを指定します。通常、CSSセレクタは、CSSファイルとl^button-template-html-file|HTMLファイル$の両方で同じ名前で使う限り、どのような名前でもかまわないわけですが、以下の４つは、スクリプト内でも参照されているので名前を変更することはできません。

ui
.aiin-btn

ui
.aiin-btn.aiin-sel

ui
.aiin-btn.aiin-not-allowed

ui
.aiin-vcnt

br

p
以下に一つずつ説明します。

t2
.aiin-btn

p
ボタン全体を指定するCSSセレクタです。このCSSセレクタを持つHTMLタグ内をクリックした時、投票が行なわれます。

p
【例】以下のコードは、ボタンの背景色を青に指定します。

code
.%css-ctar% .aiin-btn {
	background-color:blue;
}
/code

t2
.aiin-btn.aiin-sel

p
投票済み状態のボタンを指定するCSSセレクタです。

p
【例】以下のコードは、投票済み状態のボタンの背景色を赤に指定します。

code
.%css-ctar% .aiin-btn.aiin-sel {
	background-color:red;
}
/code

t2
.aiin-btn.aiin-not-allowed

p
投票が禁止された状態のボタンを指定するCSSセレクタです。これはl^button-template-config-file|設定ファイル$でアンドゥ機能が無効に設定された状態で投票を行なった時に使用されます。

p
【例】以下のコードでは、マウスカーソルを「クリック不可」のシンボルに変更します。

code
.%css-ctar% .aiin-btn.aiin-not-allowed {
	cursor:not-allowed;
}
/code

t2
.aiin-vcnt

p
投票数が表示されるHTMLタグを指定するCSSセレクタです。

p
【例】以下のコードは、投票数を18pxのフォントサイズで表示します。

code
.%css-ctar% .aiin-vcnt {
	font-size:18px;
}
/code

tpl
std