超初心者のホームページ作成 by atom
プルダウンメニュー左端 トップ はじめに/バナー 新着情報 HP作成 サンプル 関連サイト フリー素材 掲示板 その他 Google 余白 プルダウンメニュー右端

 ■ 初めてのスキン作り 

あなたがはじめてスキンを作成するのなら、例え簡単といえど迷うでしょう。
そこで、もっとも簡単なサンプルを元にスキン作りの解説をして行きたいと思います。
なお、実際の画面を解説の中で表示する事が難しいので表を使ってイメージを表現します。

スキンのイメージ
まずは、作成する掲示板のイメージがわからないとスキンも作れません。
ただし、わかりやすくするため、本当のスキンではなくあくまでもイメージをお見せします。
【掲示板】
トップ 【掲示板】 全表示 No.001

■ はじめまして.. From:atom 15/07/01 15:20 No.001
スキンをはじめて作ります。
うまくできるかな?

RE:はじめまして.. From:atom 15/07/02 09:10 No.002
このページを見てがんばって作ってみてください。


お名前:
タイトル:
コメント:
文字色:
 

過去ログジャンプ:

-skin board- <atom>

↓ただし、実際のスキンはこんな感じになります。
これから作るスキンのサンプル(sknbrdf.htm)

共通部の作成
共通部は、管理画面、検索画面にも使用されます。
作成するのは、タイトル、背景です。
【掲示板】


この記述は、次のようにしてできます。
ただし、HTMLタグ、BODYタグの終了タグだけは、「画面最下部」で記述します。
<!--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#


-skin board- <atom>

この記述は、次のようにしてできます。
<!--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="http://beginners.atompro.net/" style="text-decoration : none; font-weight : bolder;">
skin board
</A>
- &lt;
atom
&gt;</TD>
<TD></TD>
</TR>
</TBODY>
</TABLE>
</CENTER>
</body>
</html>

すべてのパーツの結合
今までの記述をエディタもしくはメモ帳を開き、すべて順に記述していきます。
すると次のような画面が作成されます。
【#title#】
トップ 【#title#】 全表示 No.#msgno#

■ #subj# From:#name# #date# No.#msgno#
#comment#

#subj# From:#name# #date# No.#resno#
#comment#


お名前:
タイトル:
コメント:
文字色:
 


過去ログジャンプ:#oldjmp#


-skin board- <atom>

以上の作業で、スキンが作成できました。
名前を「sknbrdf.htm」にして保存してください。

【サンプル】
上記の方法で作成したサンプルスキン(sknbrdf.htm)
少し手の込んだ標準的なサンプルスキン(sknbrdf0.htm)
今までに登録されたいろんなスキン

もし、うまく動かない、おかしくなる、わからないなどの時は、


Home  ↑ページトップ
page update:2010/01/23 20:32
タオル卸市場
Copyright (c) 2000-2009, All Rights Reserved & Produced by atom
SEO対策 & ツール