メールフォーム MailForm 1.10
デザイン変更について
概要
- HTMLやCSSの知識がある場合、スキンファイルを編集することでデザインの変更が可能です。
- スキンファイルは通常の表示を行うファイルとエラー表示を行うファイルの2種類があります。
編集対象スキンファイルの位置と名前
- 通常表示用
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)の説明
- おおまかな構成
通常表示用スキンファイルはおおまかに以下の4種類のブロックで構成されます。
「フォーム部」 | 投稿フォームを表示します。 |
---|---|
「記事表示部」 | 「レス記事表示部」を内包し、「レス記事表示部」とあわせて投稿された記事を表示します。 |
「レス記事表示部」 | 「記事表示部」に内包されていて、「記事表示部」とあわせて投稿された記事を表示します。 |
「その他」 | 上記3種に含まれない部分で、自由にHTMLを記述できます。 |
- ブロックタグ(独自タグ)
プログラム側でスキンファイルを前段4種類のブロックに分割して処理するため、以下の6種の独自タグ(ブロックタグ)を定義しています。
各ブロックタグはスキンファイル中に必ず記述してください。
また、記述規則欄に従い記述してください。
ブロックタグ | 記述規則 | 説明 |
---|---|---|
<!--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)の説明
- おおまかな構成
エラー表示用スキンファイルはおおまかに以下の2種類のブロックで構成されます。
「エラー表示部」 | エラーを表示します。 |
---|---|
「その他」 | 上記に含まれない部分で、自由に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 |