p
このページは、ホストページ(貼りつけ先のページ)に、「いいねボタンのHTMLとCSSを、最初の一行から書いてみよう！」という企画のチュートリアルです。

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

i
from-zero-h-complete
完成図

p
ユーザーによっては、こちらのほうが、l^put-html-and-css-on-hostpage|直書き貼り付け$よりなじみやすいかもしれません。このチュートリアルを実行する前に、l^button-template-intro|ボタンテンプレート$のセクションを一読しておくことをお勧めします。

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

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

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

p
ここで「ホストページにHTMLとCSSを書き込むのに、なんでボタンテンプレートが必要なの？？」と考える方がいらっしゃるかもしれません。確かにHTMLとCSSはホストページに直接書き込むので、ボタンテンプレート内のl^button-template-html-file|HTMLファイル$とl^button-template-css-file|CSSファイル$は使用いたしません。しかしボタンの設定(アンドゥー機能を有効・無効するなど)はできなければいけないので、l^button-template-config-file|設定ファイル$を提供するボタンテンプレートが必要なのです。

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

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

p
チュートリアル用ボタンテンプレート( k^tpl-sb-from-zero-h$ )を、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-h-notice
「お知らせ」が表示される

ts
「お知らせ」を消す

p
前のステップで「二行貼り付け」を行いましたので、ウエブページ上には、以下のように、<script>タグと<div>タグがあります。

p
b^(1)$ <script src=".............."></script>

p
b^(2)$ <div class="ajax-iine" data-pid="v^my-button$" data-tid="v^tpl-sb-from-zero-h$"></div>

p
以下のように、b^(2)$の<div>と</div>の間に数行の改行をいれて、HTMLコードを書き込める準備をしてください。

code
<div class="ajax-iine" data-pid="my-button" data-tid="tpl-sb-from-zero-h">



</div>
/code

p
これから、b^(2)$の<div>タグの間に、いいねボタンのHTMLコードを書き込んでいくわけですが、現在、<div>タグの間に「お知らせ」がスクリプトによって自動的に挿入される設定になっていますので、<div>タグの間に何を書いても、「お知らせ」に入れ替えられてしまいます。まずはこの挿入を停止しましょう。

p
ボタンテンプレートのl^button-template-config-file|設定ファイル$( k^config.inc.php$ )をテキストエディタで開けて、以下のような、k^$cfg["load-resource"]$を見つけてください。

code
$cfg["load-resource"] = 1;
/code

p
k^$cfg["load-resource"]$に、v^0$ を指定してください。

code
$cfg["load-resource"] = 0;
/code

p
ファイルを保存して、ブラウザの更新ボタンをクリックしてください。「お知らせ」が消えます。これでスクリプトによる「お知らせ」の挿入を停止させることができました。

ts
スタイル隔離用<div>を書き込む

p
さて、これでやっとボタンのHTMLコードを書きだすのかと思いきや、最初に書く込むのはhl^次の二行$です。

code
<div class="ajax-iine" data-pid="my-button" data-tid="tpl-sb-from-zero-h">
	hl^<div class="aiin-css-tpl-sb-from-zero-h">$



	hl^</div>$
</div>
/code

p
k^<div class="aiin-css-tpl-sb-from-zero-h">$は、一体なんなのでしょう!? 謎めいた<div>ですね。
 
p
この<div>は、この中で使用されるCSSスタイルが、他のボタンのCSSと混ざらないようするための、スタイル隔離用<div>です。この<div>に指定されている「v^aiin-css-tpl-sb-from-zero-h$」は、後でCSSを書く際に使用いたしますが、ここでは、以下の r^tpl-sb-from-zero-h$ ( ボタンテンプレートの名前 ) の箇所が同じあることに注目してください。

code
<div class="ajax-iine" data-pid="my-button" data-tid="r^tpl-sb-from-zero-h$">
	<div class="aiin-css-r^tpl-sb-from-zero-h$">



	</div>
</div>
/code

p
スタイル隔離用<div>につけるクラスの一般的な公式は、以下のようになります。

code
<div class="k^aiin-css-(ボタンテンプレートの名前)$">
/code

p
例えば、仮にボタンテンプレートの名前が「v^tpl-12345$」だったら、スタイル隔離用<div>のコードは以下のようになります。

code
<div class="ajax-iine" data-pid="my-button" data-tid="v^tpl-12345$">
	<div class="aiin-css-v^tpl-12345$">



	</div>
</div>
/code

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

p
今度こそ、いいねボタンのHTMLコードを書く準備が整いました。hl^以下の二行$を挿入してください。

code
<div class="ajax-iine" data-pid="my-button" data-tid="tpl-sb-from-zero-h">
	<div class="aiin-css-tpl-sb-from-zero-h">
		hl^<div class="aiin-btn">$


		hl^</div>$
	</div>
</div>
/code

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

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

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

code
<div class="ajax-iine" data-pid="my-button" data-tid="tpl-sb-from-zero-h">
	<div class="aiin-css-tpl-sb-from-zero-h">
		<div class="aiin-btn">
			hl^いいね!$

		</div>
	</div>
</div>
/code

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

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

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

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

code
<div class="ajax-iine" data-pid="my-button" data-tid="tpl-sb-from-zero-h">
	<div class="aiin-css-tpl-sb-from-zero-h">
		<div class="aiin-btn">
			いいね!
			hl^<span class="aiin-vcnt"></span>$
		</div>
	</div>
</div>
/code

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

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

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

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

p
これで、いいねボタンのHTMLコードが完了いたしました。次のステップから、いいねボタンのCSSコードを書いていきます。

ts
<style>のセクションを作る

p
CSSコードをウェブページに書くには、<style>のセクションが必要です。いままで書いてきたボタンHTMLコードの上に、以下のように、hl^<style>のセクション$を作ってください。

code
hl^<style>$

hl^</style>$

<div class="ajax-iine" data-pid="my-button" data-tid="tpl-sb-from-zero-h">
	<div class="aiin-css-tpl-sb-from-zero-h">
		<div class="aiin-btn">
			いいね!
			<span class="aiin-vcnt"></span>
		</div>
	</div>
</div>
/code

p
これから、k^<style>$ と k^</style>$ の間に、CSSコードを書いていきます。

ts
ボタンの色を指定する

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

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

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

p
しかし、k^aiin-btn$　のクラスは、他のいいねボタンでも使われているので、もし他のスタイルのいいねボタンが同じページに存在した場合、このCSSコードは、それらの色に影響を及ぼしてしまう可能性があります。ここで、スタイル隔離用<div>で使用したクラス( k^aiin-css-tpl-sb-from-zero-h$ )の出番です。

p
この k^aiin-css-tpl-sb-from-zero-h$ を k^aiin-btn$ の前におくことで、色の指定が、k^aiin-css-tpl-sb-from-zero-h$ の中にある k^aiin-btn$ だけに適用されます。

code
<style>
.r^aiin-css-tpl-sb-from-zero-h$ .k^aiin-btn$ {
	color:white;
	background-color:blue;
}
</style>

<div class="ajax-iine" data-pid="my-button" data-tid="tpl-sb-from-zero-h">
	<div class="r^aiin-css-tpl-sb-from-zero-h$">
		<div class="k^aiin-btn$">
			いいね!
			<span class="aiin-vcnt"></span>
		</div>
	</div>
</div>
/code

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

code
<style>
k^.aiin-css-tpl-sb-from-zero-h$ ........ {
	....................
	....................
	....................
}
k^.aiin-css-tpl-sb-from-zero-h$ ........ {
	....................
	....................
	....................
}
k^.aiin-css-tpl-sb-from-zero-h$ ........ {
	....................
	....................
	....................
}
</style>
/code

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

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

p
色はきちんと適用されていますが、ボタンが横に長く伸びています。これは「置かれた場所で横に伸びれるだけ伸びる」というdivタグの習性です。これを次のステップで直します。

ts
inline-blockでボタンが伸びるのを防止する

p
ボタンのスタイルに hl^display:inline-block;$ を加えて、ボタンが伸びるのを防ぎます。

code
<style>
.aiin-css-tpl-sb-from-zero-h .aiin-btn {
	hl^display:inline-block;$
	color:white;
	background-color:blue;
}
</style>
/code

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

i
from-zero-h--shrink-by-inline-block
ボタンが伸びるのを防ぐ


p
ボタンの伸びはなくなりました。ここで気になるのは、文字のまわりにまったくスペースがないので窮屈な感じがします。次のステップで隙間を作りましょう。

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

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

code
<style>
.aiin-css-tpl-sb-from-zero-h .aiin-btn {
	display:inline-block;
	hl^padding:10px;$
	color:white;
	background-color:blue;
}
</style>
/code

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

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

p
だいぶボタンらしくなってきました。

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

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

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

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

code
<style>
.aiin-css-tpl-sb-from-zero-h .aiin-btn {
	display:inline-block;
	padding:10px;
	color:white;
	background-color:blue;
	hl^cursor:pointer;$
}
</style>
/code

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

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

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

code
<style>
.aiin-css-tpl-sb-from-zero-h .aiin-btn {
	display:inline-block;
	padding:10px;
	color:white;
	background-color:blue;
	cursor:pointer;
}
hl^.aiin-css-tpl-sb-from-zero-h .aiin-btn.aiin-sel {$

hl^}$
</style>
/code

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

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

code
<style>
.aiin-css-tpl-sb-from-zero-h .aiin-btn {
	display:inline-block;
	padding:10px;
	color:white;
	background-color:blue;
	cursor:pointer;
}
.aiin-css-tpl-sb-from-zero-h .aiin-btn.aiin-sel {
	hl^background-color:green;$
}
</style>
/code

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

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

p
ボタンの全体の修飾はこれで終了です。次に投票数を表示する<span>にCSSを追加します。

ts
投票数を表示する<span>タグにCSSを追加する

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

code
<div class="ajax-iine" data-pid="my-button" data-tid="tpl-sb-from-zero-h">
	<div class="aiin-css-tpl-sb-from-zero-h">
		<div class="aiin-btn">
			いいね!
			r^<span class="aiin-vcnt"></span>$
		</div>
	</div>
</div>
/code

p
r^<span class="aiin-vcnt"></span>$ にCSSを追加するには、hl^以下のようなCSSセレクタ$を追加します。

code
<style>
.aiin-css-tpl-sb-from-zero-h .aiin-btn {
	display:inline-block;
	padding:10px;
	color:white;
	background-color:blue;
	cursor:pointer;
}
.aiin-css-tpl-sb-from-zero-h .aiin-btn.aiin-sel {
	background-color:green;
}
hl^.aiin-css-tpl-sb-from-zero-h .aiin-vcnt {$

hl^}$
</style>
/code

p
このステップでは、投票数が表示できるスペースを前もって確保するために、hl^min-width:20px;$を追加します。<span>タグは、そのままでは幅を指定できないタグですので、hl^display:inline-block;$ も追加します。さらに、投票数を右揃えで表示するために、hl^text-align:right;$ を追加します。

code
<style>
.aiin-css-tpl-sb-from-zero-h .aiin-btn {
	display:inline-block;
	padding:10px;
	color:white;
	background-color:blue;
	cursor:pointer;
}
.aiin-css-tpl-sb-from-zero-h .aiin-btn.aiin-sel {
	background-color:green;
}
.aiin-css-tpl-sb-from-zero-h .aiin-vcnt {
	hl^display:inline-block;$
	hl^min-width:20px;$
	hl^text-align:right;$
}
</style>
/code

br

p
ブラウザを更新して、結果をみてみましょう。投票数の表示幅が確保されました。投票数も右揃えになっています。

i
from-zero-h-reserve-space-in-vcnt
投票数のスペースを確保する

ts
終了です!

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

code
<style>
.aiin-css-tpl-sb-from-zero-h .aiin-btn {
	display:inline-block;
	padding:10px;
	color:white;
	background-color:blue;
	cursor:pointer;
}
.aiin-css-tpl-sb-from-zero-h .aiin-btn.aiin-sel {
	background-color:green;
}
.aiin-css-tpl-sb-from-zero-h .aiin-vcnt {
	display:inline-block;
	min-width:20px;
	text-align:right;
}
</style>

<div class="ajax-iine" data-pid="my-button" data-tid="tpl-sb-from-zero-h">
	<div class="aiin-css-tpl-sb-from-zero-h">
		<div class="aiin-btn">
			いいね!
			<span class="aiin-vcnt"></span>
		</div>
	</div>
</div>
/code

p
極めてシンプルなボタンだったので、まだまだ改善の余地はあると思います。さらにHTMLとCSSを追加して、オリジナリティのあるいいねボタンに仕上げてください!

tpl
std