自社デザインにCMSを組み込む方法

※ご利用の前にお読み下さい

初めてCMSをご利用になられる場合。
初めて当サイトのCMSをご利用になられる場合、必ず試用版を使ってご自身の環境でCMSが動作するか事前に確認しておいて下さい。
上級者向けの解説です。
htmlやcssを把握されているお客様向けの解説になります。スタイルはレイアウトが崩れない為の必要最低限の設定しか入っていませんので、ご自身での調整が必要となります。

下準備

土台のファイルの準備

土台にしたいデザインファイルを複製し、そちらでテストしていきます。
まず、CMSの土台とする為にindex.htmlだけを残し、他のhtmlは削除しておきます。

続いてindex.htmlのファイル名をindex_.html（※アンダーバーつき）に変更します。

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

tp-style.zipをダウンロード＆解凍します。
tp-style.cssはcssフォルダに、noimg.pngはimagesフォルダに移動して下さい。フォルダがない場合は新規で作って下さい。
index_.htmlにこのcssの読み込みタグを追加します。
以下は、tp-style.cssをcssフォルダに入れた場合の例です。

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

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

cms_files（フォルダ）
data（フォルダ）
upload（フォルダ）
user_data（フォルダ）
calender.php（ファイル）
index.php（ファイル）
setup.php（ファイル）

CMS用の設定

リンク先の変更

index_.htmlを開き、リンク先を試用版に合わせて変更します。
既に当サイトのCMSで運営中の場合は、ご自身の環境に応じて変更して下さい。

<a href="./">ホーム</a>
<a href="./?act=list&kind=1">お肉を使ったレシピ</a>
<a href="./?act=list&kind=1&info23=牛肉">牛肉レシピ</a>
<a href="./?act=list&kind=1&info23=豚肉">豚肉レシピ</a>
<a href="./?act=list&kind=1&info23=鶏肉">鶏肉レシピ</a>
<a href="./?act=list&kind=1&info23=ひき肉">ひき肉レシピ</a>
<a href="./?act=list&kind=2">お野菜を使ったレシピ</a>
<a href="./?act=list&kind=3">スイーツレシピ</a>
<a href="./?act=list&kind=2222">カレンダー</a>
<a href="./?act=list&kind=1111&limit=1000">よく頂く質問</a>
<a href="./?act=toiawase">お問い合わせ</a>

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

index_.htmlのメインコンテンツに、以下のコードをコピペして下さい。
<div class="tp-contents"> <h2>現在のレシピ投稿数</h2> <p>お肉レシピ：{val total/1}｜お野菜レシピ：{val total/2}｜スイーツレシピ：{val total/3}｜合計：{val total/total}</p> <h2>最新レシピ</h2> <h3>お肉レシピ</h3> <div class="tp-list-grid">  <div class="tp-list">  <figure><a href="?act=bukken&id={val list1/info_id}"><img src="user_data/{val list1/image20_file}" alt="{val list1/title}"></a></figure>   <figure><a href="?act=bukken&id={val list1/info_id}"><img src="images/noimg.png" alt="{val list1/title}"></a></figure>  <div class="tp-text"> <h4><a href="?act=bukken&id={val list1/info_id}">{val list1/title}</a></h4> <p class="tp-name"><a href="?act=list&ord=&html=list_user.html&top=0&page=&user_id={val list1/user_id}">{val list1/user_item4}</a></p> <p>{fval list1/contents|xtrancate}</p> </div> <span>NEW</span> <span>UP</span> <span>調理時間{val list1/info22/value}分</span> </div>  </div> <h3>野菜レシピ</h3> <div class="tp-list-grid">  <div class="tp-list">  <figure><a href="?act=bukken&id={val list2/info_id}"><img src="user_data/{val list2/image20_file}" alt="{val list2/title}"></a></figure>   <figure><a href="?act=bukken&id={val list2/info_id}"><img src="images/noimg.png" alt="{val list2/title}"></a></figure>  <div class="tp-text"> <h4><a href="?act=bukken&id={val list2/info_id}">{val list2/title}</a></h4> <p class="tp-name"><a href="?act=list&ord=&html=list_user.html&top=0&page=&user_id={val list2/user_id}">{val list2/user_item4}</a></p> <p>{fval list2/contents|xtrancate}</p> </div> <span>NEW</span> <span>UP</span> <span>調理時間{val list2/info22/value}分</span> </div>  </div> <h3>スイーツレシピ</h3> <div class="tp-list-grid">  <div class="tp-list">  <figure><a href="?act=bukken&id={val list3/info_id}"><img src="user_data/{val list3/image20_file}" alt="{val list3/title}"></a></figure>   <figure><a href="?act=bukken&id={val list3/info_id}"><img src="images/noimg.png" alt="{val list3/title}"></a></figure>  <div class="tp-text"> <h4><a href="?act=bukken&id={val list3/info_id}">{val list3/title}</a></h4> <p class="tp-name"><a href="?act=list&ord=&html=list_user.html&top=0&page=&user_id={val list3/user_id}">{val list3/user_item4}</a></p> <p>{fval list3/contents|xtrancate}</p> </div> <span>NEW</span> <span>UP</span> <span>調理時間{val list3/info22/value}分</span> </div>  </div> <h2>お知らせ</h2> <dl class="tp-new">  <dt>{val newinfo/rss_date}</dt>  <dd><a href="{val newinfo/url}"><strong>{val newinfo/title}</strong><span>NEW</span><br>{val newinfo/contents}</a></dd>   <dd><strong>{val newinfo/title}</strong><span>NEW</span><br>{val newinfo/contents}</dd>   </dl> </div>

続いて、サブコンテンツ内に、以下のコードをコピペして下さい。
（１カラムの場合は１カラム内に入れて頂き、レイアウトを調整して下さい。）
<div class="tp-contents">  <h3>最近チェックした情報</h3> <div class="tp-list-normal">  <div class="tp-list">  <figure><a href="?act=bukken&id={val history/info_id}"><img src="user_data/{val history/image20_file}" alt="{val history/title}"></a></figure>   <figure><a href="?act=bukken&id={val history/info_id}"><img src="images/noimg.png" alt="{val history/title}"></a></figure>  <div class="tp-text"> <h4> {val history/title} <span>NEW</span> <span>UP</span> </h4> </div> </div>  </div>  </div>

一覧ページ用（list.html）のタグを記載

index_.htmlファイルを複製し、ファイル名をlist.htmlに変更します。
list.htmlのメインコンテンツのコードを以下に置き換えます。
<div class="tp-contents"> <h2>{val title}<span>（{val counter/total}件）（0件）</span></h2> <ul class="mb30 disc"> <li>このページはテンプレート<span class="tp-color-check">list.html</span>を使用しています。list.htmlは一覧ページのデフォルトテンプレートなので管理画面での設定は不要です。</li> </ul> <form name="form1" method="get"> <input type="hidden" name="act" value="list"> <input type="hidden" name="ord" value="{val form/ord}"> <input type="hidden" name="kind" value="{val form/kind}"> <input type="hidden" name="limit" value="{val limit}"> <input type="hidden" name="html" value="{val html}"> <input type="hidden" name="top" value="{val top}"> <input type="hidden" name="page" value=""> <table class="tp-ta1"> <tr> <th>キーワード検索</th> <td><input type="input" name="info24" value="{val form/info24}" class="tp-ws"></td> </tr>  <tr> <th>こだわりで検索</th> <td>  <div class="tp-specialbox"> <label for="special{val form/special/no}"> <input type="checkbox" name="special{val form/special/no}" id="special{val form/special/no}" value="{val form/special/no}" checked>  <img src="icon/{val form/special/icon}" alt="{val form/special/title}" title="{val form/special/title}">   {val form/special/title}  </label> </div>   </td> </tr>  </table> <div class="tp-c tp-mb30"><input type="submit" value="この条件で検索" class="btn"> <input type="button" value="リセット" onClick="do_reset()" class="btn"></div> </form> <div class="tp-c"> 全<strong class="tp-color1">{val counter/total}</strong>件中　<strong class="tp-color1">{val counter/start}</strong>件目〜<strong class="tp-color1">{val counter/end}</strong>件目を表示中 該当するデータが見つかりませんでした<br><a href="javascript:history.back()"><< 前のページに戻る</a> </div> <div class="tp-list-grid">  <div class="tp-list">  <figure><a href="?act=bukken&id={val list/info_id}"><img src="user_data/{val list/image20_file}" alt="{val list/title}"></a></figure>   <figure><a href="?act=bukken&id={val list/info_id}"><img src="images/noimg.png" alt="{val list/title}"></a></figure>  <div class="tp-text"> <h4><a href="?act=bukken&id={val list/info_id}">{val list/title}</a>［動画あり］</h4> <p class="tp-name"><a href="?act=list&ord=&html=list_user.html&top=0&page=&user_id={val list/user_id}">投稿者：{val list/user_item4}</a></p> <p>{fval list/contents|xtrancate}</p> </div> <span>NEW</span> <span>UP</span> <span>調理時間{val list/info22/value}分</span> </div>  </div>  <div class="tp-pager">  <a href="javascript:do_page({val pager/prev/no})">＜前へ</a>   <span>＜前へ</span>   <a href="javascript:do_page(0)">先頭</a>    <a href="javascript:do_page({val pager/list/no})">{val pager/list/name}</a>   <span>{val pager/list/name}</span>    <a href="javascript:do_page({val pager/last/no})">最後</a>   <a href="javascript:do_page({val pager/next/no})">次へ＞</a>   <span>次へ＞</span>  </div>  </div>

続いて、head内に以下のjavascriptコードも入れます。
<script>  </script>

一覧ページ用（list_beef.html）のタグを記載

list.htmlファイルを複製し、ファイル名をlist_beef.htmlに変更します。
list_beef.htmlのメインコンテンツのコードを以下に置き換えます。
<div class="tp-contents"> <h2>{val title}（{val form/info23}）<span>（{val counter/total}件）（0件）</span></h2> <ul class="tp-mb30"> <li>このページはテンプレート<span class="tp-color-check">list_beef.html</span>を使用しています。list.html以外を一覧ページに使いたい場合は管理画面の「項目設定」でファイル名を指定する必要があります。</li> </ul> <form name="form1" method="get"> <input type="hidden" name="act" value="list"> <input type="hidden" name="ord" value="{val form/ord}"> <input type="hidden" name="kind" value="{val form/kind}"> <input type="hidden" name="limit" value="{val limit}"> <input type="hidden" name="html" value="{val html}"> <input type="hidden" name="top" value="{val top}"> <input type="hidden" name="page" value=""> <table class="tp-ta1"> <tr> <th>キーワード検索</th> <td><input type="input" name="info24" value="{val form/info24}" class="tp-ws"></td> </tr>  <tr> <th>こだわりで検索</th> <td>  <div class="tp-specialbox"> <label for="special{val form/special/no}"> <input type="checkbox" name="special{val form/special/no}" id="special{val form/special/no}" value="{val form/special/no}" checked>  <img src="icon/{val form/special/icon}" alt="{val form/special/title}" title="{val form/special/title}">   {val form/special/title}  </label> </div>   </td> </tr>  </table> <div class="tp-c tp-mb30"><input type="submit" value="この条件で検索" class="btn"> <input type="button" value="リセット" onClick="do_reset()" class="btn"></div> </form> <div class="tp-c"> 全<strong class="tp-color1">{val counter/total}</strong>件中　<strong class="tp-color1">{val counter/start}</strong>件目〜<strong class="tp-color1">{val counter/end}</strong>件目を表示中 該当するデータが見つかりませんでした<br><a href="javascript:history.back()"><< 前のページに戻る</a> </div> <div class="tp-list-grid">  <div class="tp-list">  <figure><a href="?act=bukken&id={val list/info_id}"><img src="user_data/{val list/image20_file}" alt="{val list/title}"></a></figure>   <figure><a href="?act=bukken&id={val list/info_id}"><img src="images/noimg.png" alt="{val list/title}"></a></figure>  <div class="tp-text"> <h4><a href="?act=bukken&id={val list/info_id}">{val list/title}</a>［動画あり］</h4> <p class="tp-name"><a href="?act=list&ord=&html=list_user.html&top=0&page=&user_id={val list/user_id}">投稿者：{val list/user_item4}</a></p> <p>{fval list/contents|xtrancate}</p> </div> <span>NEW</span> <span>UP</span> <span>調理時間{val list/info22/value}分</span> </div>  </div>  <div class="tp-pager">  <a href="javascript:do_page({val pager/prev/no})">＜前へ</a>   <span>＜前へ</span>   <a href="javascript:do_page(0)">先頭</a>    <a href="javascript:do_page({val pager/list/no})">{val pager/list/name}</a>   <span>{val pager/list/name}</span>    <a href="javascript:do_page({val pager/last/no})">最後</a>   <a href="javascript:do_page({val pager/next/no})">次へ＞</a>   <span>次へ＞</span>  </div>  </div>

一覧ページ用（list_sweets.html）のタグを記載

list_beef.htmlファイルを複製し、ファイル名をlist_sweets.htmlに変更します。
list_sweets.htmlのメインコンテンツのコードを以下に置き換えます。
<div class="tp-contents"> <h2>{val title}<span>（{val counter/total}件）（0件）</span></h2> <ul class="tp-mb30"> <li>このページはテンプレート<span class="tp-color-check">list_sweets.html</span>を使用しています。list.html以外を一覧ページに使いたい場合は管理画面の「項目設定」でファイル名を指定する必要があります。</li> </ul> <form name="form1" method="get"> <input type="hidden" name="act" value="list"> <input type="hidden" name="ord" value="{val form/ord}"> <input type="hidden" name="kind" value="{val form/kind}"> <input type="hidden" name="limit" value="{val limit}"> <input type="hidden" name="html" value="{val html}"> <input type="hidden" name="top" value="{val top}"> <input type="hidden" name="page" value=""> <table class="tp-ta1"> <tr> <th>キーワード検索</th> <td><input type="input" name="info24" value="{val form/info24}" class="tp-ws"></td> </tr> <tr> <th>調理時間で検索</th> <td> <select name="info22HL"> <option value="">指定しない</option> <option value="10 10" selected="selected">〜10分</option> <option value="10 30" selected="selected">〜30分</option> <option value="10 60" selected="selected">〜60分</option> <option value="10 90" selected="selected">〜90分</option> <option value="10 120" selected="selected">〜120分</option> <option value="121 121" selected="selected">120分以上</option> </select> </td> </tr>  <tr> <th>こだわりで検索</th> <td>  <div class="tp-specialbox"> <label for="special{val form/special/no}"> <input type="checkbox" name="special{val form/special/no}" id="special{val form/special/no}" value="{val form/special/no}" checked>  <img src="icon/{val form/special/icon}" alt="{val form/special/title}" title="{val form/special/title}">   {val form/special/title}  </label> </div>   </td> </tr>  </table> <div class="tp-c tp-mb30"><input type="submit" value="この条件で検索" class="btn"> <input type="button" value="リセット" onClick="do_reset()" class="btn"></div> </form> <div class="tp-c"> 全<strong class="tp-color1">{val counter/total}</strong>件中　<strong class="tp-color1">{val counter/start}</strong>件目〜<strong class="tp-color1">{val counter/end}</strong>件目を表示中 該当するデータが見つかりませんでした<br><a href="javascript:history.back()"><< 前のページに戻る</a> </div> <div class="tp-list-grid">  <div class="tp-list">  <figure><a href="?act=bukken&id={val list/info_id}"><img src="user_data/{val list/image20_file}" alt="{val list/title}"></a></figure>   <figure><a href="?act=bukken&id={val list/info_id}"><img src="images/noimg.png" alt="{val list/title}"></a></figure>  <div class="tp-text"> <h4><a href="?act=bukken&id={val list/info_id}">{val list/title}</a>［動画あり］</h4> <p class="tp-name"><a href="?act=list&ord=&html=list_user.html&top=0&page=&user_id={val list/user_id}">投稿者：{val list/user_item4}</a></p> <p>{fval list/contents|xtrancate}</p> </div> <span>NEW</span> <span>UP</span> <span>調理時間{val list/info22/value}分</span> </div>  </div>  <div class="tp-pager">  <a href="javascript:do_page({val pager/prev/no})">＜前へ</a>   <span>＜前へ</span>   <a href="javascript:do_page(0)">先頭</a>    <a href="javascript:do_page({val pager/list/no})">{val pager/list/name}</a>   <span>{val pager/list/name}</span>    <a href="javascript:do_page({val pager/last/no})">最後</a>   <a href="javascript:do_page({val pager/next/no})">次へ＞</a>   <span>次へ＞</span>  </div>  </div>

一覧ページ用（list_vegetable.html）のタグを記載

list_sweets.htmlファイルを複製し、ファイル名をlist_vegetable.htmlに変更します。
list_vegetable.htmlのメインコンテンツのコードを以下に置き換えます。
<div class="tp-contents"> <h2>{val title}<span>（{val counter/total}件）（0件）</span></h2> <ul class="tp-mb30"> <li>このページはテンプレート<span class="tp-color-check">list_vegetable.html</span>を使用しています。list.html以外を一覧ページに使いたい場合は管理画面の「項目設定」でファイル名を指定する必要があります。</li> </ul> <form name="form1" method="get"> <input type="hidden" name="act" value="list"> <input type="hidden" name="ord" value="{val form/ord}"> <input type="hidden" name="kind" value="{val form/kind}"> <input type="hidden" name="limit" value="{val limit}"> <input type="hidden" name="html" value="{val html}"> <input type="hidden" name="top" value="{val top}"> <input type="hidden" name="page" value=""> <table class="tp-ta1"> <tr> <th>キーワード検索</th> <td><input type="input" name="info24" value="{val form/info24}" class="tp-ws"></td> </tr> <tr> <th>調理時間で検索</th> <td> <select name="info22HL"> <option value="">指定しない</option> <option value="10 10" selected="selected">〜10分</option> <option value="10 15" selected="selected">〜15分</option> <option value="10 30" selected="selected">〜30分</option> <option value="10 60" selected="selected">〜60分</option> <option value="61 61" selected="selected">60分以上</option> </select> </td> </tr>  <tr> <th>こだわりで検索</th> <td>  <div class="tp-specialbox"> <label for="special{val form/special/no}"> <input type="checkbox" name="special{val form/special/no}" id="special{val form/special/no}" value="{val form/special/no}" checked>  <img src="icon/{val form/special/icon}" alt="{val form/special/title}" title="{val form/special/title}">   {val form/special/title}  </label> </div>   </td> </tr>  </table> <div class="tp-c tp-mb30"><input type="submit" value="この条件で検索" class="btn"> <input type="button" value="リセット" onClick="do_reset()" class="btn"></div> </form> <div class="tp-c"> 全<strong class="tp-color1">{val counter/total}</strong>件中　<strong class="tp-color1">{val counter/start}</strong>件目〜<strong class="tp-color1">{val counter/end}</strong>件目を表示中 該当するデータが見つかりませんでした<br><a href="javascript:history.back()"><< 前のページに戻る</a> </div> <div class="tp-list-grid">  <div class="tp-list">  <figure><a href="?act=bukken&id={val list/info_id}"><img src="user_data/{val list/image20_file}" alt="{val list/title}"></a></figure>   <figure><a href="?act=bukken&id={val list/info_id}"><img src="images/noimg.png" alt="{val list/title}"></a></figure>  <div class="tp-text"> <h4><a href="?act=bukken&id={val list/info_id}">{val list/title}</a>［動画あり］</h4> <p class="tp-name"><a href="?act=list&ord=&html=list_user.html&top=0&page=&user_id={val list/user_id}">投稿者：{val list/user_item4}</a></p> <p>{fval list/contents|xtrancate}</p> </div> <span>NEW</span> <span>UP</span> <span>調理時間{val list/info22/value}分</span> </div>  </div>  <div class="tp-pager">  <a href="javascript:do_page({val pager/prev/no})">＜前へ</a>   <span>＜前へ</span>   <a href="javascript:do_page(0)">先頭</a>    <a href="javascript:do_page({val pager/list/no})">{val pager/list/name}</a>   <span>{val pager/list/name}</span>    <a href="javascript:do_page({val pager/last/no})">最後</a>   <a href="javascript:do_page({val pager/next/no})">次へ＞</a>   <span>次へ＞</span>  </div>  </div>

一覧ページ用（list_user.html）のタグを記載

list_vegetable.htmlファイルを複製し、ファイル名をlist_user.htmlに変更します。
list_user.htmlのメインコンテンツのコードを以下に置き換えます。
<div class="tp-contents"> <h2> 『{val user_info/name}』さんの投稿レシピ （{val counter/total}件） （0件） </h2> <ul class="tp-mb30"> <li>このページはテンプレート<span class="color-check">list_user.html</span>を使用しています。list.html以外を一覧ページに使いたい場合は管理画面の「項目設定」でファイル名を指定する必要があります。</li> </ul> <form name="form1" method="get"> <input type="hidden" name="act" value="list"> <input type="hidden" name="ord" value="{val form/ord}"> <input type="hidden" name="kind" value="{val form/kind}"> <input type="hidden" name="limit" value="{val limit}"> <input type="hidden" name="html" value="{val html}"> <input type="hidden" name="top" value="{val top}"> <input type="hidden" name="page" value=""> </form> <div class="tp-c"> 全<strong class="tp-color1">{val counter/total}</strong>件中　<strong class="tp-color1">{val counter/start}</strong>件目〜<strong class="tp-color1">{val counter/end}</strong>件目を表示中 該当するデータが見つかりませんでした<br><a href="javascript:history.back()"><< 前のページに戻る</a> </div> <div class="tp-list-grid">  <div class="tp-list">  <figure><a href="?act=bukken&id={val list/info_id}"><img src="user_data/{val list/image20_file}" alt="{val list/title}"></a></figure>   <figure><a href="?act=bukken&id={val list/info_id}"><img src="images/noimg.png" alt="{val list/title}"></a></figure>  <div class="tp-text"> <h4><a href="?act=bukken&id={val list/info_id}">{val list/title}</a>［動画あり］</h4> <p class="tp-name"><a href="?act=list&ord=&html=list_user.html&top=0&page=&user_id={val list/user_id}">投稿者：{val list/user_item4}</a></p> <p>{fval list/contents|xtrancate}</p> </div> <span>NEW</span> <span>UP</span> <span>調理時間{val list/info22/value}分</span> </div>  </div>  <div class="tp-pager">  <a href="javascript:do_page({val pager/prev/no})">＜前へ</a>   <span>＜前へ</span>   <a href="javascript:do_page(0)">先頭</a>    <a href="javascript:do_page({val pager/list/no})">{val pager/list/name}</a>   <span>{val pager/list/name}</span>    <a href="javascript:do_page({val pager/last/no})">最後</a>   <a href="javascript:do_page({val pager/next/no})">次へ＞</a>   <span>次へ＞</span>  </div>  </div>

一覧ページ用（list_faq.html）のタグを記載

list_user.htmlファイルを複製し、ファイル名をlist_faq.htmlに変更します。
list_faq.htmlのメインコンテンツのコードを以下に置き換えます。
<div class="tp-contents"> <h2>{val title}</h2> <ul class="tp-mb30"> <li>このページはテンプレート<span class="tp-color-check">list_faq.html</span>を使用しています。list.html以外を一覧ページに使いたい場合は管理画面の「項目設定」でファイル名を指定する必要があります。</li> </ul> <form name="form1" method="get"> <input type="hidden" name="act" value="list"> <input type="hidden" name="ord" value="{val form/ord}"> <input type="hidden" name="kind" value="{val form/kind}"> <input type="hidden" name="limit" value="{val limit}"> <input type="hidden" name="html" value="{val html}"> <input type="hidden" name="top" value="{val top}"> <input type="hidden" name="page" value=""> </form> <dl class="tp-faq">  <dt>{val list/title}</dt> <dd>{val list/contents}</dd>  </dl>  <div class="tp-pager">  <a href="javascript:do_page({val pager/prev/no})"><< 前へ</a>   <span><< 前へ</span>   <a href="javascript:do_page(0)">先頭</a>    <a href="javascript:do_page({val pager/list/no})">{val pager/list/name}</a>   <span>{val pager/list/name}</span>    <a href="javascript:do_page({val pager/last/no})">最後</a>   <a href="javascript:do_page({val pager/next/no})">次へ >></a>   <span>次へ >></span>  </div>  </div>

一覧ページ用（calender.html）のタグを記載

list_faq.htmlファイルを複製し、ファイル名をcalender.htmlに変更します。
calender.htmlのメインコンテンツのコードを以下に置き換えます。
<div class="tp-contents"> <h2>{val title}</h2> <ul class="tp-mb30"> <li>このページはテンプレート<span class="tp-color-check">calender.html</span>を使用しています。list.html以外を一覧ページに使いたい場合は管理画面の「項目設定」でファイル名を指定する必要があります。</li> <li>2023年<a href="./?act=list&kind=2222&y=2023&m=11">11月</a>と<a href="./?act=list&kind=2222&y=2023&m=12">12月</a>、2024年<a href="./?act=list&kind=2222&y=2024&m=01">1月</a>と<a href="./?act=list&kind=2222&y=2024&m=05">5月</a>にデモデータが入っています。<br> 詳細ページで使用可能な出力レイアウトのサンプル一式は<a href="?act=list&kind=2222&y=2024&m=04">2024年4月1日</a>のデータに入っています。</li> </ul>  <table class="tp-cal3"> <caption>{val m}月</caption>  <tr> <th>{val week/d}({val week/w})</th> <td>{val week/text}</td> </tr>  </table> <ul class="tp-cal-btn"> <li>< 前の週</li> <li>次の週 ></li> </ul>   <table class="tp-cal2"> <caption>{val y}年{val m}月</caption> <tr> <th>日</th> <th>月</th> <th>火</th> <th>水</th> <th>木</th> <th>金</th> <th>土</th> </tr>  <tr>  <td>{val month/week/day/d}<br>  <a href="{val month/week/day/info/link}">{val month/week/day/info/text}</a>  </td>  </tr>  </table> <ul class="tp-cal-btn">  <li><a href="{val prev_ym}">< 前月</a></li>   <li><a href="{val next_ym}">次月 ></a></li>  </ul>    <div style="float:left;margin:20px;width:300px;height:270px"> <table class="tp-cal1"> <caption>{val year/m}月</caption> <tr> <th>日</th> <th>月</th> <th>火</th> <th>水</th> <th>木</th> <th>金</th> <th>土</th> </tr>  <tr>  <td>{val year/week/day/d}</td>  </tr>  </table> </div>   </div>

詳細ページ（item.html）用のタグを記載

calender.htmlファイルを複製し、ファイル名をitem.htmlに変更します。
item.htmlのメインコンテンツのコードを以下に置き換えます。
<div class="tp-contents"> <article> <h2>{val item/title}</h2> <ul class="tp-mb30 tp-disc"> <li>このページはテンプレート<span class="color-check">item.html</span>を使用しています。item.htmlは詳細ページのデフォルトテンプレートなので管理画面での設定は不要です。</li> <li>このページが不要な場合は、list.htmlからのリンク要素を外して下さい。その場合、当ページも不要になるのでファイルを削除して下さい。</li> </ul>  <figure class="tp-c tp-mb30"> <img src="user_data/{val item/image20_file}" id="bukken_image" class="tp-mb30" alt=""><br> <p id="bukken_title" class="tp-c">{val item/image20_title}</p> <p class="tp-c tp-mb30">  <a href="javascript:set_image('user_data/{val item/image20_file}', '{val item/image20_title}');"><img src="user_data/{val item/image20_file}" width="70" alt=""></a>   <a href="javascript:set_image('user_data/{val item/image17_file}', '{val item/image17_title}');"><img src="user_data/{val item/image17_file}" width="70" alt=""></a>   <a href="javascript:set_image('user_data/{val item/image18_file}', '{val item/image18_title}');"><img src="user_data/{val item/image18_file}" width="70" alt=""></a>   <a href="javascript:set_image('user_data/{val item/image19_file}', '{val item/image19_title}');"><img src="user_data/{val item/image19_file}" width="70" alt=""></a>  </p> </figure>  <h2>{val item/info21/title}</h2> <p>{val item/info21/value}</p> <h2>こだわり</h2> <p>  <a href="?act=list&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}" title="{val item/special/title}"></a>   <a href="?act=list&kind={val item/kind}&special{val item/special/value}={val item/special/value}">{val item/special/title}</a>、   </p> <h2>更新日時</h2> <p>登録：{val item/regdate/0}年{val item/regdate/1}月{val item/regdate/2}日 {val item/regtime/0}時{val item/regtime/1}分<br> 更新：{val item/update/0}年{val item/update/1}月{val item/update/2}日 {val item/uptime/0}時{val item/uptime/1}分</p>   <p><video controls="" src="user_data/{val video/file_file/save_name}">{val video/file_file/title}</video></p> <p>{val video/file_file/title}</p>   <h2>作り方（レシピ投稿者：{val item/user_item4}）</h2> <ul>  <li class="tp-mb30">{val item/info1/value}<br><img src="user_data/{val item/image1_file}" alt="" width="200"> </li>   <li class="tp-mb30">{val item/info2/value}<br><img src="user_data/{val item/image2_file}" alt="" width="200"> </li>   <li class="tp-mb30">{val item/info3/value}<br><img src="user_data/{val item/image3_file}" alt="" width="200"> </li>   <li class="tp-mb30">{val item/info4/value}<br><img src="user_data/{val item/image4_file}" alt="" width="200"> </li>   <li class="tp-mb30">{val item/info5/value}<br><img src="user_data/{val item/image5_file}" alt="" width="200"> </li>   <li class="tp-mb30">{val item/info6/value}<br><img src="user_data/{val item/image6_file}" alt="" width="200"> </li>   <li class="tp-mb30">{val item/info7/value}<br><img src="user_data/{val item/image7_file}" alt="" width="200"> </li>   <li class="tp-mb30">{val item/info8/value}<br><img src="user_data/{val item/image8_file}" alt="" width="200"> </li>   <li class="tp-mb30">{val item/info9/value}<br><img src="user_data/{val item/image9_file}" alt="" width="200"> </li>   <li class="tp-mb30">{val item/info10/value}<br><img src="user_data/{val item/image10_file}" alt="" width="200"> </li>  </ul>  <h2>PDF資料</h2> <p><a href="?act=get_file&id={val item/pdf}">{val item/pdf_file/title}</a></p>    <h2>{val image/file/title}</h2> <p><img src="user_data/{val image/file_file/save_name}" alt="{val image/file_file/title}"></p> <p>{val image/file_file/title}</p>     <h2>{val audio/file/title}</h2> <p><audio controls="" src="user_data/{val audio/file_file/save_name}">{val audio/file_file/title}</audio></p> <p>{val audio/file_file/title}</p>     <h2>{val panorama/file/title}</h2> <div class="ofx"> <div id="panorama{val panorama/no}" class="panorama-img"></div> </div> <script> pannellum.viewer('panorama{val panorama/no}' , { "type": "equirectangular", "panorama": "user_data/{val panorama/file_file/save_name}", "autoLoad": true }); </script> <p>{val panorama/file_file/title}</p>     <h2>{val other/file/title}</h2> <p><a href="?act=get_file&id={val other/file/value}">{val other/file_file/title}</a></p>    <h2>地図</h2> <p><iframe src="https://maps.google.co.jp/maps?hl=ja&ll={val item/latlon}&q={val item/latlon}&ie=UTF8&t=m&&z=14&output=embed" width="600" height="400" frameborder="0" style="border:0" allowfullscreen></iframe></p>  <p class="tp-c tp-clear tp-btn"> <a href="?act=toiawase&id={val item/info_id}">{val item/user_item4}さんに<br>リクエスト・応援メッセージを送る</a> </p> </article> </div>

続いて、head内に以下のコードも入れます。
（※calender.htmlに入っていたhead内のコードは削除。）
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pannellum@2.5.6/build/pannellum.css"> <script src="https://cdn.jsdelivr.net/npm/pannellum@2.5.6/build/pannellum.js"></script> <script> function set_image(img, title) { document.getElementById('bukken_image').src = img; document.getElementById('bukken_title').innerHTML = title; } </script>

詳細ページ（kiji.html）用のタグを記載

item.htmlファイルを複製し、ファイル名をkiji.htmlに変更します。
kiji.htmlのメインコンテンツのコードを以下に置き換えます。
<div class="tp-contents"> <ul class="tp-mb30"> <li>このページはテンプレート<span class="tp-color-check">kiji.html</span>を使用しています。item.html以外を詳細ページに使いたい場合は管理画面の「項目設定」でファイル名を指定する必要があります。</li> </ul>    <section>  <h2>{val kiji/title}</h2>   <figure><img src="user_data/{val kiji/image}" alt=""></figure>   <h3>{val kiji/subtitle}</h3>   <p>{val kiji/contents}</p>  </section>    <section>  <h2>{val kiji/title}</h2>   <h3>{val kiji/subtitle}</h3>   <p>{val kiji/contents}</p>   <figure><img src="user_data/{val kiji/image}" alt=""></figure>  </section>    <section>  <h2>{val kiji/title}</h2>  <div class="tp-list-half"> <div class="tp-list"> <div class="tp-text">  <h4 class="mb1rem">{val kiji/subtitle}</h4>   <p>{val kiji/contents}</p>  </div>  <div class="tp-image-l"> <figure><img src="user_data/{val kiji/image}" alt=""></figure> </div>  </div> </div> </section>    <section>  <h2>{val kiji/title}</h2>  <div class="tp-list-half"> <div class="tp-list"> <div class="tp-text">  <h4 class="mb1rem">{val kiji/subtitle}</h4>   <p>{val kiji/contents}</p>  </div> <div class="tp-image-r"> <figure><img src="user_data/{val kiji/image}" alt=""></figure> </div> </div> </div> </section>    <section>  <h2>{val kiji/title}</h2>  <ul>  <li>{val kiji/contents}</li>  </ul> </section>    <section>  <h2>{val kiji/title}</h2>  <div class="tp-list-normal"> <div class="tp-list">  <figure><img src="user_data/{val kiji/image}" alt=""></figure>  <div>  <h4 class="mb1rem">{val kiji/subtitle}</h4>   <p>{val kiji/contents}</p>  </div> </div> </div> </section>    <section>  <h2>{val kiji/title}</h2>  <div class="tp-list-normal"> <div class="tp-list">  <figure><img src="user_data/{val kiji/image}" alt=""></figure>  <div>  <h4 class="mb1rem">{val kiji/subtitle}</h4>  <dl class="tp-line">  <dt>{val kiji/contents/0}</dt> <dd>{val kiji/contents/1}</dd>  </dl> </div> </div> </div> </section>    <section>  <h2>{val kiji/title}</h2>  <table class="tp-ta1">  <caption>{val kiji/subtitle}</caption>   <tr> <th>{val kiji/contents/0}</th> <td>{val kiji/contents/1}</td> </tr>  </table> </section>   </div>

フォーム用（toiawase.html）のタグを記載

kiji.html（※どのhtmlでも構いません）を複製し、ファイル名をtoiawase.htmlに変更します。
toiawase.htmlのメインコンテンツに、以下のコードをコピペして下さい。
（head内にCMS用のコードがある場合は不要なので、削除しておきます。）
<div class="tp-contents"> <h2> リクエスト・応援メッセージ フォーム </h2>  <p>メッセージを送信しました。</p>    <p class="tp-color-check">※全項目入力必須です。</p>   <p class="tp-color-check">{val message}</p>  <form name="form1" method="post" action="?act=toiawase"> <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 form/name}   <input type="text" name="name" size="30" class="tp-ws" value="{val form/name}">  </td> </tr> <tr> <th>メールアドレス</th> <td>  {val form/email}   <input type="text" name="email" size="50" class="tp-ws" value="{val form/email}">  </td> </tr> <tr> <th>メッセージ</th> <td>  {val form/comment}   <textarea name="comment" cols="60" rows="8" class="tp-wl">{rval form/comment}</textarea>  </td> </tr> </table> <div class="tp-c">  <input type="submit" value="この内容で送信する"> <input type="button" value="戻る" onClick="document.form1.action='?act=toiawase_reinput';document.form1.mode.value='';document.form1.submit()">   <input type="submit" value="確認する">  </div> </form>  </div>

設定は以上です

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

自社デザインにレシピ投稿テーマを組み込む会員登録(ベーシック)