このページでは、電光!のテキストフィールドに対する楽しいスタイルシートの書き方を説明します。スタイルシートは電光!に限らず一般的なものなので、このページの内容は電光!に特化したものではありません。
「テキストフィールド」とは、WEBで見られる、
*ややこしい話しですが、「テキストフィールド」という言葉が正式なものかどうかはわかりません(^^;。
電光!には記事を表示するテキストフィールドと、名前を表示するテキストフィールドがあり、それぞれスタイルを適用することによって外観を変えることができます。
さて、始めましょう、、、(唐突ですけど、、(笑。
テキストフィールドは、スタイルシートでスタイルを指定することによって、枠の外観を変更することができます。枠を指定できるスタイルは以下の9種類ですが、ブラウザによって効果に違いがあります(Windows の IE 最新バージョンが万能ということはありません)。
視覚効果
|
スタイルシート(denkoh.cgi に書き込む書式)
|
border-style:solid; | |
border-style:double; | |
border-style:groove; | |
border-style:ridge; | |
border-style:inset; | |
border-style:outset; | |
border-style:dotted; | |
border-style:dashed; | |
border-style:none; 見た目は普通のテキストと同じです。 |
*この他に、inherit(継承)というものもあります。
つまり、“border-style:★”という形で枠線の模様を設定します。
全部黒いと、ウキウキ気分になれません(笑。そこで、、
これらの線や背景に、色を付けましょう。
視覚効果
|
スタイルシート(denkoh.cgi に書き込む書式)
|
border-style:solid; border-color:#ff6699; | |
background-color:#c0c0c0; border-style:double; border-color:#99ff00; | |
background-color:#ffff99; border-style:dotted; border-color:#ff0000; | |
書式には省略形を用いることもできます。例えばこの3番目は、 “background-color: #ff9; border: dotted #ff0000; ” と書くこともできます。 |
“background-color:●”で背景色、“border-color:■”で枠線の色 を指定します。
テキストフィールドには、画像を設定することもできます。これは、電光!の背景画像とは別に設定できます(Macintosh OS9 の IE では対応していません。背景は常に白になります
つまり Mac 対応を考えた場合、文字色に白を指定すると記事が見えなくなります。← 自分でやってハマった(^^;)。
視覚効果
|
スタイルシート(denkoh.cgi に書き込む書式)
書式は省略形を用いています。 |
background: url(form1.jpg) repeat; border: solid #ff6699; | |
background: url(none); border: solid white; | |
background: url(none); border: none; 見た目は普通のテキストですが、文字はテキストフィールドに書かれています。 |
|
1番目の設定で、“form1.jpg”という画像の大きさは 6x16 ですが、“repeat”と記入することによって同じ画像を繰り返し表示させています。
2番目の設定で、url(none)は画像ナシ、つまりテキストフィールドを透過させるということです。 3番目の設定は、“background: url(none)”を指定することによって、テキストフィールドを背景色(この場合は水色)に透過させています。 |
さて次のページでは、これらの設定を電光!に適用してみましょう。
この記事は、ラウンジ・記事ナンバー1058695507より発展しました(ひろさんの書き込みより)。
denkoh.cgi ファイルの変更は、各自で行ってください。