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

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

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

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

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

.%css-ctar%　............. {
.....................
.....................
.....................
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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