web拍手改造

外部スタイルシートを参照する

 web拍手送信完了画面をいろいろカスタマイズしたいという要望はさまざまあるかと思われるが、そうしたカスタマイズを便利にする手段として、スタイルシートの利用を挙げることができるだろう。特にhtmlファイルとスタイルシートを分離する手法――外部スタイルシートを参照する方法はメンテナンス性が高いのでお勧めだ。

 今回は、web拍手送信完了画面でスタイルシートを利用したいというリクエストにおこたえして、外部スタイルシートを参照できるように改造してみよう。

私のやったやり方

 私は、外部に置いたCSSファイルを参照するというやり方をずっとやってきて、web拍手においてもそのやり方を踏襲した。CSSファイルの参照は、link要素を用いる一般的に広くおこなわれているものだ。

link要素を使ってCSSファイルを読み込む場合のhtml例
<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行目にかけてが、今回の改造する場所だ。

CGIを改造する

#--------------
# 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&#64;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で使われるスタイルシートがそれぞれ異なるからである。

clap.cgiでの例
# このCGIのファイル名
$base = "./clap.cgi";

$css_file = "cssfile_for_clapcgi.css";
kaiseki.cgiでの例
# このCGIのファイル名
$base = "kaiseki.cgi";

$css_file = "cssfile_for_kaisekicgi.css";

 clap.cgiとkaiseki.cgiの14行目で、それぞれ必要なCSSファイルへのパスを指定することにした。この要領は、最初にもいったように、画像ファイルを参照する場合と同じだから、特に問題はないだろう。


<   >

わたしの愛した機械へ トップページに戻る

公開日:2005.08.30
最終更新日:2005.08.30
webmaster@kototone.jp
Creative Commons License
こととねは、クリエイティブ・コモンズ・ライセンス(表示 - 継承 2.1 日本)の下でライセンスされています。