web拍手活用講座　送信後画面をアレンジ

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

web拍手を送信すると、サイト運営者からのお礼も兼ねた確認メッセージが出ます。

ここから一言メッセージなんかも送れるようになっているわけですが、この画面があまりにも殺風景だとメッセージを送ってあげようなんて思わないどころか、また拍手ボタンを押してあげようという気持ちまで薄れてしまいます。

なので、この画面はできる限り凝ったほうが良いでしょう。

登録内容変更画面で2番以降のスキンを指定してあげるだけでもそれなりに派手な画面を作ることができますが、ここではスキン0やスキン1を使った場合で解説していきたいと思います。

ただ、この画面のアレンジはタグ打ちが必須になりますので、「タグって何？」という方はおとなしく2番以降のスキンを使ってください（＾＾；

1、画像を表示させる

一番基本的な所ですが、文章だけのお礼画面よりも画像があるだけでずいぶん華やかになります。

特に、オリジナルの絵を発表しているサイトさんであれば、拍手送信後用に書き下ろした絵があれば閲覧者も喜んでくれると思います。

以下、詳しいやり方です。

・使用する画像を用意する。
・自分のサイトスペースにアップする。
・一度、アップした絵に直接アクセスしてみる。
・正常に表示されたら、ＵＲＬをコピーする。
・web拍手の登録内容画面に入り、以下のタグを打ち込む。（「"」の記号を使わないように注意！）
<img src=【画像のURL】>
・タグ内の【画像のURL】の部分に、先ほどコピーした画像のURLをペーストする。

これで問題なく表示されるはずです。

もし、このやり方で表示されなかった場合、ユーザーさんのサイトを置いているサーバーが外部からの画像の呼び出しを禁止している可能性があります（geocities等）

こうなるともう手の施しようがありません。
サイトを移転するか、諦めましょう（おいおい）

2、左寄せ、右寄せにする

スキン0とスキン1は、デフォルトでは中央揃えに設定されています。
そうなるとデザイン的に色々と制限があると思いますので、左寄せ、右寄せにする方法を解説します。

やり方は簡単です。左寄せ右寄せにしたい部分を

<div align=left>～～</div>　（左寄せの場合）
<div align=right>～～</div>　（右寄せの場合）

で囲むだけです。ちなみに、中央揃えにさせるにはalign=centerと記述すればＯＫです。

また、スキン0に限り、</div>を省くと一言メッセージフォームやさらに送るボタン、広告を左寄せ右寄せにさせることもできます。

3、<body>タグを活用する

メッセージの記入欄の先頭に<body>タグを打ち込むことで、文字の色や背景画像などを一括して変換することができます。

例
<body text=#ff0000>を打ち込むと、一言メッセージフォームの脇のコメントも赤くなります。
<body bgcolor=#000000>を打ち込むと、背景が真っ黒になります。

これを使用すると、拍手送信後画面のタグに<body>タグが2つ入ってしまうという、ＨＴＭＬのルールを完全に無視したソースになってしまいますが、動作には全く問題ないので、あまり気にしないようにしましょう（笑）

4、スタイルシートを活用する

スタイルシートを使うことで、さらに送るボタンのデザインを変えたりもできますが、スタイルシートは非常に奥が深いので、ここでは詳しく解説しません。

自力で調べてがんばってみましょう。

以上のことを色々と盛り込んだサンプルです。
参考にしてみてくださいませ。

以下に、サンプルに使われているタグと、解説を書きます。
このタグをお礼メッセージ入力欄に貼り付けるとサンプルと全く同じ画面になります。
スキンは0番を使っています。

～～～～

<STYLE TYPE=text/css>　・・・スタイルシート宣言

</STYLE>　・・・スタイルシート終了
<BODY bgcolor=#666666 text=#ffffff link=#00ff00 vlink=#00cc00 alink=#ff00ff>　・・・bodyタグで背景色、文字色を指定
<div align=left>　・・・divタグで左寄せ
<font size=6 color=#00ff00>　・・・fontタグで、文字のサイズ、色を指定
左寄せで文字を大きくして緑色にしてみました。<br><br>
</font></div>　・・・divタグ、fontタグ閉じ
<div align=right>　・・・divタグで右寄せ
<img src=http://www.webclap.com/samples/030530c.gif><br>　・・・画像表示
右寄せで、総理バナーを表示してみました。<br>
改行させるには＜br＞タグが必要です。<br><br>
</div>　・・・divタグ閉じ
ここは中央にセンタリングされています。<br>
↓のボタンのデザインも通常と変わっています。

～～～～