サンプルファイルの説明     ▽

apeskinを作る場合、普通にHTMLファイルを作るのと少々異なる点があります。
それは、ログ等を表示するために特定の文字列を適切な場所にいれなければならないという点です。
ここでは、同梱の解説用apeskinを用いてそれらを説明していきます。

ここでの解説用apeskinでは、投稿者による削除機能が使えるようデザインしてありますので、オリジナルのapeskinを作る場合に削除機能を使う場合や、配付されているapeskinに削除機能を付加する場合などはこちらを参考にしてください。


apeskin.htmlの解説     ▽

↓ ヘッダ部分の説明

→ Line:007
  <a href="back_url"> 〜 </a>
 

戻りページへのリンクとなります。

必ずこのように記述するようにして下さい。

   
→ Line:009
  <form method="post" action="apeboard_plus.cgi">
 

ここで掲示板上部の各書き込み部分のフォームを指定します。
「action="./apeboard_plus.cgi"」という部分ではあなたが設置した掲示板スクリプトの名前を書いて下さい。
たとえば、hoge.cgiという名前にした場合は「action="./hoge.cgi"」となります。

   
→ Line:010
  <input type="hidden" name="command" value="write">
 

この部分は変更せずに、必ず上の<form>タグの下に書くようにして下さい。

   
→ Line:019
  <input type="text" name="subject" size="30" maxlength="60">
 

書込をする際に題名を入れる部分です。
ここでの「name="subject"」は変更しないようにして下さい。
それ以外の属性は適宜変更して構いません。

   
→ Line:023
  <input type="text" name="name" size="30" maxlength="60">
 

書込をする際に名前を入れる部分です。
ここでの「name="name"」は変更しないようにして下さい。
それ以外の属性は適宜変更して構いません。

   
→ Line:027
  <input type="text" name="mail" size="30" maxlength="60">
 

書込をする際にメールアドレスを入れる部分です。
ここでの「name="mail"」は変更しないようにして下さい。
それ以外の属性は適宜変更して構いません。

   
→ Line:031
  <input type="text" name="url" size="30" maxlength="60">
 

書込をする際に URL を入れる部分です。
ここでの「name="url"」は変更しないようにして下さい。
それ以外の属性は適宜変更して構いません。

   
→ Line:035
  <input type="password" name="pwd" size="10" maxlength="10">
 

書込をする際に削除用のパスワードを入れる部分です。
ここでの「name="pwd"」は変更しないようにして下さい。
それ以外の属性は適宜変更して構いません。

投稿者削除機能を使用しない場合は必要ありません。

   
→ Line:040 - 053
  <select name="icon">
<option value="1" selected>牡羊座 (03/21〜04/20)</option>
<option value="2">牡牛座 (04/21〜05/21)</option>
<option value="3">双子座 (05/22〜06/21)</option>
<option value="4">蟹 座 (06/22〜07/22)</option>
<option value="5">獅子座 (07/23〜08/22)</option>
<option value="6">乙女座 (08/23〜09/23)</option>
<option value="7">天秤座 (09/24〜10/23)</option>
<option value="8">蠍 座 (10/24〜11/22)</option>
<option value="9">射手座 (11/23〜12/21)</option>
<option value="10">山羊座 (12/22〜01/20)</option>
<option value="11">水瓶座 (01/21〜02/18)</option>
<option value="12">魚 座 (02/19〜03/20)</option>
</select>
 

ここではアイコン選択用のプルダウンメニューを指定しています。
必ずプルダウンメニューを使用しなければならないというわけではなく、ラジオボタンでも構いません。
ただし、「name="icon"」は変更しないようにして下さい。

また、value 部分は各画像の拡張子をとったものを記述するようにして下さい。
(例えば用意した画像が hoge1.gif 等の場合は value="hoge1" と記述)

ただし、value="master" は管理者用の画面からレスを書いた際に使用されます のでここでは使用しないことをお勧めいたします。

   
→ Line:058
  <textarea name="message" cols="30" rows="5"></textarea>
 

書込をする際にメッセージを入れる部分です。
ここでの「name="message"」は変更しないようにして下さい。
それ以外の属性は適宜変更して構いません。

   
→ Line:062
  <input type="checkbox" name="use_cookie" value="on" checked>
 

クッキーを使用するかどうかをの選択用のチェックボックスです。
ここでの「name="use_cookie"」と「value="on"」の部分は変更しないようにして下さい。

   
→ Line:067
  </form>
 

Line:010からのフォームを閉じる部分です。

すなわちLine:010からLine:067までが投稿を入力するためのフォーム部分となります。

   
→ Line:068
  <form action="apeboard_plus.cgi" method="post">
 

ここでは、投稿者による削除機能のためのフォームを指定します。
投稿者削除機能を使うためには、ログ部分を <form> タグで囲う必要があります。

もちろん掲示板スクリプトの名前を変更した場合はそれに合わせて、「action="./apeboard_plus.cgi"」の部分を変更して下さい。


→ Line:069
  <!--cut-->
 

区切りを指定します。

ここでは、これより上がヘッダ部分でこれより下がログ部分となります。

   

↓ ログ部分の説明

→ Line:072
  <input type="checkbox" name="target">
 

削除時の選択用チェックボックスです。
必ずこのように記述するようにして下さい。

ヘッダー部の用に「value="on"」などはつけないで下さい。

   
→ Line:073
  idnum<!--s-->
 

記事の投稿番号の表示用文字列です。
この部分に投稿番号が表示されます。

必ずこのように記述するようにして下さい。
「idnum」と「<!--s-->」の間にスペースや改行などが入ってもきちんと動作しなくなります。

   
→ Line:076
  <a href="resinput"> 〜 </a>
 

レス投稿画面へのリンクを指定しています。
<a hreg="resinput">hoge</a>とするとその部分からレス投稿画面 へのリンクが設定されます。
hoge 部分は画像でもテキストでも構いません。

必ずこのように記述するようにして下さい。

   
→ Line:077
  date<!--s-->
 

記事の投稿日時の表示用文字列です。
この部分に投稿された日時が表示されます。

必ずこのように記述するようにして下さい。
「date」と「<!--s-->」の間にスペースや改行などが入ってもきちんと動作しなくなります。

   
→ Line:077
  name<!--s-->
 

投稿者名の表示用文字列です。
この部分に投稿者の名前が表示されます。
初期設定によっては名前にメールアドレスのリンクをはることも出来ます。

必ずこのように記述するようにして下さい。
「name」と「<!--s-->」の間にスペースなどが入ってもきちんと動作しなくなります。

   
→ Line:077
  mail<!--s-->
 

投稿者のメールアドレスの表示用文字列です。
この部分に投稿者のメールアドレスが表示されます。
初期設定によっては画像やテキストにリンクをはることも出来ます。

必ずこのように記述するようにして下さい。
「mail」と「<!--s-->」の間にスペースや改行などが入ってもきちんと動作しなくなります。

   
→ Line:077
  url<!--s-->
 

投稿者の URL の表示用文字列です。
この部分に投稿者のURLが表示されます。
初期設定によっては画像やテキストにリンクをはることも出来ます。

必ずこのように記述するようにして下さい。
「url」と「<!--s-->」の間にスペースなどが入ってもきちんと動作しなくなります。

   
→ Line:080
  icon<!--s-->
 

アイコンの表示用文字列です。
この部分に投稿時に選択されたアイコンが表示されます。

必ずこのように記述するようにして下さい。
「icon」と「<!--s-->」の間にスペースなどが入ってもきちんと動作しなくなります。

   
→ Line:081
  message<!--s-->
 

投稿内容の表示用文字列です。
この部分にメッセージが表示されます。

必ずこのように記述するようにして下さい。
「message」と「<!--s-->」の間にスペースなどが入ってもきちんと動作しなくなります。


→ Line:085
  <!--resstart-->
 

レス表示用のHTMLの始まりを指定します。

これより下がレス(子記事)部分となります。

   

→ Line:092
  ressubject<!--s-->
 

レス記事タイトルの表示用文字列です。
この部分にレス記事のタイトルが表示されます。

必ずこのように記述するようにして下さい。
「ressubject」と「<!--s-->」の間にスペースなどが入ってもきちんと動作しなくなります。

   
→ Line:096
  resdate<!--s-->
 

レス記事投稿日時の表示用文字列です。
この部分にレスが投稿された日時が表示されます。

必ずこのように記述するようにして下さい。
「resdate」と「<!--s-->」の間にスペースなどが入ってもきちんと動作しなくなります。

   
→ Line:096
  resname<!--s-->
 

レス記事投稿者名の表示用文字列です。
この部分にレス記事の投稿者名が表示されます。
初期設定によっては名前にメールアドレスのリンクをはることも出来ます。

必ずこのように記述するようにして下さい。
「resname」と「<!--s-->」の間にスペースなどが入ってもきちんと動作しなくなります。

   
→ Line:096
  resmail<!--s-->
 

レス記事投稿者のメールアドレスの表示用文字列です。
この部分にレス記事の投稿者のメールアドレスが表示されます。
初期設定によっては画像を使用することも出来ます。

必ずこのように記述するようにして下さい。
「resmail」と「<!--s-->」の間にスペースや改行などが入ってもきちんと動作しなくなります。

   
→ Line:096
  resurl<!--s-->
 

レス記事投稿者の URL の表示用文字列です。
この部分にレス記事の投稿者の URL が表示されます。
初期設定によっては画像を使用することも出来ます。

必ずこのように記述するようにして下さい。
「resurl」と「<!--s-->」の間にスペースなどが入ってもきちんと動作しなくなります。

   
→ Line:099
  resicon<!--s-->
 

レス記事のアイコン表示用文字列です。
この部分にレス投稿時に選択されたアイコンが表示されます。

必ずこのように記述するようにして下さい。
「resicon」と「<!--s-->」の間にスペースや改行などが入ってもきちんと動作しなくなります。

   
→ Line:100
  resmessage<!--s-->
 

レス記事の表示用文字列です。
この部分にレスの投稿が表示されます。

必ずこのように記述するようにして下さい。
「resmessage」と「<!--s-->」の間にスペースなどが入ってもきちんと動作しなくなります。


→ Line:107
  <!--resend-->
 

レス表示用のHTMLの終わりを指定します。

Line:085からここまでがレス部分となります。

   

→ Line:108
  <!--cut-->
 

区切りを指定します。

ここでは、これより上がログ部分でこれより下がフッタ部分となります。

   

↓ フッタ部分の説明

→ Line:109
  <input type="hidden" name="command" value="remove">
 

この部分は投稿者削除機能を使う場合は必ずこのままの形で記述するようにしてください。
投稿者削除機能を使用しない場合は記述する必要はありません。

これは必ず、Line:068で書いた <form> を閉じる前に記述する必要があります。

   
→ Line:110
  <input type="password" name="pwd" size="10" maxlength="10">
 

ここではパスワード入力用のテキストラインを指定しています。
size や maxlength は変更しても構いませんが、その他の部分はこのまま記述 するようにして下さい

もちろん、投稿者削除機能を使用しない場合は必要ありません。

   
→ Line:112
  </form>
 

この部分でLine:068で記述した <form> タグを閉じています。
これにより、きちんとログ部分が全て <form> タグで挟まれた事になります。

忘れがちですが、投稿者削除機能を使用する場合は必ず記述して下さい。

   
→ Line:114
  <a href="top"> 〜 </a>
 

最新のログページへのリンクとなります。

必ずこのように記述するようにして下さい。

   
→ Line:114
  <a href="back_url"> 〜 </a>
 

Line:007で出てきたのと同じ、戻りページへのリンクとなります。

必ずこのように記述するようにして下さい。

   
→ Line:114
  <a href="back"> 〜 </a>
 

過去ログページへのリンクとなります。

必ずこのように記述するようにして下さい。

   
→ Line:117
  <a href="http://www.2apes.com" target="_blank">apeboard+ by 2apes.com</a>
 

2apes.comのサイトへのリンクを指定しています。

著作権情報となるのでデザインは問いませんが、必ずリンクをはるようにお願いします。


Page 1 1 1 1