2021年8月7日 / 最終更新日時 : 2021年9月9日 beginners5_wp スキンの作成方法

スキンの作り方

スキンの作成手順

スキンを作ると言っても難しく考える必要はありません。
通常のホームページを作るぐらいの軽い気持ちで進めてみてください。
これらの作業にはエディタもしくはメモ帳を使い、作成していきます。

タイトルや背景などを決めて、それらを記述します。
管理画面、検索画面にも使用される共通部の記述です。
画面最上部のタイトル部（表題）を記述します。
見出しやメッセージNo、注意書きなどです。
スレッドの表示部を作成します。
このとき、簡易コマンドを使用すると簡単です。
レスの表示部を作成します。
ここも、簡易コマンドを使用しましょう。
スレッドの終了部を作成します。
全スレッドの終了部を作成します。
入力フォームを記述します。
ここも、入力フォームの項目名や簡易コマンドを使用すると簡単です。
画面最下部の共通部を記述します。
著作権の表示もお願いします。
そのページのHTMLを開き、後述の区切りマークを適切な位置に挿入していきます。

以上の手順でスキンが作れます。
これらは、実際のサンプルスキンを見られたほうが理解しやすいと思います。
また、あなたがスキンをはじめて作られるのなら、【初めてのスキン作り】も参照してください。

スキンの構成

このスキンボードのスキンは、大きく６つの部分に分かれます。
区切りマークはその部分が始まる最初に記述します。
記述内容がない場合は省略できます。

注意）
区切りマークの前後にタグは絶対に記述しないで下さい。
ブラウザのバージョンによっては正常に動作しない場合があります。

区分	区切りマーク	説　　明
base	<!–skin board skin–>	どの画面にも使用する共通部を指定します。主にHEAD句とBODY句の一部を記述します。画面最上部に必ず表示したいものを記述します。管理画面、検索画面などにも使用されます。
head	<!–head–>	ＢＢＳの画面最上部に表示される共通部を指定します。管理画面、検索画面などには表示されません。
form	<!–form–>	入力フォームを指定します。新規入力、レス入力などに使用されます。
main	<!–main–>	スレッドの表示部を指定します。スレッド内で最初に一度だけ表示されます。
msub	<!–msub–>	レスの表示部を指定します。レスがあるたび表示されます。
mend	<!–mend–>	スレッドの終了部を指定します。スレッドが終了したとき表示されます。
foot	<!–foot–>	全スレッドの終了部を指定します。全スレッドが終了したとき一度だけ表示されます。
tail	<!–tail–>	どの画面にも使用する共通部を指定します。主に画面の最下部やBODY句の終了などを記述します。

区切りマークの記述サンプル

通常、以下のどちらかの記述方法を取ります。
どちらで記述しても動作は同じですが、フォームを下に記述した方が、ミスが少なくわかりやすい記述になります。

入力フォームを下に記述	入力フォームを上に記述
<!–skin board skin–>　（区切りマーク） <html> <head>　〜　</head> <body> （全画面共通部） <!–head–>　（区切りマーク）（ｂｂｓの見出し） <!–main–>　（区切りマーク）（スレッドの表示部） <!–msub–>　（区切りマーク）（レスの表示部） <!–mend–>　（区切りマーク）（スレッドの終了部） <!–foot–>　（区切りマーク）（全スレッドの終了部） <!–form–>　（区切りマーク）（入力フォーム用上部） <form> （入力フォーム部） </form> （入力フォーム用下部） <!–tail–>　（区切りマーク）（画面最下行共通部） </body> </html>	<!–skin board skin–>　（区切りマーク） <html> <head>　〜　</head> <body> （全画面共通部） <!–head–>　（区切りマーク）（ｂｂｓの見出し） <!–form–>　（区切りマーク）（入力フォーム用上部） <form> （入力フォーム部） </form> （入力フォーム用下部） <!–main–>　（区切りマーク）（スレッドの表示部） <!–msub–>　（区切りマーク）（レスの表示部） <!–mend–>　（区切りマーク）（スレッドの終了部） <!–foot–>　（区切りマーク）（全スレッドの終了部） <!–tail–>　（区切りマーク）（画面最下行共通部） </body> </html>

入力フォームを下に記述

入力フォームを上に記述

<!–skin board skin–>　（区切りマーク）
<html>
<head>　〜　</head>
<body>
（全画面共通部）

<!–head–>　（区切りマーク）
（ｂｂｓの見出し）

<!–main–>　（区切りマーク）
（スレッドの表示部）

<!–msub–>　（区切りマーク）
（レスの表示部）

<!–mend–>　（区切りマーク）
（スレッドの終了部）

<!–foot–>　（区切りマーク）
（全スレッドの終了部）

<!–form–>　（区切りマーク）
（入力フォーム用上部）
<form>
（入力フォーム部）
</form>
（入力フォーム用下部）

<!–tail–>　（区切りマーク）
（画面最下行共通部）
</body>
</html>

<!–skin board skin–>　（区切りマーク）
<html>
<head>　〜　</head>
<body>
（全画面共通部）

<!–head–>　（区切りマーク）
（ｂｂｓの見出し）

<!–form–>　（区切りマーク）
（入力フォーム用上部）
<form>
（入力フォーム部）
</form>
（入力フォーム用下部）

<!–main–>　（区切りマーク）
（スレッドの表示部）

<!–msub–>　（区切りマーク）
（レスの表示部）

<!–mend–>　（区切りマーク）
（スレッドの終了部）

<!–foot–>　（区切りマーク）
（全スレッドの終了部）

<!–tail–>　（区切りマーク）
（画面最下行共通部）
</body>
</html>

入力フォームの項目名

スキンの入力フォームで使用できる名前は、現在以下に記述するものだけです。
記述例は簡易コマンドも参照してください。

フリー版	name	記述例	説　　明
	msgno	no.#msgno#	親メッセージのメッセージno。
	resno	レスno.#resno#	子メッセージのメッセージno。
	date	date:#date#	投稿メッセージの日時。
	subj	<input size=”60″ type=”text” name=”subj” value=”#subj#”>	投稿メッセージのタイトル。
	comment	<textarea rows=”7″ cols=”60″ name=”comment”> #comment#</textarea>	投稿メッセージのコメント。
	name	<input size=”20″ type=”text” name=”name” value=”#name#”>	投稿者の名前。
	url	<input size=”80″ type=”text”name=”url” value=”#url#”>	投稿者のｕｒｌ（ホームページアドレス）など。
	email	<input size=”40″ type=”text” name=”email” value=”#email#”>	投稿者のe-mailアドレスなど。
	banner	<input size=”80″ type=”text” name=”banner” value=”#banner#”>	画像のｕｒｌ（アドレス）。
	tcolor	（簡易コマンド参照）	テキストの文字色。
	icon	（簡易コマンド参照）	アイコン（画像）のｕｒｌ（アドレス）。
	pwd	<input size=”10″ type=”password” name=”pwd” maxlength=”8″ value=”#pwd#”>	パスワード（入力キー、訂正キー）など。
	brow	<a href=”#brow#”>ブラウザ</a>	投稿者のｏｓ及びブラウザ名。
×	rmhost	ホスト名：#rmhost#	リモートホスト名。
	addr	ipアドレス：#addr#	ipアドレス（リモートip）など。
	cfgnam	<input type=”hidden” name=”cfgnam” value=”#cfgnam#”>	スキンボードの環境ファイル名（フリー版では未使用）将来的な拡張のために記述して置いてください。
	sknnam	<input type=”hidden” name=”sknnam” value=”#sknnam#”>	スキンボードが使用するスキンのファイル名
	act （actionの略）	<input type=”hidden” name=”act” value=”#act#”>	スキンボードの実行処理（act=newinp　新規入力のフォーム表示）（act=newexe　新規入力記事の記録）（act=resinp　レス入力のフォーム表示）（act=resexe　レス入力記事の記録）（act=delinp　記事削除のフォーム表示）（act=delexe　指定記事の削除）（act=mntdsp　管理画面の入室チェック＆表示）（act=repcnt　bbsカウンタの変更）（act=msgdel　指定した記事no以前の記事を削除）（act=alldel　すべての記事を削除しカウンタを０に）（act=oldclr　指定した過去ログをクリア）
	count	<input type=”hidden” name=”count” value=”#count#”>	投稿内容の記事no
	parent	<input type=”hidden” name=”parent” value=”#parent#”>	投稿内容の親記事no
	child	<input type=”hidden” name=”child” value=”#child#”>	記事noを指定して表示する際などの指定記事no

簡易コマンド

スキンを作る際に、定型的な記述を簡易コマンドで記述することができます。
略式コマンドは、ｃｇｉが解析を行い、最も適切なhtmlを自動的に記述してくれます。
このコマンドを使いますと、ミスが少なくなりますし、バージョンアップのときも移行がスムーズに行えます。
このコマンドを使用せずに、htmlで直接記述するという方法もあります。

フリー版	コマンド名	記述例	説　　明
	#zcount#	no.#zcount#	スキンボードのゼロ埋めされた6桁のメッセージカウンタ。
	#count#	no.#count#	スキンボードのゼロ埋めされないメッセージカウンタ。
	#msgno#	no.#msgno#	親メッセージのメッセージno。
	#resno#	レスno.#resno#	子メッセージのメッセージno。
	#date#	date:#date#	投稿メッセージの日時。
	#title#	【#title#】	掲示板の名前（表題）。
	#subj#	タイトル：#subj#	投稿メッセージのタイトル。
	#comment#	コメント：#comment#	投稿メッセージのコメント。
	#name#	お名前：#name#	投稿者の名前。
	#url#	<a href=”#url#”>home</a>	投稿者のｕｒｌ（ホームページアドレス）など。
	#email#	<a href=”mailto:#email#”>email</a>	投稿者のe-mailアドレスなど。
	#banner#	<img src=”#banner#”>	画像のｕｒｌ（アドレス）。
	#tcolor#	<font color=”##tcolor#”> #comment#</font>	テキストの文字色。
	#tcck??????#	<input type=”radio” name=”tcolor” value=”#tcck0000ff#”>	ラジオボタンでテキストの文字色を指定するとき使用する。 #tcck に続く文字を記録する。
	#tcsl??????#	<option value=”#tcsl0000ff#”> 青色</option>	セレクトボタンでテキストの文字色を指定するとき使用する。 #tcsl に続く文字を記録する。
	#icon#	<img src=”#icon#.gif”>	アイコン（画像）のｕｒｌ（アドレス）。
	#icck??????#	<input type=”radio” name=”icon” value=”#icckicon01#”>	ラジオボタンでアイコン（画像）を指定するとき使用する。 #icck に続く文字を記録する。
	#icsl??????#	<option value=”#icsl001#”> アイコン１</option>	セレクトボタンでアイコン（画像）を指定するとき使用する。 #icsl に続く文字を記録する。
	#pwd#	<input size=”10″ type=”password” name=”pwd” maxlength=”8″ value=”#pwd#”>	パスワード（入力キー、訂正キー）など。
	#brow#	<a href=”#brow#”>ブラウザ</a>	投稿者のｏｓ及びブラウザ名。
×	#rmhost#	ホスト名：#rmhost#	リモートホスト名。
	#addr#	ipアドレス：#addr#	ipアドレス（リモートip）など。
×	#homico#	<img src=”#homico#”>	家アイコン（画像）のｕｒｌ（アドレス）。
	#act#	<input type=”hidden” name=”act” value=”#act#”>	スキンボードの実行処理。
	#olddsp#	過去ログ：#olddsp#	過去ログの一覧表を自動作成。（セレクトボタン形式）
	#oldjmp#	過去ログジャンプ：#oldjmp#	過去ログの一覧表を自動作成。（セレクトボタン形式）クリックにて自動ジャンプ。
	#newlog#	<a href=”#newlog#”>新ログ</a>	１つ新しい過去ログへジャンプ。
	#oldlog#	<a href=”#oldlog#”>旧ログ</a>	１つ古い過去ログへジャンプ。
	#msgdsp#	<a href=”#msgdsp#&logext=#logext#”> 最初</a>	そのログの最初のページへジャンプ。後述の#msgdsp#の応用。
	#newpag#	<a href=”#newpag#”>前頁</a>	そのログの１つ新しいページへジャンプ。
	#oldpag#	<a href=”#oldpag#”>次頁</a>	そのログの１つ古いページへジャンプ。
	#topadr#	<a href=”#topadr#”>戻る</a>	指定したページへ自動ジャンプ。
	#msgdsp#	<a href=”#msgdsp#”>全表示</a>	投稿メッセージを通常表示します。
×	#newinp#	<a href=”#newinp#”>新規入力</a>	新規メッセージの入力フォーム画面を表示します。新規入力フォームが別画面の場合に記述します。
	#resinp#	<a href=”#resinp#”>レス</a>	レスメッセージの入力フォーム画面を表示します。
×	#repinp#	<a href=”#repinp#”>訂正</a>	投稿メッセージの訂正画面を表示します。
	#delinp#	<a href=”#delinp#”>削除</a>	投稿メッセージの削除画面を表示します。
×	#srcinp#	<a href=”#srcinp#”>検索</a>	投稿メッセージの検索画面を表示します。
×	#mntchk#	<a href=”#mntchk#”>管理画面</a>	パスワードの入力画面を表示します。管理画面表示のためのパスワードチェック画面を表示します。
	#sbment#	<a href=”#sbment#”>管理画面</a>	管理画面のｕｒｌ（アドレス）。
×	#sbhelp#	<a href=”#sbhelp#”>ヘルプ</a>	ヘルプ画面のｕｒｌ（アドレス）。
×	#order#	<input size=”60″ type=”text” name=”order” value=””>	検索項目を指定する。
×	#sort#	並べ替え：#sort#	並べ替え項目を指定する。
×	#stck??????#	<input type=”radio” name=”sort” value=”#stckname#”>	ラジオボタンで並べ替えを指定するとき使用する。 #stck に続く文字を記録する。
×	#stsl??????#	<option value=”#stslname#”> お名前</option>	セレクトボタンで並べ替えを指定するとき使用する。 #stsl に続く文字を記録する。
×	#accdir#	<a href=”#accdir#/allcnt.cnt”>	総合カウンタ、総合アクセスログを保存するのディレクトリ名。
×	#bbsdir#	<a href=”#bbsdir#/sknbrd.log”>	スキンボードのカウンタやメッセージログを保存するディレクトリ名。
×	#cgidir#	<a href=”#cgidir#/sknbrdf.cgi”>	スキンボードなどがあるcgi用ディレクトリ名。
×	#skndir#	<a href=”#skndir#/sknbrdf.htm”>	スキンを保存しているディレクトリ名。
×	#imgdir#	<img src=”#imgdir#/homeicon.gif”>	画像を保存しているディレクトリ名。
×	#cginam#	<a href=”#cginam#”>	呼出し元ｃｇｉ（スキンボードのｃｇｉ名）。
×	#cfgnam#	<a href=”./sknbrdf.cgi?cfgnam=#cfgnam#”>	スキンボードの環境ファイル名。
×	#lognam#	<a href=”./sknbrdf.cgi?lognam=#lognam#”>	スキンボードで使用するメッセージログ名。

カテゴリー: スキンの作成方法

スキンの作成手順

スキンの構成

区切りマークの記述サンプル

入力フォームの項目名

簡易コマンド

スキンボードの誕生！

初めてのスキン作り