スタッフ管理CMSマニュアル

自社のオリジナルデザインにCMSを組み込む方法

当サイトのCMS専用テンプレートではなく、オリジナルデザインに組み込む方法のご紹介です。

まずは、CMSが使えるかの確認から

CMSがあなたのサーバーで動くか、試用版ページをご覧頂き事前に動作確認をしておいて下さい。
試用版が動作しない場合は、弊社CMSは使えません。

下準備

あなたのサイトの文字コードをhtml側のhead内で確認して下さい。
「<meta〜〜charset="UTF-8"」のように「UTF-8（utf-8でも可）」という文字があれば問題ありません。
文字コードに問題なければ、試用版ページから試用版プログラムをダウンロードします。
続いて、original_sampleset.zipをダウンロードします。
cssファイルは、オリジナルデザインにCMSを組み込みやすくする為に弊社で用意したものです。後で変更して頂いて構いません。
ダウンロードしたファイルを解凍し、中のファイル・フォルダをあなたのサイトフォルダに移動して下さい。
ひとまず、index.htmlと同じ最上層においておけばOKです。
※同じファイル名やフォルダ名がすでに存在していないか必ず確認します。
以下より、あなたのサイトの編集作業に入ります。

全ページ共通の編集作業に入ります

既存サイトをコピーし、コピーしたもので作業を行なって下さい。
いきなり本サイトで設定すると問題が出た場合に復旧しづらくなります。

全てのhtmlファイルの<head>内に以下のスタイル読み込みタグを追加。
できれば既存サイトのcss読み込み行より下に配置して下さい。

※cssファイル名は任意のものに変更して頂いても構いません。変更の際は、cssファイル本体のファイル名も変更しておきましょう。
他、例えばcssフォルダがある場合は「css/stylestyle.css」としてもらっても構いません。この場合も、指定した階層に移動するのを忘れず。
トップページへのリンク先を全て「<a href="index.php">」に変更。
CMS出力用のメニューとリンクを設定。
liタグを使うなど、今使っているサイトのコーディングに合わせて調整して下さい。
<a href="index.php?act=cast">スタッフ一覧</a> <a href="index.php?act=schedule">スケジュール一覧</a>

トップページの編集に入ります

トップページ（通常はindex.html）のファイル名をindex2.htmlに変更。
index2.htmlのファイル名は変更しないで下さい。
プログラムがこのファイルをトップページとして読み込んで出力しますので、ファイル名は変更しないで下さい。また、他にindex.htmlがあるとそちらが優先表示されてしまいますので、作らないように。index2.htmlというファイル名ですが、実際にこのファイルにアクセスする事はありません。通常のindex.html同様、http://〜〜〜/で開きます。
index2.htmlを開き、新人スタッフブロックを追加します。
<h2>新人スタッフ</h2>  <div class="listlist"> <a href="index.php?act=staff&id={val newface/info_id}"> <figure><img src="user_data/{val newface/image1_file}" alt="{val newface/title}"></figure> <figure><img src="noimg.png" alt="{val newface/title}"></figure> <h4>{val newface/title}</h4> <p> {val newface/info1/title}:{val newface/info1/value}<br> {val newface/info2/title}:{val newface/info2/value}<br> {val newface/info5/title}:{val newface/info5/value} </p> <span class="mark1">人気</span> <span class="mark2">NEW</span> </a> </div>
続いて試用版の「早番（当日）」スタッフを出力させるブロックを追加します。
この「遅番or早番」はsetup.phpで変更・追加は可能ですが、マニュアルをしっかり読んで実行して下さい。
<h2>本日早番スタッフ</h2>  <div class="listlist"> <a href="index.php?act=staff&id={val list11/info_id}"> <figure><img src="user_data/{val list11/image1_file}" alt="{val list11/title}"></figure> <figure><img src="noimg.png" alt="{val list11/title}"></figure> <h4>{val list11/title}</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> <span class="mark1">人気</span> <span class="mark2">NEW</span> </a> </div>
続いて試用版の「遅番（当日）」スタッフを出力させるブロックを追加します。
この「遅番or早番」はsetup.phpで変更・追加は可能ですが、マニュアルをしっかり読んで実行して下さい。
<h3>本日遅番スタッフ</h3>  <div class="listlist"> <a href="index.php?act=staff&id={val list12/info_id}"> <figure><img src="user_data/{val list12/image1_file}" alt="{val list12/title}"></figure> <figure><img src="noimg.png" alt="{val list12/title}"></figure> <h4>{val list12/title}</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> <span class="mark1">人気</span> <span class="mark2">NEW</span> </a> </div>
続いて、「お知らせ」ブロックを追加します。
<h2>更新情報・お知らせ</h2>  {val newinfo/rss_date}  <a href="{val newinfo/url}">{val newinfo/title}{val newinfo/contents}</a><br>   {val newinfo/title}{val newinfo/contents}<br>
▼トップページの出力イメージです。※スタイルはテスト確認後にそちらで整えて下さい。

スタッフ一覧ページの編集に入ります

既存ファイルをコピペし、cast.htmlというファイル名のファイルを作成します。
メインコンテンツ内は空にしておいて下さい。
cast.htmlのメインブロック内に以下のタグを貼り付けます。
<h2>スタッフ一覧</h2> <p>  人気順   <a href="index.php?act=cast&ord=1">人気順</a>  |  新着順   <a href="index.php?act=cast&ord=3">新着順</a>  </p> <h3>新人スタッフ</h3>  <div class="listlist"> <a href="index.php?act=staff&id={val list2/info_id}"> <figure><img src="user_data/{val list2/image1_file}" alt="{val list2/title}"></figure> <figure><img src="noimg.png" alt="{val list2/title}"></figure> <h4>{val list2/title}</h4> <p> {val list2/info1/title}:{val list2/info1/value}<br> {val list2/info2/title}:{val list2/info2/value}<br> {val list2/info5/title}:{val list2/info5/value} </p> <span class="mark1">人気</span> <span class="mark2">NEW</span> </a> </div>  <h3>スタッフ一覧</h3>  <div class="listlist"> <a href="index.php?act=staff&id={val list/info_id}"> <figure><img src="user_data/{val list/image1_file}" alt="{val list/title}"></figure> <figure><img src="noimg.png" alt="{val list/title}"></figure> <h4>{val list/title}</h4> <p> {val list/info1/title}:{val list/info1/value}<br> {val list/info2/title}:{val list/info2/value}<br> {val list/info5/title}:{val list/info5/value} </p> <span class="mark1">人気</span> <span class="mark2">NEW</span> </a> </div>
▼スタッフ一覧ページの出力イメージです。※スタイルはテスト確認後にそちらで整えて下さい。

スケジュール一覧ページの編集に入ります

既存ファイルをコピペし、schedule.htmlというファイル名のファイルを作成します。
メインコンテンツ内は空にしておいて下さい。
schedule.htmlのメインブロック内に以下のタグを貼り付けます。
<h2>スケジュール一覧</h2> <h3>本日： {val date1}（{val week1}）早番出勤</h3>  <div class="listlist"> <a href="index.php?act=staff&id={val list11/info_id}"> <figure><img src="user_data/{val list11/image1_file}" alt="{val list11/title}"></figure> <figure><img src="noimg.png" alt="{val list11/title}"></figure> <h4>{val list11/title}</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> <span class="mark1">人気</span> <span class="mark2">NEW</span> </a> </div>  <h3>本日： {val date1}（{val week1}）遅番出勤</h3>  <div class="listlist"> <a href="index.php?act=staff&id={val list12/info_id}"> <figure><img src="user_data/{val list12/image1_file}" alt="{val list12/title}"></figure> <figure><img src="noimg.png" alt="{val list12/title}"></figure> <h4>{val list12/title}</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> <span class="mark1">人気</span> <span class="mark2">NEW</span> </a> </div>  <h3>明日： {val date2}（{val week2}）早番出勤</h3>  <div class="listlist"> <a href="index.php?act=staff&id={val list21/info_id}"> <figure><img src="user_data/{val list21/image1_file}" alt="{val list21/title}"></figure> <figure><img src="noimg.png" alt="{val list21/title}"></figure> <h4>{val list21/title}</h4> <p> {val list21/info1/title}:{val list21/info1/value}<br> {val list21/info2/title}:{val list21/info2/value}<br> {val list21/info5/title}:{val list21/info5/value} </p> <span class="mark1">人気</span> <span class="mark2">NEW</span> </a> </div>  <h3>明日： {val date2}（{val week2}）遅番出勤</h3>  <div class="listlist"> <a href="index.php?act=staff&id={val list22/info_id}"> <figure><img src="user_data/{val list22/image1_file}" alt="{val list22/title}"></figure> <figure><img src="noimg.png" alt="{val list22/title}"></figure> <h4>{val list22/title}</h4> <p> {val list22/info1/title}:{val list22/info1/value}<br> {val list22/info2/title}:{val list22/info2/value}<br> {val list22/info5/title}:{val list22/info5/value} </p> <span class="mark1">人気</span> <span class="mark2">NEW</span> </a> </div>  <h3>明後日： {val date3}（{val week3}）早番出勤</h3>  <div class="listlist"> <a href="index.php?act=staff&id={val list31/info_id}"> <figure><img src="user_data/{val list31/image1_file}" alt="{val list31/title}"></figure> <figure><img src="noimg.png" alt="{val list31/title}"></figure> <h4>{val list31/title}</h4> <p> {val list31/info1/title}:{val list31/info1/value}<br> {val list31/info2/title}:{val list31/info2/value}<br> {val list31/info5/title}:{val list31/info5/value} </p> <span class="mark1">人気</span> <span class="mark2">NEW</span> </a> </div>  <h3>明後日： {val date3}（{val week3}）遅番出勤</h3>  <div class="listlist"> <a href="index.php?act=staff&id={val list32/info_id}"> <figure><img src="user_data/{val list32/image1_file}" alt="{val list32/title}"></figure> <figure><img src="noimg.png" alt="{val list32/title}"></figure> <h4>{val list32/title}</h4> <p> {val list32/info1/title}:{val list32/info1/value}<br> {val list32/info2/title}:{val list32/info2/value}<br> {val list32/info5/title}:{val list32/info5/value} </p> <span class="mark1">人気</span> <span class="mark2">NEW</span> </a> </div>  <h3>{val date4}（{val week4}）早番出勤</h3>  <div class="listlist"> <a href="index.php?act=staff&id={val list41/info_id}"> <figure><img src="user_data/{val list41/image1_file}" alt="{val list41/title}"></figure> <figure><img src="noimg.png" alt="{val list41/title}"></figure> <h4>{val list41/title}</h4> <p> {val list41/info1/title}:{val list41/info1/value}<br> {val list41/info2/title}:{val list41/info2/value}<br> {val list41/info5/title}:{val list41/info5/value} </p> <span class="mark1">人気</span> <span class="mark2">NEW</span> </a> </div>  <h3>{val date4}（{val week4}）遅番出勤</h3>  <div class="listlist"> <a href="index.php?act=staff&id={val list42/info_id}"> <figure><img src="user_data/{val list42/image1_file}" alt="{val list42/title}"></figure> <figure><img src="noimg.png" alt="{val list42/title}"></figure> <h4>{val list42/title}</h4> <p> {val list42/info1/title}:{val list42/info1/value}<br> {val list42/info2/title}:{val list42/info2/value}<br> {val list42/info5/title}:{val list42/info5/value} </p> <span class="mark1">人気</span> <span class="mark2">NEW</span> </a> </div>  <h3>{val date5}（{val week5}）早番出勤</h3>  <div class="listlist"> <a href="index.php?act=staff&id={val list51/info_id}"> <figure><img src="user_data/{val list51/image1_file}" alt="{val list51/title}"></figure> <figure><img src="noimg.png" alt="{val list51/title}"></figure> <h4>{val list51/title}</h4> <p> {val list51/info1/title}:{val list51/info1/value}<br> {val list51/info2/title}:{val list51/info2/value}<br> {val list51/info5/title}:{val list51/info5/value} </p> <span class="mark1">人気</span> <span class="mark2">NEW</span> </a> </div>  <h3>{val date5}（{val week5}）遅番出勤</h3>  <div class="listlist"> <a href="index.php?act=staff&id={val list52/info_id}"> <figure><img src="user_data/{val list52/image1_file}" alt="{val list52/title}"></figure> <figure><img src="noimg.png" alt="{val list52/title}"></figure> <h4>{val list52/title}</h4> <p> {val list52/info1/title}:{val list52/info1/value}<br> {val list52/info2/title}:{val list52/info2/value}<br> {val list52/info5/title}:{val list52/info5/value} </p> <span class="mark1">人気</span> <span class="mark2">NEW</span> </a> </div>  <h3>{val date6}（{val week6}）早番出勤</h3>  <div class="listlist"> <a href="index.php?act=staff&id={val list61/info_id}"> <figure><img src="user_data/{val list61/image1_file}" alt="{val list61/title}"></figure> <figure><img src="noimg.png" alt="{val list61/title}"></figure> <h4>{val list61/title}</h4> <p> {val list61/info1/title}:{val list61/info1/value}<br> {val list61/info2/title}:{val list61/info2/value}<br> {val list61/info5/title}:{val list61/info5/value} </p> <span class="mark1">人気</span> <span class="mark2">NEW</span> </a> </div>  <h3>{val date6}（{val week6}）遅番出勤</h3>  <div class="listlist"> <a href="index.php?act=staff&id={val list62/info_id}"> <figure><img src="user_data/{val list62/image1_file}" alt="{val list62/title}"></figure> <figure><img src="noimg.png" alt="{val list62/title}"></figure> <h4>{val list62/title}</h4> <p> {val list62/info1/title}:{val list62/info1/value}<br> {val list62/info2/title}:{val list62/info2/value}<br> {val list62/info5/title}:{val list62/info5/value} </p> <span class="mark1">人気</span> <span class="mark2">NEW</span> </a> </div>  <h3>{val date7}（{val week7}）早番出勤</h3>  <div class="listlist"> <a href="index.php?act=staff&id={val list71/info_id}"> <figure><img src="user_data/{val list71/image1_file}" alt="{val list71/title}"></figure> <figure><img src="noimg.png" alt="{val list71/title}"></figure> <h4>{val list71/title}</h4> <p> {val list71/info1/title}:{val list71/info1/value}<br> {val list71/info2/title}:{val list71/info2/value}<br> {val list71/info5/title}:{val list71/info5/value} </p> <span class="mark1">人気</span> <span class="mark2">NEW</span> </a> </div>  <h3>{val date7}（{val week7}）遅番出勤</h3>  <div class="listlist"> <a href="index.php?act=staff&id={val list72/info_id}"> <figure><img src="user_data/{val list72/image1_file}" alt="{val list72/title}"></figure> <figure><img src="noimg.png" alt="{val list72/title}"></figure> <h4>{val list72/title}</h4> <p> {val list72/info1/title}:{val list72/info1/value}<br> {val list72/info2/title}:{val list72/info2/value}<br> {val list72/info5/title}:{val list72/info5/value} </p> <span class="mark1">人気</span> <span class="mark2">NEW</span> </a> </div>
▼スケジュール一覧ページの出力イメージです。※スタイルはテスト確認後にそちらで整えて下さい。

スタッフ詳細ページの編集に入ります

既存ファイルをコピペし、staff.htmlというファイル名のファイルを作成します。
メインコンテンツ内は空にしておいて下さい。
staff.htmlのhead内に以下のタグを追加します。
<script type="text/javascript"> function set_image(img) { document.getElementById('staff_image').src = img; } </script>
staff.htmlのメインブロック内に以下のタグを貼り付けます。
<h2>{val item/title}</h2> <div class="staffstaff"> <div class="leftleft">  <figure><img src="user_data/{val item/image1_file}" alt="{val item/title}" width="250" id="staff_image" class="mb15"></figure>   <img src="noimg.png" alt="no-image" width="250" class="mb15">   <p class="c">  <a href="javascript:set_image('user_data/{val item/image1_file}');"><img src="user_data/{val item/image1_file}" alt="" width="70" height="70"></a>   <a href="javascript:set_image('user_data/{val item/image2_file}');"><img src="user_data/{val item/image2_file}" alt="" width="70" height="70"></a>   <a href="javascript:set_image('user_data/{val item/image3_file}');"><img src="user_data/{val item/image3_file}" alt="" width="70" height="70"></a>   <a href="javascript:set_image('user_data/{val item/image4_file}');"><img src="user_data/{val item/image4_file}" alt="" width="70" height="70"></a>   <a href="javascript:set_image('user_data/{val item/image5_file}');"><img src="user_data/{val item/image5_file}" alt="" width="70" height="70"></a>  </p>  </div>  <div class="rightright"> <table class="ta1ta1"> <tr> <th colspan="2" class="tamidashi">プロフィール</th> </tr>  <tr> <th>{val item/info/title}</th> <td>{val item/info/value}</td> </tr>   <tr> <th>プロフィール</th> <td>{val item/contents}</td> </tr>   <tr> <th>オプション</th> <td>   <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>   [<a href="index.php?act=cast&kind={val item/kind}&special{val item/special/value}={val item/special/value}">{val item/special/title}</a>]    </td> </tr>  </table> </div>  </div>   <div class="staffstaff"> <table class="ta1ta1"> <tr> <th colspan="2" class="tamidashi">{val item/title}：出勤予定</th> </tr> <tr> <th>{val date1}({val week1})</th> <td>{val sche1}<br>>> <a href="?act=form&id={val item/info_id}&month={val month1}&day={val day1}">この日の簡易予約</a></td> </tr> <tr> <th>{val date2}({val week2})</th> <td>{val sche2}<br>>> <a href="?act=form&id={val item/info_id}&month={val month2}&day={val day2}">この日の簡易予約</a></td> </tr> <tr> <th>{val date3}({val week3})</th> <td>{val sche3}<br>>> <a href="?act=form&id={val item/info_id}&month={val month3}&day={val day3}">この日の簡易予約</a></td> </tr> <tr> <th>{val date4}({val week4})</th> <td>{val sche4}<br>>> <a href="?act=form&id={val item/info_id}&month={val month4}&day={val day4}">この日の簡易予約</a></td> </tr> <tr> <th>{val date5}({val week5})</th> <td>{val sche5}<br>>> <a href="?act=form&id={val item/info_id}&month={val month5}&day={val day5}">この日の簡易予約</a></td> </tr> <tr> <th>{val date6}({val week6})</th> <td>{val sche6}<br>>> <a href="?act=form&id={val item/info_id}&month={val month6}&day={val day6}">この日の簡易予約</a></td> </tr> <tr> <th>{val date7}({val week7})</th> <td>{val sche7}<br>>> <a href="?act=form&id={val item/info_id}&month={val month7}&day={val day7}">この日の簡易予約</a></td> </tr> </table> <p class="c"> <a href="?act=form&id={val item/info_id}"><input type="submit" value="簡易予約フォームへ" /></a> </p> </div>
▼スタッフ詳細ページの出力イメージです。※スタイルはテスト確認後にそちらで整えて下さい。

簡易予約フォームの編集に入ります

既存ファイルをコピペし、form.htmlというファイル名のファイルを作成します。
メインコンテンツ内は空にしておいて下さい。
メインブロック内に以下のタグを貼り付けます。
注意書きもそのまま入っていますが、実際の利用時には説明箇所は変更して下さい。
<h2>仮予約フォーム</h2> <p>※こちらのフォームは仮予約フォームです。フォームご利用後、当サイトからメールが入った時点でご予約決定になります。<br> ・・・等の説明を入れて下さい。</p>  <p class="color1">予約内容を送信しました。</p>   <p class="color1">※全項目入力必須です。</p>  <p class="color1">{val message}</p>  <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="ta1ta1"> <tr> <th>スタッフ</th> <td>{val item/title} (ID:{val item/info_id})</td> </tr> <tr> <th>お客様名</th> <td>  {val form/name}   <input type="text" name="name" size="30" class="ws" value="{val form/name}">  </td> </tr> <tr> <th>お客様メールアドレス</th> <td>  {val form/email}   <input type="text" name="email" size="50" class="ws" value="{val form/email}">  </td> </tr> <tr> <th>ご予約希望日</th> <td>  {val form/month}月{val form/day}日   <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>日  </td> </tr> <tr> <th>メッセージ</th> <td>  {val form/comment}   <textarea name="comment" cols="60" rows="8" class="wl">{rval form/comment}</textarea> <br /> ご希望の時間などはこちらにご記入下さい。  </td> </tr> </table> <div class="c">  <input type="submit" value="この内容で送信する">  <input type="button" value="修正する" onClick="location='?act=form_reinput&id={val item/info_id}'">   <input type="submit" value="確認する">  </div> </form>
▼簡易予約フォームの出力イメージです。※スタイルはテスト確認後にそちらで整えて下さい。

年齢制限ページを設ける場合は

Enter（入り口）ページはindex.htmlで準備し、Enterボタンのリンク先を、http://〜〜〜〜/index.phpにして下さい。
こうすることで、http://〜〜〜〜/でアクセスしてきた人は年齢制限ページをまず見ることになり、Enterを押したらCMSのトップページが開く順番になります。

サーバーにアップロードして動作確認

当然ですが、仮フォルダを作ってそちらで動作確認をして下さい。いきなり本番サイトへの上書きはしないように。
動作に問題なければcssなどお好みに合わせて調整しなおして下さい。

サンプルページのレイアウトが崩れている場合

既存サイトのスタイルより優先順位が低い場合、スタイルが反映されません。
!importantを加えてみて下さい。強制的に適用されます。
例：color: #FFF !important;

既存サイトのレイアウトが崩れている場合

CMS用で読み込んでいるcssファイルに同じスタイルがある可能性があるので確認して下さい。

CMSのマニュアル・FAQについては

マニュアルはこちら。
FAQ集はこちら。

どうしもうまくいかない場合

サポート掲示板からご質問下さい。無償サポートの範囲内で対応させて頂きます。

<< １つ前のページに戻る