fdiary.cgiのスキン定義ファイルを作る・下
スキン定義ファイルに画像を組み込む場合。
デモのページ内のskinの例について触れてますので、よろしかったら合わせてご覧ください。
タイプ１：背景画像
デモに有る、小花・木の葉は<BODY>タグに背景を組み込んでいます。方法は、直接タグに入れる場合は、
<BODY BACKGROUND="ファイルパス/ファイル名">
です。スタイルシート使用時は
BODY{background-image:url(ファイルパス/ファイル名)}
になります。
尚、デモに有る例は、<TABLE>タグで囲ったり<SPAN>タグに入れたりして文字の背景色を別途設定しておりますが、濃い背景画像の上に直に白い文字を載せる場合などは、背景画像に似た色の背景色を設定しておいた方が、背景画像のダウンロードが完了するまでの間に文字が表示されるので親切だということです。
<BODY BACKGROUND="ファイルパス/ファイル名" BGCOLOR=”背景色” COLOR=”文字色”>
あるいは、
BODY{background-image:url(ファイルパス/ファイル名)”;background-color:背景色;color:文字色}
タイプ２：ページ全体を<TABLE>タグに入れてしまう。
背景画像を一部に使いたい場合、ブラウザのサイズが変わると文字と絵が重なったりしがちなので、絶対に重ならないようにと思ってページ全体を<TABLE>タグに入れて画像はセルの背景として貼り付けてしまったのがピアノ・矢絣・プリンターのデモのレイアウトです。
つい最近知ったのですが、<TABLE>タグに入れた場合、テーブル内の全ての要素がダウンロードされるまで表示されず、重たいページの場合は真っ白な画面をしばらく見つめていなければならないことにストレスを感じる場合があるそうです。軽いページでないとこのレイアウトはNGということに成りそうですね。
で、やり方なのですが、全体の<TABLE>枠のWIDTHを100％にすること。縦に長いセルはHEIGHTを100％に、幅は使いたい画像によってピクセル数で指定することです。
<BODY STYLE="margin:0px">
<TABLE CELLSPACING="0" CELLPADDING="0" HEIGHT="100%" WIDTH="100%"><TR>
<!-左の画像の大きなセル-->
<TD BACKGROUND="ファイルパス/ファイル名" WIDTH="P"></TD>
<!-画像の右側の大きなセル--><TD STYLE="padding:4mm">
…記事…
</TD></TR></TABLE>
</BODY>
タイプ３：横に画像を繋げて記事間のセパレータとして使用
タイプ４：記事全体を３×３マスで囲んで額縁のように飾る
記事の内部も含めてまわりにも画像を指定したい場合、３×３マスのテーブルにそれぞれの背景を指定します。画像5が無くて背景色の指定のみの場合も有ります。
<TABLE CELLSPACING="0" CELLPADDING="0" ALIGN="center" STYLE="line-height:150%"><TR>
<TD BACKGROUND="ファイルパス/画像1ファイル名" WIDTH="P1" HEIGHT="P2"></TD>
<TD BACKGROUND="ファイルパス/画像2ファイル名"></TD>
<TD BACKGROUND="ファイルパス/画像3ファイル名" WIDTH="P3"></TD>
</TR><TR>
<TD BACKGROUND="ファイルパス/画像4ファイル名"></TD>
<TD BACKGROUND="ファイルパス/画像5ファイル名" VALIGN="top">
…記事…
</TD>
<TD BACKGROUND="ファイルパス/画像6ファイル名"></TD>
</TR><TR>
<TD BACKGROUND="ファイルパス/画像7ファイル名" HEIGHT="P4"></TD>
<TD BACKGROUND="ファイルパス/画像8ファイル名"></TD>
<TD BACKGROUND="ファイルパス/画像9ファイル名"></TD>
</TR></TABLE><BR><BR>
記事のセルの高さ・幅をピクセル値で固定すれば、更に凝ったデザインも可能になるでしょう。ただし、この場合は記事当りの文字数をある程度一定にする必要が有ります。IE4以上で
<DIV STYLE="overflow:auto;width:画像の幅;height:画像の高さ">
…記事…
</DIV>
とすれば文字があふれた時はスクロールバーが出ます。
<TABLE CELLSPACING="0" CELLPADDING="0" ALIGN="center" STYLE="line-height:150%" WIDTH="P1+P5+P3"><TR>
<TD BACKGROUND="ファイルパス/画像1ファイル名" WIDTH="P1" HEIGHT="P2"></TD>
<TD BACKGROUND="ファイルパス/画像2ファイル名" WIDTH="P5"></TD>
<TD BACKGROUND="ファイルパス/画像3ファイル名" WIDTH="P3"></TD>
</TR><TR>
<TD BACKGROUND="ファイルパス/画像4ファイル名" HEIGHT="P6"></TD>
<TD BGCOLOR="ファイルパス/画像5ファイル名" VALIGN="top">
<DIV STYLE="overflow:auto;width:P5;height:P6">
…記事…
</DIV>
</TD>
<TD BACKGROUND="ファイルパス/画像6ファイル名"></TD>
</TR><TR>
<TD BACKGROUND="ファイルパス/画像7ファイル名" HEIGHT="P4"></TD>
<TD BACKGROUND="ファイルパス/画像8ファイル名"></TD>
<TD BACKGROUND="ファイルパス/画像9ファイル名"></TD>
</TR></TABLE><BR><BR>
記事の幅・高さを固定したい場合のスキン
スキンの適用デモ
とまての日記は長さがいろいろなので、あふれたり余ったりですね(笑)。
2003.07.18
更に、記事と記事の境目に繰り返し画像をセパレータとして使用する際は、テーブルのセルをHEIGHTはピクセル値で適宜指定、幅を100％として背景画像と指定しています。