自由レイアウト掲示板説明



説明

 
自由レイアウト掲示板は、テンプレートを編集する事であなたのデザインした掲示板を作成する事が出来ます。
テンプレートを編集するには管理画面の「タイプAデザイン編集」という箇所から入室して下さい。

テンプレートの作成にはHTMLを使用しますので、
ある程度HTMLの知識が必要になります。



テンプレートの作り方
テンプレートは、普通のホームページを作成するときとほぼ同じ記述方法で
作成する事が出来ます。



まず、普通のホームページを作成する様にページの骨組みを作成します。
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>

そして普通のページと違うところはここからです。
テンプレートには、
「ログを表示する部分」というものが必要になります。
つまり、掲示板に投稿された内容を表示する場所です。
これがデザインのメイン部分になるでしょう。



「ログを表示する部分」の作成
ログを表示するには、
<body></body>タグの間で、なおかつ2つの<!--log-->というタグで
囲まれた場所が必要になります。
これは、ログが表示される場所を指定するタグです。
つまり、投稿されたログが複数になればこの<!--log-->
囲まれた部分が繰り返して表示されるわけです。

<html>
<head>
<title></title>
</head>
<body>

<!--log-->
ここに投稿ログが表示される
<!--log-->


</body>
</html>



さらに、<!--log-->で囲われた中に
<!--res-->で囲われた部分を作る事でそこにレス記事を表示させる事が出来ます。

<html>
<head>
<title></title>
</head>
<body>


<!--log-->

<!--res-->
ここにレス記事が挿入される
<!--res-->


<!--log-->

</body>
</html>





下のように記述すると右のように表示されます。
<!--log-->〜<!--log-->の部分が繰り返され、
さらに、<!--res-->〜<!--res-->の部分もレス記事の数に従って繰り返されます。

テンプレートサンプル1 ページ表示結果
<html>
<head>
<title></title>
</head>
<body bgcolor="#ffff99">
<CENTER>

<!--log-->
<BR><BR>
<TABLE width="400" border="1"><TR><TD>
親記事です。
</TD></TR></TABLE>

<!--res-->
<TABLE width="300" border="1"><TR><TD>
レス記事です。
</TD></TR></TABLE>
<!--res-->

<!--log-->

</CENTER>
</body>
</html>



親記事です。
レス記事です。


親記事です。
レス記事です。


親記事です。
レス記事です。
レス記事です。
レス記事です。


テンプレートサンプル2 ページ表示結果
<html>
<head>
<title></title>
</head>
<body bgcolor="#ffff99">
<CENTER>

<!--log-->
<TABLE width="400" border="1"><TR><TD>
親記事です。

<!--res-->
<TABLE width="300" border="1"><TR><TD>
レス記事です。
</TD></TR></TABLE>
<!--res-->

</TD></TR></TABLE>
<BR><BR>
<!--log-->

</CENTER>
</body>
</html>


親記事です。
レス記事です。


親記事です。
レス記事です。


親記事です。
レス記事です。
レス記事です。
レス記事です。
このように、親記事のテーブルの中に<!--res-->を挿入する事で
レス記事は親記事のテーブルの中で繰り返されて表示される事になります。




これで大体の構造は分かっていただけたかと思います。
つぎは、これらに装飾をしていきます。

キーワード
以下のような指定されたキーワードをテンプレートに挿入する事で
掲示板が表示される際に適切な内容に置き換えられます。

ログ表示部分のキーワード
置き換え内容 キーワード
名前 #name#
コメント #comment#
題名 #subject#
日付 #date#
記事番号 #no#
ホスト名 #host#
アイコン #icon#
添付ファイル #upfile#
ポイント獲得コメント #getpoint#
昇進状態 #rank#
新着マーク #new#
記事背景色 body_color
記事文字色 font_color
URLリンク <url_link>〜</url_link>
メールリンク <mail_link>〜</mail_link>
返信フォームへ <res_form>〜</res_form>
引用フォームへ <quote_form>〜</quote_form>
アイコンのURL #iconurl#

※ <url_link  target="_top">〜</url_link>や<res_form style="color:red;">〜</res_form>などのようにする事で
   ターゲットやスタイルシートなどの指定も可能です。



それ以外のキーワード
置き換え内容 キーワード
掲示板タイトル #title#
メッセージ #message#
カウンター・アクセスログ取得 #counter#
返信対象記事NO (※1) #resno#
昇進状態へ <rank_page>〜</rank_page>
携帯アドレス取得へ <imode_url>〜</imode_url>
RSSファイルへのリンク <rss_url>〜</rss_url>
削除・編集へ <del_form>〜</del_form>
管理者画面へ <master_form>〜</master_form>
前のページへ <back_page>〜</back_page>
次のページへ <next_page>〜</next_page>
ページ一覧へ <page_list></page_list>
アイコン一覧へ <icon_page>〜</icon_page>
簡単タグ入力ツール表示リンク <tag_page>〜</tag_page>
タグ入力ツール表示部 #taglist#
添付ファイル説明へ <file_page>〜</file_page>
お絵かき画面へ <paint_form>〜</paint_form>
新規投稿フォームへ <regist_form>〜</regist_form>
検索・過去ログへ (※2) <search_form>〜</search_form>

※1 返信フォームでの「No.194 への返信フォームです。」というメッセージ。
※2 オプション料金が必要

※ <next_page  target="_top">〜</next_page>や<icon_page style="color:red;">〜</icon_page>などのようにする事で
   ターゲットやスタイルシートなどの指定も可能です。


「アイコン(#icon#)」はただアイコンを表示しますが、
「アイコンのURL(#iconurl#)」はアイコンのURL自体を表示します。

これを利用すれば、
記事表示テーブルタグ内に例えば「 style="background-image : url(#iconurl#)"」
のような記述を加えることで、
各投稿の背景画像を選択されたアイコンの画像にすることが出来ます。

つまり表示された掲示板のソースは、例えば
http://www.style-21.com/backpic1111.gif
のURLを選択した記事の場合、
<TABLE width="380" style="background-image : url(http://www.style-21.com/backpic1111.gif)"><TR><TD>
別の記事では
<TABLE width="380" style="background-image : url(http://www.style-21.com/backpic2222.gif)"><TR><TD>
のようになります。

アイコンのURLの代わりに背景画像のURLを設定すれば、
各投稿の表示テーブルの背景画像をそれぞれ選択できるようになります。


使用例:

投稿者:#name# / #rank#
投稿者:21style / 社長(1回)
<FONT color="font_color">こんにちは</FONT>
こんにちは
<res_form>返信</res_form> <quote_form>引用</quote_form>
返信 引用
<mail_link><IMG src="〜.gif" border="0"></mail_link>






投稿フォーム
次は投稿フォームです。
投稿フォームは<FORM>〜</FORM>で囲まれた部分に
以下の入力欄を配置する事で表示されます。

<FORM></FORM>」と間に何も記述しなければデフォルトで
表示されますので、フォームの編集が面倒くさい方は
フォームを挿入したい位置に<FORM></FORM>を挿入して下さい。

フォーム内容 タグ
以下は記述したタグがそのままフォームに反映されます。
  サイズ指定やスタイルシートはタグの最後尾に記述出来ます。
  例:<INPUT type="text" name="name" size="25" style="border:solid 1 blue">
名前 <INPUT type="text" name="name">
URL <INPUT type="text" name="url">
メール <INPUT type="text" name="mail">
題名 <INPUT type="text" name="sub">
コメント <TEXTAREA name="comment">〜</TEXTAREA>
削除キー <INPUT type="password" name="pass">
投稿用パスワード欄 <INPUT type="password" name="writepass">
投稿用コード画像 #writenum#
投稿用コード入力欄 <INPUT type="password" name="writepicpass">
添付ファイル <input type="file" name="upfile">
プレビュー <input type="checkbox" name="preview"  value="on">
クッキー <input type="checkbox" name="cook" value="on">
書き込むためのボタンです。
  「<input type=image src="submit.gif">」のように画像にする事も出来ます。
送信ボタン <input type="submit" value="Submit" onClick="boxcheck()">
以下は設定画面の色指定に従って置き換えられます。
  この通りに記述して下さい。スタイルシートは記述出来ません。
記事背景色 <INPUT type="radio" name="bodycolor">
記事文字色 <INPUT type="radio" name="fontcolor">
以下は設定画面のアイコン指定に従って置き換えられます。
  スタイルシートは「name="icon"」以降に記述出来ます。
  例:<SELECT name="icon" style="background-color:gray"></SELECT>
アイコン <SELECT name="icon"></SELECT>
以下は自由に項目を追加できるキーワードです。
  ※ 詳しくはページの下部をご覧下さい。
自由設定 <SELECT name="select1"></SELECT>


<FORM>
<RIGHT> <BR>
Name:<INPUT type="text" name="name"><BR>
Mail:<INPUT type="text" name="mail"><BR>
URL:<INPUT type="text" name="url"><BR>
Title:<INPUT type="text" name="sub"><BR>
Message:<TEXTAREA name="comment"></TEXTAREA><BR>
添付<input type="file" name="upfile"><BR>
Backcolor:<INPUT type="radio" name="bodycolor"><BR>
Fontcolor:<INPUT type="radio" name="fontcolor"><BR>
Icon:<SELECT name="icon"></SELECT><BR>
<input type=checkbox name=cook value="on">cookie<BR>
<input type=checkbox name=preview  value="on">preview<BR>
DelKey:<INPUT type="password" name="pass"><BR>
<input type=submit value="Submit"><BR>
</RIGHT>
</FORM>
 

Name:
Mail:
URL:
Title:
Message:
添付
Backcolor:
Fontcolor:
Icon:
cookie preview
DelKey:






<SELECT name="select1">
<option value="..男性">男性</option>
</SELECT>
と「select1」という名前で新しい項目を追加することが出来ます。
この項目は「名前」の後ろに付け足して記憶されます。
つまり、select1で「男性」を選択すると、
掲示板での表示は「管理人..男性」と名前の部分が表示されます。

同様に「select2」「select3」「select4」とすることでselect1の後ろに追加できます。







サンプル


以下のソースはタイプAに初期設定されているサンプルのデザインテンプレートです。