PHP 掲示板 PHP

PHP 掲示板 PHP_BBS 1.01 デザイン変更説明

デザイン変更について

概要
- HTMLやCSSの知識がある場合、スキンファイルを編集することでデザインの変更が可能です。
- スキンファイルは通常の表示を行うファイルとエラー表示を行うファイルの２種類があります。
編集対象スキンファイルの位置と名前
- 通常表示用
  php_bbs/skin/skin.html
- エラー表示用
  php_bbs/skin/error.html
- ※スキンファイルのファイル名や位置は変更しないでください。
文字コードについて
- スキンファイルを読み込むPHPスクリプトはEUCで記述されています。従って、スキンファイルもEUCで編集することを推奨します。
- 配布時のスキンファイル文字コードはEUCです。
- その他文字コード（Shift_JISなど）も受け付けますが、文字化けする場合はEUCをお試しください。
その他文字コード（Shift_JISなど）で編集する場合の注意事項
- 編集時の文字コードがなんであろうと、METAタグの文字コードを指定する場合は、「EUC-JP」を記述してください。
- （例）<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP">
独自タグについて
- スキンファイルにはHTMLコメント形式の独自タグの記述が必要です。
- 独自タグには一定の規則があります。
- 詳しくは「スキンファイルの構成と独自タグ説明」をご覧ください。
HTMLタグについて
- スキンファイルにはFORMタグなど記入必須のHTMLタグがあります。
- 詳しくは「スキンファイルの構成と独自タグ説明」をご覧ください。
各種ボタン・リンクのカスタマイズについて
- 入力フォームの送信ボタンやエラー表示の戻るボタン、投稿者のメールアドレスリンク・WEBページのリンクについて、独自のイメージを適用できます。
- 詳しくは「各種ボタン・リンクのカスタマイズ説明」をご覧ください。
システムスキンの適用について
- 所定の位置にスキンファイルが存在しない場合、システムディフォルトのスキンが適用されます。
- システムディフォルトのスキンファイルは以下の通りです。
  /php_bbs/data/default_skin/skin.html
  /php_bbs/data/default_skin/error.html
その他
- 過去にスキンを扱うCGIやPHPを利用したことがあれば、説明を読まずにスキンファイルのソースを見たほうが早いかもしれません。
- その場合は配布スクリプト内のスキンファイルを見るか、スキンファイル参考例やエラースキンファイル参考例のソースをご覧ください。

スキンファイルの構成と独自タグ説明

■通常表示用スキンファイル（php_bbs/skin/skin.html）の説明

おおまかな構成
通常表示用スキンファイルはおおまかに以下の４種類のブロックで構成されます。

「フォーム部」	投稿フォームを表示します。
「記事表示部」	「レス記事表示部」を内包し、「レス記事表示部」とあわせて投稿された記事を表示します。
「レス記事表示部」	「記事表示部」に内包されていて、「記事表示部」とあわせて投稿された記事を表示します。
「その他」	上記３種に含まれない部分で、自由にHTMLを記述できます。

ブロックタグ（独自タグ）
プログラム側でスキンファイルを前段４種類のブロックに分割して処理するため、以下の６種の独自タグ（ブロックタグ）を定義しています。
各ブロックタグはスキンファイル中に必ず記述してください。
また、記述規則欄に従い記述してください。

ブロックタグ	記述規則	説明
<!--FORM_START-->	<!--FORM_END-->の前に記述。 <!--LOG_START--> と <!--LOG_END-->間 <!--RES_START--> と <!--RES_END-->間に記述してはいけません。	フォーム部の始まりを示します。
<!--FORM_END-->	<!--FORM_START-->の後に記述。 <!--LOG_START--> と <!--LOG_END-->間 <!--RES_START--> と <!--RES_END-->間に記述してはいけません。	フォーム部の終わりを示します。
<!--LOG_START-->	<!--LOG_END-->の前に記述。 <!--FORM_START--> と <!--FORM_END-->間に記述してはいけません。	記事表示部の始まりを示します。 <!--LOG_START-->と<!--LOG_END-->間は記事（ログ）件数分プログラムが複製します。
<!--LOG_END-->	<!--LOG_START-->の後に記述。 <!--FORM_START--> と <!--FORM_END-->間に記述してはいけません。	記事表示部の終わりを示します。 <!--LOG_START-->と<!--LOG_END-->間は記事（ログ）件数分プログラムが複製します。
<!--RES_START-->	<!--RES_END-->の前に記述。 <!--LOG_START--> と <!--LOG_END-->間に記述しなければなりません。	レス記事表示部の始まりを示します。 <!--RES_START-->と<!--RES_END-->間は記事（ログ）件数分プログラムが複製します。
<!--RES_END-->	<!--RES_START-->の後に記述。 <!--LOG_START--> と <!--LOG_END-->間に記述しなければなりません。	レス記事表示部の終わりを示します。 <!--RES_START-->と<!--RES_END-->間は記事（ログ）件数分プログラムが複製します。

一般的な構成

「その他」

「フォーム部」

「その他」

「記事表示部」

「レス記事表示部」


「その他」

要素タグ（独自タグ）
各ブロックには以下の要素タグを記述します。
必ず、記述するブロック欄に示されるブロック内に、記述規則/説明欄に従い記述してください。
必須の欄が「○」になっているタグは必ず記述してください。

記述するブロック	タグ	必須	記述規則/説明
フォーム部	<!--sub_title-->	×	Res投稿・記事編集・記事削除時、それぞれ管理画面で設定した文字列に置き換わります。
	<!--name-->	○	投稿フォームのinputタグのvalue属性の値として記述。各種操作時、投稿者名に置き換わります。
	<!--mail-->	×	投稿フォームのinputタグのvalue属性の値として記述。各種操作時、メールアドレスに置き換わります。
	<!--web-->	×	投稿フォームのinputタグのvalue属性の値として記述。各種操作時、WebURLに置き換わります。
	<!--subject-->	×	投稿フォームのinputタグのvalue属性の値として記述。各種操作時、件名に置き換わります。
	<!--color_set-->	×	管理画面で設定した文字色選択カラーにより、文字色選択のラジオボタンに置き換わります。
	<!--message-->	○	投稿フォームのtextareaタグ間に記述。各種操作時、記事に置き換わります。
	<!--image_input-->	×	管理画面で設定した数量により、イメージ（ファイル）アップロード入力欄に置き換わります。
	<!--password-->	○	投稿フォームのinputタグのvalue属性の値として記述。各種操作時、パスワードに置き換わります。
	<!--button_set-->	○	各種操作に必要なSubmitボタンや戻るボタンに置き換わります。ボタンの名称は管理画面で設定可能です。
	<!--system_comment-->	×	各種操作時に必要と思われる、投稿者への注釈に置き換わります。
	<!--HIDDEN_TAG-->	○	各種操作時にプログラム側で必要とするhiddenタグに置き換わります。
記事表示部	<!--image_float:left-->	×	記事内のテキストに対する画像の位置を指定します。 xxxxに[ left / right / none] のいずれかを記述します。 left = 画像を左側に表示し、テキストを右側に回りこませる。 right = 画像を右側に表示し、テキストを左側に回りこませる。 none = 画像に対してテキストを回り込ませない。本タグを記述しない場合、ディフォルトでleftが適用されます。
	<!--number-->	×	記事番号に置き換わります。
	<!--subject-->	×	記事件名に置き換わります。
	<!--time-->	×	記事投稿時間に置き換わります。
	<!--name-->	○	記事投稿者名に置き換わります。
	<!--mail-->	×	記事投稿者メールアドレスに置き換わります。
	<!--web-->	×	記事投稿者WebURLに置き換わります。
	<!--message-->	○	記事に置き換わります。
	<!--system_link-->	○	記事に対するRes投稿・編集・削除を行うためのリンクに置き換わります。
レス記事表示部	<!--res_number-->	×	Res記事番号に置き換わります。
	<!--res_subject-->	×	Res記事件名に置き換わります。
	<!--res_time-->	×	Res記事投稿時間に置き換わります。
	<!--res_name-->	○	Res記事投稿者名に置き換わります。
	<!--res_mail-->	×	Res記事投稿者メールアドレスに置き換わります。
	<!--res_web-->	×	Res記事投稿者WebURLに置き換わります。
	<!--res_message-->	○	Res記事に置き換わります。
	<!--res_system_link-->	○	Res記事に対する編集・削除を行うためのリンクに置き換わります。
その他	<!--page_unit-->	×	ページ移動用のリンクに置き換わります。
その他	<!--page_unit_width:xxx-->	×	ページ移動用のリンクを表示するtableタグの幅を指定します。xxxに半角数字を記述してください。

HTMLタグ
各ブロックには以下のHTMLタグを記述します。
必ず、記述するブロック欄に示されるブロック内に、記述規則/説明欄に従い記述してください。
必須の欄が「○」になっているタグは必ず記述してください。

記述するブロック	タグ	必須	記述規則/説明
フォーム部	<form>	○	投稿フォームの送信用formタグ。 <!--FORM_START--> 直後に以下のように記述。 <form method="post" action="bbs.php" enctype="multipart/form-data">
	</form>	○	投稿フォームの送信用formタグ。 <!--FORM_END--> 直前に以下のように記述。 </form>
	<input>	○	投稿フォームの投稿者名用inputタグ。 <form>と</form>間に以下のように記述。 <input type="text" name="name" value="<!--name-->" size="15"> ※size等type,name,value属性以外は任意
	<input>	×	投稿フォームの投稿者メールアドレス用inputタグ。 <form>と</form>間に以下のように記述。 <input type="text" name="mail" value="<!--mail-->" size="30"> ※size等type,name,value属性以外は任意
	<input>	×	投稿フォームの投稿者WebURL用inputタグ。 <form>と</form>間に以下のように記述。 <input type="text" name="web" value="<!--web-->" size="30"> ※size等type,name,value属性以外は任意
	<input>	×	投稿フォームの投稿件名用inputタグ。 <form>と</form>間に以下のように記述。 <input type="text" name="subject" value="<!--subject-->" size="20"> ※size等type,name,value属性以外は任意
	<input>	○	投稿フォームの投稿記事用inputタグ。 <form>と</form>間に以下のように記述。 <textarea name="message" cols="30" rows="4"><!--message--></textarea> ※cols,rows等name属性以外は任意
	<input>	×	投稿フォームの投稿イメージ用inputタグ。（独自要素タグ<!--image_input-->を利用しますが、レイアウト上分けて記述したい場合など、通常のHTMLタグでの記述が可能ということです。） <form>と</form>間に以下のように記述。 <input type="file" name="image[]" value="" size="25"> ※size等type,name,value属性以外は任意。 ※最大10個まで記述可能。
	<input>	○	投稿フォームの投稿パスワード用inputタグ。 <form>と</form>間に以下のように記述。 <input type="password" name="password" value="<!--password-->" size="14"> ※size等type,name,value属性以外は任意。
その他	<a></a>	×	管理画面入り口用リンク記述場所はその他ブロック内任意で以下のように記述。 <a href="bbs.php?md=admin">Admin</a>
その他	<a></a>	○	当サイトへのリンク </body>タグ直前に以下のように記述。 <a href="http://www.cgis.biz/">CGI's</a> ※記述場所を変更したり、リンク自体を消去した場合、プログラム側で自動的に付加します。

参考例
以下の配布スキンファイルにアクセスしソースを表示してご覧ください。

スキンファイル

■エラー表示用スキンファイル（php_bbs/skin/error.html）の説明

おおまかな構成
エラー表示用スキンファイルはおおまかに以下の２種類のブロックで構成されます。

「エラー表示部」	エラーを表示します。
「その他」	上記に含まれない部分で、自由にHTMLを記述できます。

ブロックタグ（独自タグ）
ブロックタグはありません。

一般的な構成

「その他」
「エラー表示部」
「その他」

要素タグ（独自タグ）
以下の要素タグを記述します。
必須の欄が「○」になっているタグは必ず記述してください。
記述場所は任意です。

タグ	必須	記述規則/説明
<!--ERROR-->	○	記述場所は任意です。各種エラー文に置き換わります。
<!--err_button-->	○	記述場所は任意です。戻るボタンに置き換わります。ボタンの名称は管理画面で設定可能です。

HTMLタグ
特に規則はありません。

参考例
以下の配布スキンファイルにアクセスしソースを表示してご覧ください。

エラースキンファイル

各種ボタン・リンクのカスタマイズ説明

通常、要素タグ（など）で置き換える各種ボタンやリンク文字について、特定の場所に特定のファイル名で「GIF画像」を配置することで、独自の画像を適用できます。

適用対象は以下をご覧ください。
適用対象図解（適用前）
適用対象図解（適用後）

画像配置場所と画像名

下記構成中のimagesフォルダに配置します。

php_bbs /
├bbs.php
├color.php
├images/
├skin/
│　├skin.html
│　└error.html
│
├data/
│　 ├default_skin/
│　 │　　├skin.html
│　 │　　└error.html
│　 │
│　 ├conf.cgi
│　 ├id.cgi
│　 └log.cgi
│
└readme.html

画像名は下記の通りです。

対象要素	配置場所	画像名
投稿用送信ボタン	php_bbs/images/	btn_new.gif
Res投稿用送信ボタン	同上	btn_res.gif
編集投稿用送信ボタン	同上	btn_edit.gif
削除送信ボタン	同上	btn_del.gif
戻るボタン	同上	btn_back.gif
エラー表示時の戻るボタン	同上	btn_error.gif
記事中の投稿者メールアドレスリンク	同上	mail.gif
記事中の投稿者WebURLリンク	同上	web.gif
記事削除用リンク	同上	del.gif
記事編集用リンク	同上	edit.gif
記事Res用リンク	同上	res.gif