最終更新日：2005.08.30
webmaster@kototone.jp
こととねは、クリエイティブ・コモンズ・ライセンス（表示 - 継承 2.1 日本）の下でライセンスされています。
web拍手送信完了画面をいろいろカスタマイズしたいという要望はさまざまあるかと思われるが、そうしたカスタマイズを便利にする手段として、スタイルシートの利用を挙げることができるだろう。特にhtmlファイルとスタイルシートを分離する手法――外部スタイルシートを参照する方法はメンテナンス性が高いのでお勧めだ。
今回は、web拍手送信完了画面でスタイルシートを利用したいというリクエストにおこたえして、外部スタイルシートを参照できるように改造してみよう。
私は、外部に置いたCSSファイルを参照するというやり方をずっとやってきて、web拍手においてもそのやり方を踏襲した。CSSファイルの参照は、link要素を用いる一般的に広くおこなわれているものだ。
<link rel="stylesheet" href="example.css" type="text/css">上に紹介したような行を、htmlのhead要素内に書いてやればよい。href属性の値（例ではexample.css）で、CSSファイルがその文書から見てどこにあるかを指定してやるのだが、このあたりのやり方は、画像ファイルを参照するときの要領でやればいいから、特に説明の必要はないだろう。
link要素をhead要素内に書いてやればよいということがわかった。web拍手CGIでhead要素を扱っているのはclapinit.cgiだ。66行目からHTMLヘッダーと書かれたサブルーチンがはじまっている。69行目から77行目にかけてが、今回の改造する場所だ。
#--------------
# HTMLヘッダー
#--------------
sub header{
print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">',"\n";
print '<html lang="ja"><head>',"\n";
print "<title>$title</title>\n";
print "</head>\n";
}clapinit.cgiの66行目から77行目までを取り出してみた。ちなみに私はこれを次のように書き換えた。
#--------------
# HTMLヘッダー
#--------------
sub header{
print "Content-type: text/html\n\n";
print '<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"',"\n";
print "\t",'"http://www.w3.org/TR/html4/strict.dtd">',"\n";
print '<html lang="ja">',"\n",'<head>',"\n";
print '<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">',"\n";
print "<title>$title</title>\n";
print '<meta http-equiv="Content-Style-Type" content="text/css">',"\n";
print '<link rev="made" href="mailto:webmaster@kototone.jp">',"\n";
print '<link rel="start" href="/index.html">',"\n";
print '<link rel="stylesheet" href="',$css_file,'" type="text/css" media="screen, tv, print">',"\n";
print "</head>\n\n";
}外部CSSファイルに関係する行を強調しておいた。なのでこの二行を取り出して書き加えてやるといいだろう。そう、次のようにである。
#--------------
# HTMLヘッダー
#--------------
sub header{
print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">',"\n";
print '<html lang="ja"><head>',"\n";
print "<title>$title</title>\n";
print '<meta http-equiv="Content-Style-Type" content="text/css">',"\n";
print '<link rel="stylesheet" href="',$css_file,'" type="text/css">',"\n";
print "</head>\n";
}上の改造例では実はまだ不完全である。というのは、CSSファイルがどこにあるかを示す部分を指定していないからである。
CSSファイルの場所がどこかを示すのは、link要素のhref属性だった。私はこのhref属性値を直接ここに書かずに変数で指定することにした。$css_fileという文字列を見つけることができると思うが、これがその変数である。
私はこの変数に、clap.cgiとkaiseki.cgiのそれぞれで違う値を代入するようにした。というのは、clap.cgiとkaiseki.cgiで使われるスタイルシートがそれぞれ異なるからである。
# このCGIのファイル名
$base = "./clap.cgi";
$css_file = "cssfile_for_clapcgi.css";# このCGIのファイル名
$base = "kaiseki.cgi";
$css_file = "cssfile_for_kaisekicgi.css";clap.cgiとkaiseki.cgiの14行目で、それぞれ必要なCSSファイルへのパスを指定することにした。この要領は、最初にもいったように、画像ファイルを参照する場合と同じだから、特に問題はないだろう。
< web拍手改造：文字化け要因を解消する その2 web拍手改造：ログ保存期間を変更する 解説編 >