web拍手活用講座　拍手ボタンをアレンジ

web拍手活用講座
　　・はじめに
　　・登録版？配布版？
　　・送信後画面をアレンジ
　　・拍手ボタンをアレンジ
　　・押しやすいボタン作り
　　・議論いろいろ

web拍手に登録した後に出てくる拍手ボタン設置用のタグをボタンを設置したいページに貼り付けるといわゆる「標準のweb拍手ボタン」を設置できるわけですが、

↑こんなボタンなので、サイトのデザインに合わないという方ももちろんいると思います。

そこで、このコーナーでは、サイトに設置するweb拍手ボタンのデザインを変更する方法を色々と解説していきたいと思います。

※ボタンのデザインを変更する際の注意点として「web拍手を送信するためのボタンなんだ」ということが、ぱっと見てすぐに分かるようなデザインにするというのがかなり重要かなと思います。

そういったことからも、ボタンのどこかしらに「web拍手」という言葉は明記したほうが良いでしょう。

1、画像を使う

一番簡単かつ基本的な方法です。
ボタンっぽい画像でなくても何でも使えます。
設置の仕方は以下のタグを打ち込めばＯＫです。

<a href="http://webclap.simplecgi.com/clap.php?id=【ユーザーＩＤ】" target="_blank">
<img src="【画像のＵＲＬ】" border="0"></a>

当然ですが、【ユーザーＩＤ】や【画像のＵＲＬ】は適切なものに書き換えましょう。

2、スタイルシートを使う

標準の拍手ボタンも、スタイルシートを使うことでデザインを変更することができます。

タグ的には↓こんな感じです

<form action="http://webclap.simplecgi.com/clap.php?id=【ユーザーＩＤ】" method="post" target="_blank">
<input type="submit" value="web拍手ボタン" style="color:#文字色;background-color:#ボタンの色;border: ボタンの枠の太さ solid #ボタンの枠の色;">
</form>

以下、サンプルです。
タグ内の重要な部分は赤くなっています。

スタイルシートをもっと活用すれば、ボタンを点線で縁取ったり、ボタン内のフォントを弄ったりと、かなり色々なことができるようになります。

また、スタイルシートは<HEAD>タグ内に明記してページ全体のスタイルを一括して指定する方法もありますが、こちらの方がボタンを直接編集することができるので、こちらのやり方を紹介しました。

3、番外編　java scriptで色々やってみる

java scriptを使うことで、さらに色々なことができるようになります。
ただ、java scriptをオフに設定している閲覧者や、java scriptをサポートしていないブラウザを使用している閲覧者には拍手ボタンそのものが機能しないなど、逆に不親切になってしまいます。

実際には少数派ですが、そういった環境の人もいるんだということは頭の片隅に置いておきましょう。

3-1、送信後画面をすっきりさせる

送信後画面用素材のページでも扱っていますが、拍手ボタンを押した後に現れるウィンドウの「戻るボタン」やアドレスバー等を消して、見た目にすっきりしたウィンドウを開くことができます。

タグ的にはこんな感じになります。

<INPUT type="submit" value="web拍手ボタン"onclick="window.open('http://webclap.simplecgi.com/clap.php?id=【ユーザーＩＤ】','webclap','toolbar=no,location=no,directories=no,status=no,scrollbars=yes,resizable=yes');">

java scriptのイベントハンドラという技術を使っているので、前後に<form～></form>タグは必要ありません。

以下のボタンは、web拍手公式サイトへ拍手を送るサンプル用のボタンになっています。
実際に押して、開いた画面を見比べてみましょう。

java scriptを使ってすっきりさせた拍手ボタンです。

下のボタンで開いた画面の方がすっきりしているということが分かると思います。
設置が若干難しいですが、試してみる価値はあるかなと思います。

※java scriptをオフにしている人がこのボタンを押しても、ただボタンがぺこぺこするだけで、何の動作も起きません。

3-2、マウスに反応するボタンにしてみる

同じくイベントハンドラを利用することで、マウスが上に来たときに別の画像になり、マウスを離すと元の画像に戻るといった、マウスに反応するボタンを作る事ができます。

タグは以下のようになります。

<a href="http://webclap.simplecgi.com/clap.php?id=【ユーザーＩＤ】" target="_blank">
<IMG src="基本の画像のＵＲＬ" border="0" onmouseover="this.src='マウスが乗った時の画像のＵＲＬ'" onmouseout="this.src='基本の画像のＵＲＬ'">
</a>

以下、サンプルです。
サンプルなので<a>タグは外しています。
なのでボタンとしては機能していませんが、マウスを乗せたり離したりしてみてください。

この技術の応用で、ボタンを押した時にまた別の画像になったりといったこともできます（やり方は自分で調べましょう）

いかがでしたでしょうか？
これまでに解説してきた技術を使えば、かなりユニークにweb拍手を使いこなすことができるはずです。

「送信後画面をアレンジ」のページと合わせて、是非ともweb拍手を活用してステキなネットライフを送ってくださいませ。

最後に、web拍手は広告収入で運営しています。深い意味は無いけど（笑）