CSSによる掲示板改造

掲示板での表題に以下のようにタグを記述します。

type属性（type=text/css)を付けてももちろんいいのですが、ない方が文字数を節約できて便利です。 表題に何か書きたい場合や<table><tr><td>などが入れられます。

属性の値にも""を付けたいところなのですが、編集画面が崩れることが多いので、いいやら悪いやらです。 （いったん未設定に戻すと直るようですが…） PCからなら、崩れた部分のソースを直して保存したローカルファイルから、絶対パスで送信して編集もできます。

外部ファイルの中身はWindowsのアクセサリーの中に入っているメモ帳などのテキストエディターで作成します。 スタイルタグを使って記述する場合は、<style type="test/css">と</style> で挟まれている部分がCSSの中身であり、 <!--と--> で挟むのはCSSに未対応のブラウザがstyleタグを無視してソースをそのまま表示してしまうのを避けるために、 コメントタグで挟むものです。 したがって、<link rel=stylesheet href=URL>として呼び出せば、 当然CSSに対応しているブラウザしか中身を読み込まないので、 <style type="text/css"><!--と--></style> の間にある具体的なCSSの中身だけを記述すればいいことになります。 具体的には

といった風に記述していきます。

このサイトで前使っていたのは以下のような感じです。 iらんどの編集画面と違って、改行やTabキーによる字下げなどができます。

body{
	background-image:url("画像URL");
	background-color:black;
	backgound-position:left;
	background-repeat:no-repeat;
	background-attachment:fixed;
	border:30px ridge navy;
	font-family:"ＭＳ Ｐ明朝";
	scrollbar-arrow-color:white;
	scrollbar-track-color:black;
	scrollbar-face-color:dimgray;
	scrollbar-highlight-color:silver;
	line-height:1.5;
	margin-top:10px;
	margin-right:10px;
	margin-bottom:10px;
	margin-left:50%;
}
hr{
	background-image:url("画像URL");
	width:400px;
	height:95px;
	backgrond-color:black;
	border:10px outset silver
}
a{
	text-decoration:none;
	color:blue;
	font-weight:bold;
	border-width:2px
}
a:hover{
	border:2px silver outset;
	background-color:navy;
	color:snow
}
a:active{
	border:2px silver inset;
	color:red
}

bodyの背景とhrの背景に画像を指定し、その画像には文字入れしてあります。 文字入れはWindows付属のペイントでも簡単にできますが、素材屋さんで配布している画像を使う場合は、 そこの規約に抵触しないようにご注意ください。 body要素にmargin-left:50%を指定することによって、書き込みを右に寄せています。 bodyのborderがIE以外ではmarginの中に入ります。これが正しい実装のようです。 この他にも<link rel=stylesheet href=URL> に続いてidやclass指定したdivタグやtable 要素などを書き込めばいろいろできそうですが…

div要素はNetscapeでは問題があるようです。 どうやら、掲示板の表題のところがcenter要素やb 要素に挟まれて、div要素がブロックレベル要素である上に、入れ子関係も明らかにおかしいので、 挿入したdiv要素は強制的に終わらせられてしまうようです。 body要素に付けたborder の指定が上の方に表示されるのも、この場所にdiv要素などを書いたときに起きるような気がします。 Mozilla系のブラウザは文法に忠実なので、あまり無茶はできない感じです。

でも、table要素だと、一応bodyの直前までtable の中に入れてくれるみたいですので、tableを使った例を作ってみました。 掲示板の表題には、

を記述します。 外部ファイルの中身は次に書くとおりです。 table要素に半透明のフィルタをかけています。 IE独自拡張のfilter:alpha(opacity=60)とMozilla系独自拡張(Netscape6以上対応）の -moz-opacity:0.6（本当はかなり非推奨というか、使ってはいけないとされていますが…汗） の両方を記述することによって、IE4以上、Netscape6以上で同様の効果を出しています。 60のところはパーセント値。0.6のところは0〜1の少数値で指定します。（値が小さいほど透明になる。） -moz-opacityはパーセント値でも可です。 フィルタをかけると、ディスプレイの発色数などによって、見づらくなったりするので、 そういう意味でもあまり推奨ではないんですけどね（汗）

body{
	background-image:url("背景画像URL");
	background-color:black;
	backgound-position:center;
	background-repeat:no-repeat;
	background-attachment:fixed;
	font-family:"ＭＳ Ｐ明朝";
	line-height:1.5;
	scrollbar-arrow-color:white;
	scrollbar-track-color:black;
	scrollbar-face-color:dimgray;
	scrollbar-highlight-color:silver;
}
hr{
	height:5px;
	backgrond-color:black;
	border:3px dotted silver
}
a{
	text-decoration:none;
	color:blue;
	font-weight:bold;
	border-width:2px
}
a:hover{
	border:2px silver outset;
	background-color:navy;
	color:snow
}
a:active{
	border:2px silver inset;
	color:red
}
table{
	background-color:black;
	filter:alpha(opacity=60);
	width:50%;
	-moz-opacity:0.6;
	margin-left:25%;
	margin-right:25%;
	padding:10
}