 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
スキンのイメージ
まずは、作成する掲示板のイメージがわからないとスキンも作れません。
ただし、わかりやすくするため、本当のスキンではなくあくまでもイメージをお見せします。
| 【掲示板】 | ||||
|
■ はじめまして．． From:atom 15/07/01 15:20 No.001 スキンをはじめて作ります。 うまくできるかな？ RE:はじめまして．． From:atom 15/07/02 09:10 No.002 このページを見てがんばって作ってみてください。
|
共通部の作成
共通部は、管理画面、検索画面にも使用されます。
作成するのは、タイトル、背景です。
| 【掲示板】 |
| <!--skin
board skin--> <html> <head> <title>#title#</title> </head> <body bgcolor="#cceeff"> |
タイトル部（表題）の作成
表題は、通常表示やレス入力、削除確認画面にも使用されます。
トップ 【掲示板】 全表示 No.001 |
| <!--head--> <center> <a href="#topadr#">トップ</a> #title# <a href="#msgdsp#">全表示</a> No.#count# </center> |
スレッド表示部の作成
スレッド表示部は、投稿記事の最初のメッセージです。
■ （タイトル） From:（名前） （時刻） No.001 （メッセージ） |
| <!--main--> <br> <span style="color : white;background-color : green;"> ■ #subj# From:#name# #date# No.#msgno# </SPAN> <BR> <font color="##tcolor#"> #comment# </font> <br> <hr> |
レス表示部の作成
レス表示部部は、レス記事の為のメッセージです。
レスがあるたびに使用されます。
| （タイトル） From:（名前） （時刻） No.002 （メッセージ） |
| <!--msub--> #subj# From:#name# #date# No.#resno# <BR> <font color="##tcolor#"> #comment# </font> <br> <hr> |
スレッド終了部の作成
スレッド終了部は、そのスレッドが終了したときに表示される部分です。
特になければ指定しなくてかまいません。
この解説では使用しません。
全スレッド終了部の作成
全スレッド終了部は、すべてのスレッドの表示が終了したとき一度だけ表示される部分です。
特になければ指定しなくてかまいません。
この解説では使用しません。
フォーム部の作成
フォーム部は投稿記事の入力部分です。
|
|
| <!--form--> <FORM action="#cginam#" method="POST"> <TABLE> <TBODY> <TR> <TD>お名前：</TD> <TD><INPUT type="text" name="name" value="#name#"></TD> </TR> <TR> <TD>タイトル：</TD> <TD><INPUT type="text" name="subj" value="#subj#"></TD> </TR> <TR> <TD>コメント：</TD> <TD><TEXTAREA name="comment" rows="4" cols="50">#comment#</TEXTAREA></TD> </TR> <TR> <TD>文字色：</TD> <TD> <INPUT type="radio" name="tcolor" value="#tcck0000ff#"><FONT color="#0000ff">■</FONT> <INPUT type="radio" name="tcolor" value="#tcck00ffff#"><FONT color="#00ffff">■</FONT> <INPUT type="radio" name="tcolor" value="#tcckff00ff#"><FONT color="#ff00ff">■</FONT> </TD> </TR> <TR> <TD> </TD> <TD> <INPUT type="submit" name="submit" value="送信"> <INPUT type="reset" name="reset" value="クリア"> </TD> </TR> </TBODY> </TABLE> <INPUT type="hidden" name="cfgnam" value="#cfgnam#"> <INPUT type="hidden" name="sknnam" value="#sknnam#"> <INPUT type="hidden" name="act" value="#act#"> <INPUT type="hidden" name="count" value="#count#"> <INPUT type="hidden" name="resno" value="#resno#"> <INPUT type="hidden" name="parent" value="#parent#"> <INPUT type="hidden" name="child" value="#child#"> </FORM> <HR> |
| cfgnam | スキンボードの環境ファイル名（フリー版では未使用） 将来的な拡張のために記述して置いてください。 |
| sknnam | スキンボードが使用するスキンのファイル名 |
| act （actionの略） |
スキンボードの実行処理 |
| count | 投稿内容の記事No |
| resno | レスの際の記事No |
| parent | 投稿内容の親記事No |
| child | 記事Noを指定して表示する際などの指定記事No |
画面最下部の作成
画面最下部は通常表示やレス入力、削除確認画面にも使用されます。
過去ログジャンプ、管理画面に入るためのパスワード入力、著作権部分を記述します。
|
過去ログジャンプ：#oldjmp#
|
| <!--tail--> <DIV align="center">過去ログジャンプ：#oldjmp#</DIV> <BR> <HR> <TABLE align="right" border="0" cellpadding="0" cellspacing="0"> <TBODY> <TR> <TD nowrap> <FORM action="#cginam#" method="POST"> <INPUT size="10" type="password" name="pwd" maxlength="8" value="#pwd#"> <INPUT type="submit" name="submit" value="管理画面"> <INPUT type="hidden" name="act" value="mntdsp"> </FORM> </TD> </TR> </TBODY> </TABLE> <CENTER> <TABLE border="0" cellpadding="0" cellspacing="0"> <TBODY> <TR> <TD width="140"></TD> <TD> -<A href="//beginners.atompro.net/" style="text-decoration : none; font-weight : bolder;"> skin board </A> - < atom ></TD> <TD></TD> </TR> </TBODY> </TABLE> </CENTER> </body> </html> |
すべてのパーツの結合
今までの記述をエディタもしくはメモ帳を開き、すべて順に記述していきます。
すると次のような画面が作成されます。
| 【#title#】 | ||||
|
■ #subj# From:#name# #date# No.#msgno# #comment# #subj# From:#name# #date# No.#resno# #comment# 過去ログジャンプ：#oldjmp#
|
以上の作業で、スキンが作成できました。
名前を「sknbrdf.htm」にして保存してください。
【サンプル】
上記の方法で作成したサンプルスキン（sknbrdf.htm）
少し手の込んだ標準的なサンプルスキン（sknbrdf0.htm）
今までに登録されたいろんなスキン