メールフォーム MailForm 1.10

CGI'sトップページ > 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タグについて


各種ボタン・リンクのカスタマイズについて

  • 入力フォームの送信ボタンやエラー表示の戻るボタン、投稿者のメールアドレスリンク・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-->間は記事（ログ）件数分プログラムが複製します。


  • 一般的な構成
    「その他」
    <!--FORM_START-->
    「フォーム部」
    <!--FORM_END-->
    「その他」
    <!--LOG_START-->
    「記事表示部」
    <!--RES_START-->
    「レス記事表示部」
    <!--RES_END-->
    <!--LOG_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