スタッフ情報CMS
自社デザインにCMSを組み込む

※初めてCMSをご利用になられる場合
初めて当サイトのCMSをご利用になられる場合、必ず試用版を使ってご自身の環境でCMSが動作するか事前に確認しておいて下さい。

※上級者向けの解説です。
htmlやcssを把握されているお客様向けの解説になります。スタイルはレイアウトが崩れない為の必要最低限の設定しか入っていませんので、ご自身での調整が必要となります。

下準備

土台のファイルの準備

土台にしたいデザインファイルを複製し、そちらでテストしていきます。
今回はtemplate partyさんのtp_school4_navyに組み込む解説をさせて頂きます。

土台ファイルを整理

とりあえず、CMSの土台とする為にindex.htmlだけを残し、他のhtmlは削除しておきます。
（※必要に応じて元ファイル全体のバックアップをとっておいて下さい。）

続いてindex.htmlのファイル名をindex2.htmlに変更します。

CMS専用のcssをダウンロード

tp-style.cssのダウンロード

tp-style.cssをダウンロード＆解凍し、任意の場所に移動。
index2.htmlにこのcssの読み込みタグを追加します。
以下は、tp-style.cssをcssフォルダに入れた場合の例です。

試用版からファイルを移動

試用版から以下ファイル・フォルダを持ってきます。
既に当サイトのCMSで運営中の場合は、サーバーからDLしてきたものを使って下さい。

• data（フォルダ）
• k_cms（フォルダ）※ガラケーからアクセスする為のファイルです。不要なら削除して下さい。
• user_data（フォルダ）
• index.php（ファイル）
• setup.php（ファイル）

CMS用の設定

リンク先の変更

index2.htmlを開き、リンク先を試用版に合わせて変更します。
既に当サイトのCMSで運営中の場合は、ご自身の環境に応じて変更して下さい。
スケジュールページのレイアウトは２通りありますので、お好みの方をご利用下さい。

<a href="./">ホーム</a>
<a href="index.php?act=cast">キャスト</a>
<a href="index.php?act=schedule">スケジュール(タイプ１)</a>
<a href="index.php?act=schedule2">スケジュール(タイプ２)</a>

トップページ用のタグを記載

index2.htmlのメインコンテンツに、以下のコードをコピペして下さい。
「New Face」と「本日早番キャスト・本日遅番キャスト」と「お知らせ」ブロック用のタグになります。
<div id="tp-main"> <section> <h2>New Face</h2> <div class="tp-list2-container"> <!--{each newface}--> <div class="tp-list2-compact"> <!--{def newface/image1}--><figure><a href="index.php?act=staff&id={val newface/info_id}"><img src="user_data/{val newface/image1_file}" alt="{val newface/title}"></a></figure><!--{/def}--> <div> <h4> <a href="index.php?act=staff&id={val newface/info_id}">{val newface/title}</a> <!--{def newface/recommend1}--><span class="tp-icon">人気</span><!--{/def}--> <!--{def newface/new_flag}--><span class="tp-icon tp-newicon">NEW</span><!--{/def}--> </h4> <p> {val newface/info1/title}:{val newface/info1/value}<br> {val newface/info2/title}:{val newface/info2/value} </p> </div> </div> <!--{/each}--> </div> </section> <section> <h2>本日早番キャスト</h2> <div class="tp-list2-container"> <!--{each list11}--> <div class="tp-list2-compact"> <!--{def list11/image1}--><figure><a href="index.php?act=staff&id={val list11/info_id}"><img src="user_data/{val list11/image1_file}" alt="{val list11/title}"></a></figure><!--{/def}--> <div> <h4> <a href="index.php?act=staff&id={val list11/info_id}">{val list11/title}</a> <!--{def list11/recommend1}--><span class="tp-icon">人気</span><!--{/def}--> <!--{def list11/new_flag}--><span class="tp-icon tp-newicon">NEW</span><!--{/def}--> </h4> <p> {val list11/info1/title}:{val list11/info1/value}<br> {val list11/info2/title}:{val list11/info2/value}<br> {val list11/info5/title}:{val list11/info5/value} </p> </div> </div> <!--{/each}--> </div> <h2>本日遅番キャスト</h2> <div class="tp-list2-container"> <!--{each list12}--> <div class="tp-list2-compact"> <!--{def list12/image1}--><figure><a href="index.php?act=staff&id={val list12/info_id}"><img src="user_data/{val list12/image1_file}" alt="{val list12/title}"></a></figure><!--{/def}--> <div> <h4> <a href="index.php?act=staff&id={val list12/info_id}">{val list12/title}</a> <!--{def list12/recommend1}--><span class="tp-icon">人気</span><!--{/def}--> <!--{def list12/new_flag}--><span class="tp-icon tp-newicon">NEW</span><!--{/def}--> </h4> <p> {val list12/info1/title}:{val list12/info1/value}<br> {val list12/info2/title}:{val list12/info2/value}<br> {val list12/info5/title}:{val list12/info5/value} </p> </div> </div> <!--{/each}--> </div> </section> <section> <h2>更新情報・お知らせ</h2> <dl class="tp-new"> <!--{each newinfo}--> <dt>{val newinfo/rss_date}</dt> <!--{def newinfo/url}--> <dd><a href="{val newinfo/url}">{val newinfo/title}<br>{val newinfo/contents}</a></dd> <!--{/def}--> <!--{ndef newinfo/url}--> <dd>{val newinfo/title}<br>{val newinfo/contents}</dd> <!--{/ndef}--> <!--{/each}--> </dl> </section> </div> <!--/#tp-main-->

続いて、サブコンテンツに「人気キャスト」のタグも追加します。
（サブコンテンツ専用のタグではありませんので、html内のどこにコピペされても構いませんがcssなどの調整はお客様側で行って下さい。）
<!--{def osusume}--> <div id="tp-sub-side"> <section> <h2>人気キャスト</h2> <!--{each osusume}--> <div class="tp-list-sub"> <!--{def osusume/image1_file}--><figure><a href="index.php?act=staff&id={val osusume/info_id}"><img src="user_data/{val osusume/image1_file}" alt="{val osusume/title}"></a></figure><!--{/def}--> <h4><a href="index.php?act=staff&id={val osusume/info_id}">{val osusume/title}</a></h4> <p> {val osusume/info1/title}:{val osusume/info1/value}<br> {val osusume/info2/title}:{val osusume/info2/value} </p> </div> <!--{/each}--> </section> </div> <!--{/def}--> <!--/#tp-sub-side-->

キャスト一覧ページ用のタグを記載

index2.htmlファイルを複製し、ファイル名をcast.htmlに変更します。

cast.htmlのメインコンテンツのコードを以下に置き換えます。
<div id="tp-main"> <section> <h2>CAST</h2> <p class="tp-c"> <!--{def ord1}--> 人気順 <!--{/def}--> <!--{ndef ord1}--> <a href="index.php?act=cast&ord=1">人気順</a> <!--{/ndef}--> | <!--{def ord3}--> 新着順 <!--{/def}--> <!--{ndef ord3}--> <a href="index.php?act=cast&ord=3">新着順</a> <!--{/ndef}--> </p> <h2>New Face !</h2> <div class="tp-list2-container"> <!--{each list2}--> <div class="tp-list2-compact"> <!--{def list2/image1}--><figure><a href="index.php?act=staff&id={val list2/info_id}"><img src="user_data/{val list2/image1_file}" alt="{val list2/title}"></a></figure><!--{/def}--> <div> <h4> <a href="index.php?act=staff&id={val list2/info_id}">{val list2/title}</a> <!--{def list2/recommend1}--><span class="tp-icon">人気</span><!--{/def}--> <!--{def list2/new_flag}--><span class="tp-icon tp-newicon">NEW</span><!--{/def}--> </h4> <p> {val list2/info1/title}:{val list2/info1/value}<br> {val list2/info2/title}:{val list2/info2/value} </p> </div> </div> <!--{/each}--> </div> <h2>キャスト一覧</h2> <div class="tp-list2-container"> <!--{each list}--> <div class="tp-list2-compact"> <!--{def list/image1}--><figure><a href="index.php?act=staff&id={val list/info_id}"><img src="user_data/{val list/image1_file}" alt="{val list/title}"></a></figure><!--{/def}--> <div> <h4> <a href="index.php?act=staff&id={val list/info_id}">{val list/title}</a> <!--{def list/recommend1}--><span class="tp-icon">人気</span><!--{/def}--> <!--{def list/new_flag}--><span class="tp-icon tp-newicon">NEW</span><!--{/def}--> </h4> <p> {val list/info1/title}:{val list/info1/value}<br> {val list/info2/title}:{val list/info2/value} </p> </div> </div> <!--{/each}--> </div> <!--{def pager}--> <div class="tp-pager"> <!--{def pager/prev}--> <a href="index.php?act=cast&ord={val order}&page={val pager/prev/no}"><< 前へ</a> <!--{/def}--> <!--{ndef pager/prev}--> <span><< 前へ</span> <!--{/ndef}--> <!--{each pager/list}--> <!--{def pager/list/link}--> <a href="index.php?act=cast&ord={val order}&page={val pager/list/no}">{val pager/list/name}</a> <!--{/def}--> <!--{ndef pager/list/link}--> <span>{val pager/list/name}</span> <!--{/ndef}--> <!--{/each}--> <!--{def pager/next}--> <a href="index.php?act=cast&ord={val order}&page={val pager/next/no}">次へ >></a> <!--{/def}--> <!--{ndef pager/next}--> <span>次へ >></span> <!--{/ndef}--> </p> <!--{/def}--> </section> </div> <!--/#tp-main-->

スケジュール一覧ページ用（※タイプ１）のタグを記載

cast.htmlファイルを複製し、ファイル名をschedule.htmlに変更します。

schedule.htmlのメインコンテンツのコードを以下に置き換えます。
<div id="tp-main"> <section> <h2>SCHEDULE</h2> <h4>本日： {val date1}（{val week1}） 早番出勤</h4> <!--{each list11}--> <div class="tp-list2"> <!--{def list11/image1}--><figure><a href="index.php?act=staff&id={val list11/info_id}"><img src="user_data/{val list11/image1_file}" alt="{val list11/title}"></a></figure><!--{/def}--> <div> <h4><a href="index.php?act=staff&id={val list11/info_id}">{val list11/title}</a></h4> <figcaption> {val list11/info1/title}:{val list11/info1/value}<br> {val list11/info2/title}:{val list11/info2/value} </figcaption> <!--{def list11/recommend1}--><span class="tp-icon">人気</span><!--{/def}--> <!--{def list11/new_flag}--><span class="tp-icon tp-newicon">NEW</span><!--{/def}--> </div> </div> <!--{/each}--> <h4>本日： {val date1}（{val week1}） 遅番出勤</h4> <!--{each list12}--> <div class="tp-list2"> <!--{def list12/image1}--><figure><a href="index.php?act=staff&id={val list12/info_id}"><img src="user_data/{val list12/image1_file}" alt="{val list12/title}"></a></figure><!--{/def}--> <div> <h4><a href="index.php?act=staff&id={val list12/info_id}">{val list12/title}</a></h4> <figcaption> {val list12/info1/title}:{val list12/info1/value}<br> {val list12/info2/title}:{val list12/info2/value} </figcaption> <!--{def list12/recommend1}--><span class="tp-icon">人気</span><!--{/def}--> <!--{def list12/new_flag}--><span class="tp-icon tp-newicon">NEW</span><!--{/def}--> </div> </div> <!--{/each}--> <h4>明日： {val date2}（{val week2}） 早番出勤</h4> <!--{each list21}--> <div class="tp-list2"> <!--{def list21/image1}--><figure><a href="index.php?act=staff&id={val list21/info_id}"><img src="user_data/{val list21/image1_file}" alt="{val list21/title}"></a></figure><!--{/def}--> <div> <h4><a href="index.php?act=staff&id={val list21/info_id}">{val list21/title}</a></h4> <figcaption> {val list21/info1/title}:{val list21/info1/value}<br> {val list21/info2/title}:{val list21/info2/value} </figcaption> <!--{def list21/recommend1}--><span class="tp-icon">人気</span><!--{/def}--> <!--{def list21/new_flag}--><span class="tp-icon tp-newicon">NEW</span><!--{/def}--> </div> </div> <!--{/each}--> <h4>明日： {val date2}（{val week2}） 遅番出勤</h4> <!--{each list22}--> <div class="tp-list2"> <!--{def list22/image1}--><figure><a href="index.php?act=staff&id={val list22/info_id}"><img src="user_data/{val list22/image1_file}" alt="{val list22/title}"></a></figure><!--{/def}--> <div> <h4><a href="index.php?act=staff&id={val list22/info_id}">{val list22/title}</a></h4> <figcaption> {val list22/info1/title}:{val list22/info1/value}<br> {val list22/info2/title}:{val list22/info2/value} </figcaption> <!--{def list22/recommend1}--><span class="tp-icon">人気</span><!--{/def}--> <!--{def list22/new_flag}--><span class="tp-icon tp-newicon">NEW</span><!--{/def}--> </div> </div> <!--{/each}--> <h4>明後日： {val date3}（{val week3}） 早番出勤</h4> <!--{each list31}--> <div class="tp-list2"> <!--{def list31/image1}--><figure><a href="index.php?act=staff&id={val list31/info_id}"><img src="user_data/{val list31/image1_file}" alt="{val list31/title}"></a></figure><!--{/def}--> <div> <h4><a href="index.php?act=staff&id={val list31/info_id}">{val list31/title}</a></h4> <figcaption> {val list31/info1/title}:{val list31/info1/value}<br> {val list31/info2/title}:{val list31/info2/value} </figcaption> <!--{def list31/recommend1}--><span class="tp-icon">人気</span><!--{/def}--> <!--{def list31/new_flag}--><span class="tp-icon tp-newicon">NEW</span><!--{/def}--> </div> </div> <!--{/each}--> <h4>明後日： {val date3}（{val week3}） 遅番出勤</h4> <!--{each list32}--> <div class="tp-list2"> <!--{def list32/image1}--><figure><a href="index.php?act=staff&id={val list32/info_id}"><img src="user_data/{val list32/image1_file}" alt="{val list32/title}"></a></figure><!--{/def}--> <div> <h4><a href="index.php?act=staff&id={val list32/info_id}">{val list32/title}</a></h4> <figcaption> {val list32/info1/title}:{val list32/info1/value}<br> {val list32/info2/title}:{val list32/info2/value} </figcaption> <!--{def list32/recommend1}--><span class="tp-icon">人気</span><!--{/def}--> <!--{def list32/new_flag}--><span class="tp-icon tp-newicon">NEW</span><!--{/def}--> </div> </div> <!--{/each}--> <h4>{val date4}（{val week4}） 早番出勤</h4> <!--{each list41}--> <div class="tp-list2"> <!--{def list41/image1}--><figure><a href="index.php?act=staff&id={val list41/info_id}"><img src="user_data/{val list41/image1_file}" alt="{val list41/title}"></a></figure><!--{/def}--> <div> <h4><a href="index.php?act=staff&id={val list41/info_id}">{val list41/title}</a></h4> <figcaption> {val list41/info1/title}:{val list41/info1/value}<br> {val list41/info2/title}:{val list41/info2/value} </figcaption> <!--{def list41/recommend1}--><span class="tp-icon">人気</span><!--{/def}--> <!--{def list41/new_flag}--><span class="tp-icon tp-newicon">NEW</span><!--{/def}--> </div> </div> <!--{/each}--> <h4>{val date4}（{val week4}） 遅番出勤</h4> <!--{each list42}--> <div class="tp-list2"> <!--{def list42/image1}--><figure><a href="index.php?act=staff&id={val list42/info_id}"><img src="user_data/{val list42/image1_file}" alt="{val list42/title}"></a></figure><!--{/def}--> <div> <h4><a href="index.php?act=staff&id={val list42/info_id}">{val list42/title}</a></h4> <figcaption> {val list42/info1/title}:{val list42/info1/value}<br> {val list42/info2/title}:{val list42/info2/value} </figcaption> <!--{def list42/recommend1}--><span class="tp-icon">人気</span><!--{/def}--> <!--{def list42/new_flag}--><span class="tp-icon tp-newicon">NEW</span><!--{/def}--> </div> </div> <!--{/each}--> <h4>{val date5}（{val week5}） 早番出勤</h4> <!--{each list51}--> <div class="tp-list2"> <!--{def list51/image1}--><figure><a href="index.php?act=staff&id={val list51/info_id}"><img src="user_data/{val list51/image1_file}" alt="{val list51/title}"></a></figure><!--{/def}--> <div> <h4><a href="index.php?act=staff&id={val list51/info_id}">{val list51/title}</a></h4> <figcaption> {val list51/info1/title}:{val list51/info1/value}<br> {val list51/info2/title}:{val list51/info2/value} </figcaption> <!--{def list51/recommend1}--><span class="tp-icon">人気</span><!--{/def}--> <!--{def list51/new_flag}--><span class="tp-icon tp-newicon">NEW</span><!--{/def}--> </div> </div> <!--{/each}--> <h4>{val date5}（{val week5}） 遅番出勤</h4> <!--{each list52}--> <div class="tp-list2"> <!--{def list52/image1}--><figure><a href="index.php?act=staff&id={val list52/info_id}"><img src="user_data/{val list52/image1_file}" alt="{val list52/title}"></a></figure><!--{/def}--> <div> <h4><a href="index.php?act=staff&id={val list52/info_id}">{val list52/title}</a></h4> <figcaption> {val list52/info1/title}:{val list52/info1/value}<br> {val list52/info2/title}:{val list52/info2/value} </figcaption> <!--{def list52/recommend1}--><span class="tp-icon">人気</span><!--{/def}--> <!--{def list52/new_flag}--><span class="tp-icon tp-newicon">NEW</span><!--{/def}--> </div> </div> <!--{/each}--> <h4>{val date6}（{val week6}） 早番出勤</h4> <!--{each list61}--> <div class="tp-list2"> <!--{def list61/image1}--><figure><a href="index.php?act=staff&id={val list61/info_id}"><img src="user_data/{val list61/image1_file}" alt="{val list61/title}"></a></figure><!--{/def}--> <div> <h4><a href="index.php?act=staff&id={val list61/info_id}">{val list61/title}</a></h4> <figcaption> {val list61/info1/title}:{val list61/info1/value}<br> {val list61/info2/title}:{val list61/info2/value} </figcaption> <!--{def list61/recommend1}--><span class="tp-icon">人気</span><!--{/def}--> <!--{def list61/new_flag}--><span class="tp-icon tp-newicon">NEW</span><!--{/def}--> </div> </div> <!--{/each}--> <h4>{val date6}（{val week6}） 遅番出勤</h4> <!--{each list62}--> <div class="tp-list2"> <!--{def list62/image1}--><figure><a href="index.php?act=staff&id={val list62/info_id}"><img src="user_data/{val list62/image1_file}" alt="{val list62/title}"></a></figure><!--{/def}--> <div> <h4><a href="index.php?act=staff&id={val list62/info_id}">{val list62/title}</a></h4> <figcaption> {val list62/info1/title}:{val list62/info1/value}<br> {val list62/info2/title}:{val list62/info2/value} </figcaption> <!--{def list62/recommend1}--><span class="tp-icon">人気</span><!--{/def}--> <!--{def list62/new_flag}--><span class="tp-icon tp-newicon">NEW</span><!--{/def}--> </div> </div> <!--{/each}--> <h4>{val date7}（{val week7}） 早番出勤</h4> <!--{each list71}--> <div class="tp-list2"> <!--{def list71/image1}--><figure><a href="index.php?act=staff&id={val list71/info_id}"><img src="user_data/{val list71/image1_file}" alt="{val list71/title}"></a></figure><!--{/def}--> <div> <h4><a href="index.php?act=staff&id={val list71/info_id}">{val list71/title}</a></h4> <figcaption> {val list71/info1/title}:{val list71/info1/value}<br> {val list71/info2/title}:{val list71/info2/value} </figcaption> <!--{def list71/recommend1}--><span class="tp-icon">人気</span><!--{/def}--> <!--{def list71/new_flag}--><span class="tp-icon tp-newicon">NEW</span><!--{/def}--> </div> </div> <!--{/each}--> <h4>{val date7}（{val week7}） 遅番出勤</h4> <!--{each list72}--> <div class="tp-list2"> <!--{def list72/image1}--><figure><a href="index.php?act=staff&id={val list72/info_id}"><img src="user_data/{val list72/image1_file}" alt="{val list72/title}"></a></figure><!--{/def}--> <div> <h4><a href="index.php?act=staff&id={val list72/info_id}">{val list72/title}</a></h4> <figcaption> {val list72/info1/title}:{val list72/info1/value}<br> {val list72/info2/title}:{val list72/info2/value} </figcaption> <!--{def list72/recommend1}--><span class="tp-icon">人気</span><!--{/def}--> <!--{def list72/new_flag}--><span class="tp-icon tp-newicon">NEW</span><!--{/def}--> </div> </div> <!--{/each}--> </section> </div> <!--/#tp-main-->

スケジュール一覧ページ用（※タイプ２）のタグを記載

cast.htmlファイルを複製し、ファイル名をschedule2.htmlに変更します。

schedule2.htmlのメインコンテンツのコードを以下に置き換えます。
<div id="tp-main"> <section> <h2>SCHEDULE</h2> <h2>早番スタッフ：スケジュール表</h2> <div class="tp-ta-box"> <table class="tp-ta1 tp-schedule-table"> <tr> <th> </th> <!--{each list}--> <td>{val list/date}</td> <!--{/each}--> </tr> <!--{each list1}--> <tr> <th><a href="index.php?act=staff&id={val list1/info_id}">{val list1/title}</a></th> <!--{each list1/date}--> <td>{val list1/date}</td> <!--{/each}--> </tr> <!--{/each}--> </table> </div> <h2>遅番スタッフ：スケジュール表</h2> <div class="tp-ta-box"> <table class="tp-ta1 tp-schedule-table"> <tr> <th> </th> <!--{each list}--> <td>{val list/date}</td> <!--{/each}--> </tr> <!--{each list2}--> <tr> <th><a href="index.php?act=staff&id={val list2/info_id}">{val list2/title}</a></th> <!--{each list2/date}--> <td>{val list2/date}</td> <!--{/each}--> </tr> <!--{/each}--> </table> </div> </section> </div> <!--/#tp-main-->

詳細ページ用のタグを記載

cast.htmlファイルを複製し、ファイル名をstaff.htmlに変更します。

staff.htmlのメインコンテンツのコードを以下に置き換えます。
<div id="tp-main"> <article> <h2>{val item/title}</h2> <div class="tp-staff"> <div class="tp-left"> <!--{def item/image1_file}--> <figure><img src="user_data/{val item/image1_file}" alt="{val item/title}" id="staff_image" class="tp-mb30"></figure> <!--{/def}--> <p class="tp-c"> <!--{def item/image1}--> <a href="javascript:set_image('user_data/{val item/image1_file}');"><img src="user_data/{val item/image1_file}" alt="" width="70"></a> <!--{/def}--> <!--{def item/image2}--> <a href="javascript:set_image('user_data/{val item/image2_file}');"><img src="user_data/{val item/image2_file}" alt="" width="70"></a> <!--{/def}--> <!--{def item/image3}--> <a href="javascript:set_image('user_data/{val item/image3_file}');"><img src="user_data/{val item/image3_file}" alt="" width="70"></a> <!--{/def}--> <!--{def item/image4}--> <a href="javascript:set_image('user_data/{val item/image4_file}');"><img src="user_data/{val item/image4_file}" alt="" width="70"></a> <!--{/def}--> <!--{def item/image5}--> <a href="javascript:set_image('user_data/{val item/image5_file}');"><img src="user_data/{val item/image5_file}" alt="" width="70"></a> <!--{/def}--> <!--{def item/image6}--> <a href="javascript:set_image('user_data/{val item/image6_file}');"><img src="user_data/{val item/image6_file}" alt="" width="70"></a> <!--{/def}--> <!--{def item/image7}--> <a href="javascript:set_image('user_data/{val item/image7_file}');"><img src="user_data/{val item/image7_file}" alt="" width="70"></a> <!--{/def}--> <!--{def item/image8}--> <a href="javascript:set_image('user_data/{val item/image8_file}');"><img src="user_data/{val item/image8_file}" alt="" width="70"></a> <!--{/def}--> <!--{def item/image9}--> <a href="javascript:set_image('user_data/{val item/image9_file}');"><img src="user_data/{val item/image9_file}" alt="" width="70"></a> <!--{/def}--> <!--{def item/image10}--> <a href="javascript:set_image('user_data/{val item/image10_file}');"><img src="user_data/{val item/image10_file}" alt="" width="70"></a> <!--{/def}--> </p> </div> <!--/left--> <div class="tp-right"> <table class="tp-ta1"> <caption>プロフィール</caption> <!--{each item/info}--> <tr> <th>{val item/info/title}</th> <td>{val item/info/value}</td> </tr> <!--{/each}--> <!--{def item/contents}--> <tr> <th>プロフィール</th> <td>{val item/contents}</td> </tr> <!--{/def}--> <!--{def item/special}--> <tr> <th>オプション</th> <td> <!--{each item/special}--> <!--{def item/special/icon}--> <a href="index.php?act=cast&kind={val item/kind}&special{val item/special/value}={val item/special/value}"><img src="icon/{val item/special/icon}" alt="{val item/special/title}"></a> <!--{/def}--> <!--{ndef item/special/icon}--> [<a href="index.php?act=cast&kind={val item/kind}&special{val item/special/value}={val item/special/value}">{val item/special/title}</a>]  <!--{/ndef}--> <!--{/each}--> </td> </tr> <!--{/def}--> </table> </div> <!--/right--> </div> <!--/staff--> <!--{def date1}--> <div class="tp-staff"> <table class="tp-ta1"> <caption>{val item/title}：出勤予定</caption> <tr> <th>{val date1}({val week1})</th> <td><!--{def sche1}-->{val sche1}<br>>> <a href="?act=form&id={val item/info_id}&month={val month1}&day={val day1}">この日の簡易予約</a><!--{/def}--></td> </tr> <tr> <th>{val date2}({val week2})</th> <td><!--{def sche2}-->{val sche2}<br>>> <a href="?act=form&id={val item/info_id}&month={val month2}&day={val day2}">この日の簡易予約</a><!--{/def}--></td> </tr> <tr> <th>{val date3}({val week3})</th> <td><!--{def sche3}-->{val sche3}<br>>> <a href="?act=form&id={val item/info_id}&month={val month3}&day={val day3}">この日の簡易予約</a><!--{/def}--></td> </tr> <tr> <th>{val date4}({val week4})</th> <td><!--{def sche4}-->{val sche4}<br>>> <a href="?act=form&id={val item/info_id}&month={val month4}&day={val day4}">この日の簡易予約</a><!--{/def}--></td> </tr> <tr> <th>{val date5}({val week5})</th> <td><!--{def sche5}-->{val sche5}<br>>> <a href="?act=form&id={val item/info_id}&month={val month5}&day={val day5}">この日の簡易予約</a><!--{/def}--></td> </tr> <tr> <th>{val date6}({val week6})</th> <td><!--{def sche6}-->{val sche6}<br>>> <a href="?act=form&id={val item/info_id}&month={val month6}&day={val day6}">この日の簡易予約</a><!--{/def}--></td> </tr> <tr> <th>{val date7}({val week7})</th> <td><!--{def sche7}-->{val sche7}<br>>> <a href="?act=form&id={val item/info_id}&month={val month7}&day={val day7}">この日の簡易予約</a><!--{/def}--></td> </tr> </table> <p class="tp-c tp-btn"> <a href="?act=form&id={val item/info_id}">簡易予約フォームへ</a> </p> <p><< <a href="javascript:history.back()">BACK</a></p> </div> <!--/staff--> <!--{/def}--> </article> </div> <!--/#tp-main-->

続いて、head内に以下のコードも入れます。
<script> function set_image(img) { document.getElementById('staff_image').src = img; } </script>

フォーム用のタグを記載

cast.htmlを複製し、ファイル名をform.htmlに変更します。

form.htmlのメインコンテンツに、以下のコードをコピペして下さい。
<div id="tp-main"> <section> <h2>仮予約フォーム</h2> <p>※こちらのフォームは仮予約フォームです。フォームご利用後、当サイトからメールが入った時点でご予約決定になります。<br> ・・・等の説明を入れて下さい。</p> <!--{ndef mode}--> <p>予約内容を送信しました。</p> <!--{/ndef}--> <!--{def mode}--> <p class="tp-color-check">※全項目入力必須です。</p> <!--{def message}--> <p class="tp-color-check">{val message}</p> <!--{/def}--> <form name="form1" method="post" action="?act=form"> <input type="hidden" name="mode" value="{val mode}"> <input type="hidden" name="id" value="{val item/info_id}"> <table class="tp-ta1"> <tr> <th>スタッフ</th> <td>{val item/title} (ID:{val item/info_id})</td> </tr> <tr> <th>お客様名</th> <td> <!--{def confirm}--> {val form/name} <!--{/def}--> <!--{ndef confirm}--> <input type="text" name="name" size="30" class="tp-ws" value="{val form/name}"> <!--{/ndef}--> </td> </tr> <tr> <th>お客様メールアドレス</th> <td> <!--{def confirm}--> {val form/email} <!--{/def}--> <!--{ndef confirm}--> <input type="text" name="email" size="50" class="tp-ws" value="{val form/email}"> <!--{/ndef}--> </td> </tr> <tr> <th>ご予約希望日</th> <td> <!--{def confirm}--> {val form/month}月{val form/day}日 <!--{/def}--> <!--{ndef confirm}--> <select name="month"> <option value="">-</option> <option value="1" {val month1}>1</option> <option value="2" {val month2}>2</option> <option value="3" {val month3}>3</option> <option value="4" {val month4}>4</option> <option value="5" {val month5}>5</option> <option value="6" {val month6}>6</option> <option value="7" {val month7}>7</option> <option value="8" {val month8}>8</option> <option value="9" {val month9}>9</option> <option value="10" {val month10}>10</option> <option value="11" {val month11}>11</option> <option value="12" {val month12}>12</option> </select>月 <select name="day"> <option value="">-</option> <option value="1" {val day1}>1</option> <option value="2" {val day2}>2</option> <option value="3" {val day3}>3</option> <option value="4" {val day4}>4</option> <option value="5" {val day5}>5</option> <option value="6" {val day6}>6</option> <option value="7" {val day7}>7</option> <option value="8" {val day8}>8</option> <option value="9" {val day9}>9</option> <option value="10" {val day10}>10</option> <option value="11" {val day11}>11</option> <option value="12" {val day12}>12</option> <option value="13" {val day13}>13</option> <option value="14" {val day14}>14</option> <option value="15" {val day15}>15</option> <option value="16" {val day16}>16</option> <option value="17" {val day17}>17</option> <option value="18" {val day18}>18</option> <option value="19" {val day19}>19</option> <option value="20" {val day20}>20</option> <option value="21" {val day21}>21</option> <option value="22" {val day22}>22</option> <option value="23" {val day23}>23</option> <option value="24" {val day24}>24</option> <option value="25" {val day25}>25</option> <option value="26" {val day26}>26</option> <option value="27" {val day27}>27</option> <option value="28" {val day28}>28</option> <option value="29" {val day29}>29</option> <option value="30" {val day30}>30</option> <option value="31" {val day31}>31</option> </select>日 <!--{/ndef}--> </td> </tr> <tr> <th>メッセージ</th> <td> <!--{def confirm}--> {val form/comment} <!--{/def}--> <!--{ndef confirm}--> <textarea name="comment" cols="60" rows="8" class="tp-wl">{rval form/comment}</textarea> <br /> ご希望の時間などはこちらにご記入下さい。 <!--{/ndef}--> </td> </tr> </table> <div class="tp-c tp-btn"> <!--{def confirm}--> <input type="submit" value="この内容で送信する"> <input type="button" value="修正する" onClick="location='?act=form_reinput&id={val item/info_id}'"> <!--{/def}--> <!--{ndef confirm}--> <input type="submit" value="確認する"> <!--{/ndef}--> </div> </form> <!--{/def}--> </section> </div> <!--/#tp-main--> <!--/#tp-main-->

設定は以上です

サーバーにアップロードしプレビュー確認をして下さい。
フォームの動作はsetup.phpファイルの設定が必要なので、マニュアルをご覧下さい。
詳しい使い方もマニュアルに解説があります。