p
このページは、「ボタンテンプレートのHTMLとCSSを、最初の一行から書いてみよう！」という企画のチュートリアルです。

p
下の図が、このチュートリアルで作るボタンの完成図です。

i
from-zero-t-complete
完成図

p
このチュートリアルを実行する前に、l^button-template-intro|ボタンテンプレート$のセクションを一読しておくことをお勧めします。

ts
チュートリアル用ボタンテンプレートをダウンロードする

p
まず、下のリンクをクリックして、このチュートリアルで使用するボタンテンプレート( k^tpl-sb-from-zero-t$ )をダウンロードしてください。

p
dl^dlfile?f=download-sb-from-zero-t.zip|ダウンロード ( download-sb-from-zero-t.zip )$

p
ボタンテンプレートをダウンロードした後、お持ちのAjaxいいねボタンに追加してください。ボタンテンプレートの追加の仕方に関しては、「l^add-template|テンプレートの追加$」のページを参照してください。

ts
チュートリアル用ボタンテンプレートを貼り付ける

p
チュートリアル用ボタンテンプレート( k^tpl-sb-from-zero-t$ )を、l^put-two-lines-on-hostpage|二行貼り付け$方式で、ウェブページに貼り付けてください。

p
※ いいねボタンのk^Key$は「v^my-button$」を指定したと仮定します。

i
from-zero-h-enter-key
Keyに"my-button"を入力

p
ホストページ上に、以下のような「お知らせ」が表示されることを確認してください。

i
from-zero-t-notice
「お知らせ」が表示される

p
貼り付けは完璧ですね。それでは、l^button-template-html-file|HTMLファイル$から始めましょう！

ts
HTMLファイルを開く

p
ボタンテンプレートのl^button-template-html-file|HTMLファイル$をテキストエディタで開いてください。HTMLファイルのパスは、b^%root-folder-name%/templates/tpl-sb-from-zero-t/html/tpl.html$ です。

p
HTMLファイル中には前ステップで表示した「お知らせ」のHTMLソースコードがはいっています。全行削除してファイルを空の状態にしてください。これでボタンのHTMLコードを書く準備ができました。

ts
いいねボタンの外枠<div>を書き込む

p
いいねボタンの外枠<div>を書き込みます。hl^以下の二行$をHTMLファイルに書いてください。

code
hl^<div class="aiin-btn">$


hl^</div>$
/code

p
この k^<div class="aiin-btn">$...k^</div>$ がボタンの外枠になります。この<div>タグの中をクリックすると、投票が行なわれます。

ts
「いいね！」を書き込む

p
さて、<div>タグの中に何か入れておかないと、なにも表示されませんので、hl^いいね！$といれておきましょう。

code
<div class="aiin-btn">
	hl^いいね！$

</div>
/code

p
ここで、ブラウザの更新ボタンをクリックしてください。ホストページ上に「いいね！」と表示されます。

i
from-zero-t-display-label
「いいね！」が表示される

ts
投票数表示用のタグを書き込む

p
いいねボタンの中に投票数を表示しましょう。hl^以下の一行$を書き込んでください。

code
<div class="aiin-btn">
	いいね！
	hl^<span class="aiin-vcnt"></span>$
</div>
/code

p
投票数は、k^<span class="aiin-vcnt">$ と k^</span>$ の間に表示されます。

p
ブラウザのホストページを更新してください。以下のように、「いいね！」と投票数が表示されます。

i
from-zero-t-display-label-and-vcnt
「いいね！」と投票数が表示される

p
ボタンをクリックして、投票数が変わるか確認してください。

p
次のステップから、いいねボタンのCSSコードを書いていきます。HTMLファイルは、後で画像を挿入する際、もう一度だけ編集を行います。

ts
CSSファイルを開く

p
ボタンテンプレートのl^button-template-html-file|CSSファイル$をテキストエディタで開いてください。CSSファイルのパスは、b^%root-folder-name%/templates/tpl-sb-from-zero-t/css/tpl.css$ です。

p
もしCSSファイルに中になにかコンテンツがありましたら、全行削除してファイルを空の状態にしてください。これでボタンのCSSコードを書く準備ができました。

ts
ボタンの色を指定する

p
このステップでは、ボタンの色を指定します。文字の色を白、背景色を青にします。k^aiin-btn$ のクラスを持つ<div>が、ボタンのエリアを定義しますので、k^aiin-btn$ をCSSファイルに書き込みます。

p
一見すると、次のようなコードでいいような気がします。

code
.aiin-btn {
	color:white;
	background-color:blue;
}
/code

p
しかし、k^aiin-btn$ のクラスは、他のいいねボタンでも使われているので、もし他のスタイルのいいねボタンが同じページに存在した場合、このCSSコードは、それらの色に影響を及ぼしてしまう可能性があります。そこで次のように書きます。

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

p
突然、出てきたこの k^%css-ctar%$ とは一体なんなのでしょう？

p
この k^%css-ctar%$ はホストページにロードされる時に、このテンプレートに固有な文字列に置換されます。このテンプレートの名前である v^tpl-sb-from-zero-t$ の場合ですと、aiin-css-v^tpl-sb-from-zero-t$ という文字列に置換されます。

p
加えて、HTMLファイルに書いたHTMLコードは、このテンプレートに固有な文字列( v^aiin-css-tpl-sb-from-zero-t$ ) をクラスにもった<div>によって囲まれて、以下のようなコードとして、ホストページにロードされます。（ 以下のr^赤の行$は、自動的にHTMLファイルに挿入されますので、手動で書き込まないでください。）

code
r^<div class="aiin-css-tpl-sb-from-zero-t">$
	<div class="aiin-btn">
		いいね！
		<span class="aiin-vcnt"></span>
	</div>
r^</div>$
/code

p
こうすることによって、CSSファイル内に書いたCSS項目が、このテンプレートのHTMLファイルに書かれたHTMLだけに適用されるようになります。

p
CSSの項目を書く時は、必ず以下のように、k^.%css-ctar%$ で始めてください。これでここに書いたCSSが、他のスタイルのいいねボタンに干渉することを防げます。

code
k^.%css-ctar%$ ........ {
	....................
	....................
	....................
}
k^.%css-ctar%$ ........ {
	....................
	....................
	....................
}
k^.%css-ctar%$ ........ {
	....................
	....................
	....................
}
/code

p
ここで、ホストページを更新して、どのように表示されるか見てみましょう。

i
from-zero-t-color-and-bgcolor
文字色と背景色が適用される

p
色はきちんと適用されていますが、気になるのは、文字のまわりにまったくスペースがないので窮屈な感じがします。次のステップで隙間を作りましょう。

ts
paddingでボタンに隙間を入れる

p
ボタンのスタイルに hl^padding:10px;$ を加えて、文字のまわりに隙間を作ります。

code
.%css-ctar% .aiin-btn {
	hl^padding:10px;$
	color:white;
	background-color:blue;
}
/code

p
ホストページを更新して、結果を見てみます。

i
from-zero-t-padding
「padding:10px;」を追加

ts
ボタン上でマウスカーソルが変わるようにする

p
ボタン上にマウスのカーソルをのせた時に、カーソルがポイント型のアイコンに変わるようにします。

i
from-zero-t-cursor
ポイント型マウスカーソル

p
ポイント型のカーソルを使用するには、hl^cursor:pointer;$ をCSSに追加します。

code
.%css-ctar% .aiin-btn {
	padding:10px;
	color:white;
	background-color:blue;
	hl^cursor:pointer;$
}
/code

p
ホストページを更新して、マウスカーソルが変わるかテストしてみてください。

ts
画像を追加する

p
ボタンにハートマーク( ♥ )の画像を追加します。画像はこのテンプレートフォルダの v^img$ フォルダ内に用意されている v^icon.png$ というファイル名の画像を利用します。HTMLファイルに戻って、hl^以下の一行$を追加してください。

code
<div class="aiin-btn">
	hl^<img class="aiin-icon" src="%url-tpl%img/icon.png">$
	いいね！
	<span class="aiin-vcnt"></span>
</div>
/code

p
新しく挿入した<img>タグのソースURLは、v^%url-tpl%img/icon.png$ です。このURLの中にある k^%url-tpl%$ の部分は、ボタンテンプレートのフォルダの位置を指すURLに、自動的に置換されます。従って、v^%url-tpl%img/icon.png$ は、ボタンテンプレートのフォルダ内の v^img$ フォルダの中にある v^icon.png$ を指し示します。

p
さて、<img>タグには、k^aiin-icon$ というクラスを指定しましたので、k^aiin-icon$ のCSS項目をCSSファイルに書き込みます。

code
.%css-ctar% .aiin-btn {
	padding:10px;
	color:white;
	background-color:blue;
	cursor:pointer;
}
hl^.%css-ctar% .aiin-icon {$

hl^}$
/code

p
新しいCSS項目を追加する時は、k^.%css-ctar%$ で始めることを忘れないでください。

p
ここでは、画像の幅( v^width$ )及び高さ( v^height$ )と、縦方向の揃え位置( v^vertical-align$ )を指定します。

code
.%css-ctar% .aiin-btn {
	padding:10px;
	color:white;
	background-color:blue;
	cursor:pointer;
}
.%css-ctar% .aiin-icon {
	hl^width:20px;$
	hl^height:20px;$
	hl^vertical-align:middle;$
}
/code

p
ブラウザを更新して、結果を見てみます。

i
from-zero-t-icon
画像を追加する

p
ハートマークの画像が表示されました。

ref
参考

p
今回は、k^%url-tpl%$ をHTMLファイル内で使用したわけですが、CSSファイル内でも使用できます。以下の例は、ボタンテンプレート内の v^img$ フォルダの中にある画像( v^bg.jpg$ )を、ボタンの背景に指定します。

code
.%css-ctar% .aiin-btn {
	background:url("%url-tpl%img/bg.jpg");
}
/code

ts
いいねボタンがクリックされた後に背景色が変わるようにする

p
クリックされた後に背景色が変わるようにするためには、k^.aiin-btn.aiin-sel$ のCSS項目を追加します。

code
.%css-ctar% .aiin-btn {
	padding:10px;
	color:white;
	background-color:blue;
	cursor:pointer;
}
.%css-ctar% .aiin-icon {
	width:20px;
	height:20px;
	vertical-align:middle;
}
hl^.%css-ctar% .aiin-btn.aiin-sel {$

hl^}$
/code

p
hl^background-color:green;$ を追加して、クリックされた後に背景色が緑になるようにします。

code
.%css-ctar% .aiin-btn {
	padding:10px;
	color:white;
	background-color:blue;
	cursor:pointer;
}
.%css-ctar% .aiin-icon {
	width:20px;
	height:20px;
	vertical-align:middle;
}
.%css-ctar% .aiin-btn.aiin-sel {
	hl^background-color:green;$
}
/code

p
ページを更新して、いいねボタンをクリックしてみてください。ボタンの背景色が緑に変わります。

i
from-zero-t-voted-state
背景色が変化する

ts
終了です!

p
これでチュートリアルの全ステップが終了いたしました。以下が完成したコードです。

p
b^HTMLファイル ( tpl.html )$

code
<div class="aiin-btn">
	<img class="aiin-icon" src="%url-tpl%img/icon.png">
	いいね！
	<span class="aiin-vcnt"></span>
</div>
/code

p
b^CSSファイル ( tpl.css )$

code
.%css-ctar% .aiin-btn {
	padding:10px;
	color:white;
	background-color:blue;
	cursor:pointer;
}
.%css-ctar% .aiin-icon {
	width:20px;
	height:20px;
	vertical-align:middle;
}
.%css-ctar% .aiin-btn.aiin-sel {
	background-color:green;
}
/code

br

p
最後に二点ほど復習します。

ui
CSSファイルに、新しいCSS項目を追加する時は、k^.%css-ctar%$ で始める。

ui
k^%url-tpl%$ で、ボタンテンプレート・フォルダのURLが挿入できる。

br

p
それでは、さらにHTMLとCSSを追加して、独自のいいねボタンに仕上げてください。お疲れ様でした!

tpl
std