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

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

CMSが使えるかの確認
下準備
全ページ共通の編集作業
トップページの編集
一覧ページ（デフォルト用）の準備
一覧ページ（求人用）の準備
一覧ページ（不動産：売買物件用）の準備
一覧ページ（不動産：賃貸物件用）の準備
一覧ページ（サブブロックの「お知らせ一覧」からのリンク先）の準備
一覧ページ（ユーザーごとの登録情報一覧）の準備
詳細ページ（デフォルト用）の準備
詳細ページ（求人用）の準備
詳細ページ（不動産用）の準備
詳細ページ（サブブロックの「お知らせ一覧」のリンク先からの詳細ページ）の準備
フォームの準備
動作確認、その他注意事項など

カテゴリーは自由に変更できます。
当マニュアルは、CMS試用版を組み込むための設定なので「不動産」や「求人」などの具体例となっていますが、ページ構成や出力レイアウトは自由に変更できます。
詳しくはポータル向けCMSマニュアルをご覧下さい。

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

CMSがあなたのサーバーで動くか、試用版を試して下さい。
※試用版が動作しない場合は、弊社CMSは使えません。
試用版を試す

下準備

あなたのサイトの文字コードが「UTF-8」になっているか確認して下さい。
htmlの上の方に、<meta charset="UTF-8">など、「UTF-8」の文字があれば問題ありません。
文字コードに問題なければ、冒頭のステップでテストをした「試用版」ファイルから以下だけ抜き出し、あなたのサイトフォルダに移動して下さい。
※同じフォルダ名やファイル名があると上書きされてしまいます。ご注意下さい。
続いて、original_sampleset.zipをダウンロード＆解凍します。
original_sampleset.zipのダウンロード

画像がない場合の代替画像(noimg.png)と、スタイルシート(stylestyle.css)の２枚のファイルが入っています。
cssは、オリジナルデザインにCMSを組み込みやすくする為に弊社で用意したものです。後で変更して頂いて構いません。
こちらの２枚のファイルもあなたのサイトに移動して下さい。
以下より、あなたのサイトの編集作業に入ります。

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

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

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

※cssファイル名は任意のものに変更して頂いても構いません。変更の際は、cssファイル本体のファイル名も変更しておきましょう。
他、例えばcssフォルダがある場合は「css/stylestyle.css」としてもらっても構いません。この場合も、指定した階層に移動するのを忘れず。
トップページへのリンク先を全て「<a href="./">」に変更。
CMS出力用のメニューとリンクを設定。liタグを使うなど、今使っているサイトのコーディングに合わせて調整して下さい。
※以下は試用版を試すための設定です。項目は変更できます。
<ul> <li><a href="./?act=list&kind=101">飲食店を探す</a></li> <li><a href="./?act=list&kind=301">求人を探す</a></li> <li><a href="./?act=list&kind=201">病院を探す</a></li> <li><a href="./?act=list&kind=401">習い事を探す</a></li> </ul> <ul> <li><a href="./?act=list&kind=1">売買物件を探す</a></li> <li><a href="./?act=list&kind=2">賃貸物件を探す</a></li> </ul> <ul> <li><a href="./?act=toiawase">お問い合わせ</a></li> </ul>
▼出力イメージです。※スタイルはテスト確認後にそちらで整えて下さい。
サブブロックに「管理者おすすめサイト」と「お知らせ」の出力用タグを追加。
<section> <h2>管理者おすすめサイト</h2>  <div class="list-sub"> <a href="{val option12/info1/value}" target="_blank">  <p class="img"><img src="user_data/{val option12/image1_file}" alt="{val option12/title}"></p>  <h4>{val option12/title}</h4> <p>{val option12/contents}</p> <span class="new">new</span> </a> </div>  </section> <section> <h2>お知らせ</h2>  <div class="list-sub"> <a href="?act=bukken&id={val option11/info_id}">  <p class="img t"><img src="user_data/{val option11/image1_file}" alt="{val option11/title}"></p>  <h4>{val option11/title}</h4> <p>{val option11/contents}</p> <p class="name">{val option11/info1/value}</p> </a> </div>  <p class="c"><a href="./?act=list&kind=1001">お知らせ一覧</a></p> </section>
▼出力イメージです。※スタイルはテスト確認後にそちらで整えて下さい。

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

トップページ（通常はindex.html）のファイル名をindex_.htmlとアンダーバー入りに変更。
index_.htmlのファイル名は変更しないで下さい。
プログラムがこのファイルをトップページとして読み込んで出力しますので、ファイル名は変更しないで下さい。また、他にindex.htmlがあるとそちらが優先表示されてしまいますので、作らないように。index_.htmlというファイル名ですが、実際にこのファイルにアクセスする事はありません。通常のindex.html同様、http://〜〜〜/で開きます。
index_.htmlを開き、現在の情報件数を出力するタグを追加。
<section> <h2>地域の情報検索サイト</h2> <ul> <li><a href="./?act=list&kind=101">飲食店情報…{val total/101}0件</a></li> <li><a href="./?act=list&kind=301">求人情報…{val total/301}0件</a></li> <li><a href="./?act=list&kind=201">病院情報…{val total/201}0件</a></li> <li><a href="./?act=list&kind=401">習い事情報…{val total/401}0件</a></li> </ul> <h2>地域の不動産情報</h2> <ul> <li><a href="./?act=list&kind=1">不動産情報（売買）…{val total/1}0件</a></li> <li><a href="./?act=list&kind=2">不動産情報（賃貸）…{val total/2}0件</a></li> </ul> </section>
▼出力イメージです。※スタイルはテスト確認後にそちらで整えて下さい。
お知らせ欄の出力タグを追加。
<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>  
▼出力イメージです。※スタイルはテスト確認後にそちらで整えて下さい。
新着不動産情報のタグを追加。
<section> <h2>新着不動産情報</h2> <h3>売買物件</h3>  <div class="list-compact">  <p class="img"><a href="?act=bukken&id={val list1/info_id}"><img src="user_data/{val list1/image1_file}" alt="{val list1/title}"></a></p>   <p class="img"><a href="?act=bukken&id={val list1/info_id}"><img src="images/noimg.png" alt="{val list1/title}"></a></p>  <h4><a href="?act=bukken&id={val list1/info_id}">{val list1/title}</a></h4> <p>{val list1/contents}</p> <p class="name"><a href="?act=bukken&id={val list1/info_id}">{val list1/info1/value}</a></p> </div>  <h3>賃貸物件</h3>  <div class="list-compact">  <p class="img"><a href="?act=bukken&id={val list2/info_id}"><img src="user_data/{val list2/image1_file}" alt="{val list2/title}"></a></p>   <p class="img"><a href="?act=bukken&id={val list2/info_id}"><img src="images/noimg.png" alt="{val list2/title}"></a></p>  <h4><a href="?act=bukken&id={val list2/info_id}">{val list2/title}</a></h4> <p>{val list2/contents}</p> <p class="name"><a href="?act=bukken&id={val list2/info_id}">{val list2/info1/value}</a></p> </div>  </section>
▼出力イメージです。※スタイルはテスト確認後にそちらで整えて下さい。
不動産以外の新着情報のタグを追加。
<section> <h2>新着求人情報</h2>  <div class="list-list"> <h4><a href="?act=bukken&id={val list301/info_id}">{val list301/title}</a></h4> <p>{val list301/contents}</p> <p class="name"><a href="?act=bukken&id={val list301/info_id}">{val list301/info1/value}</a></p> </div>  </section> <section> <h2>新着飲食店情報</h2>  <div class="list-list"> <h4><a href="?act=bukken&id={val list101/info_id}">{val list101/title}</a></h4> <p>{val list101/contents}</p> <p class="name"><a href="?act=bukken&id={val list101/info_id}">{val list101/info1/value}</a></p> </div>  </section> <section> <h2>新着病院情報</h2>  <div class="list-list"> <h4><a href="?act=bukken&id={val list201/info_id}">{val list201/title}</a></h4> <p>{val list201/contents}</p> <p class="name"><a href="?act=bukken&id={val list201/info_id}">{val list201/info1/value}</a></p> </div>  </section> <section> <h2>新着習い事情報</h2>  <div class="list-list"> <h4><a href="?act=bukken&id={val list401/info_id}">{val list401/title}</a></h4> <p>{val list401/contents}</p> <p class="name"><a href="?act=bukken&id={val list401/info_id}">{val list401/info1/value}</a></p> </div>  </section>
▼出力イメージです。※スタイルはテスト確認後にそちらで整えて下さい。

続いて一覧ページ（デフォルト用）の準備に入ります

list.htmlは、管理ページで専用のテンプレートを指定しない場合に適用される一覧ページ用デフォルトテンプレートになります。
試用版CMSでは、「飲食店」「病院」「習い事」がこのlist.htmlにより出力されています。
残りの「病院」「不動産」「お知らせ(サブブロック)」はそれぞれ専用のhtmlテンプレートを別途準備し、管理ページで指定しています。

既存ファイルをコピペし、list.htmlというファイル名のファイルを作成します。
メインコンテンツ内は空にしておいて下さい。
list.htmlのhead内に以下のタグを追加します。
<script>  </script>
list.htmlのメインブロック内に以下のタグを貼り付けます。
<section> <h2> 『{val user_info/name}』の登録情報 {val title}<span>（{val counter/total}件）（0件）</span> </h2> <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="ta1ta1"> <tr> <th>都道府県で検索</th> <td> <label><input type="checkbox" name="info2X[]" value="東京" {val form/info2X東京}>東京</label> <label><input type="checkbox" name="info2X[]" value="千葉" {val form/info2X千葉}>千葉</label> <label><input type="checkbox" name="info2X[]" value="神奈川" {val form/info2X神奈川}>神奈川</label> </td> </tr> <tr> <th>地名で検索</th> <td><input type="input" name="info3" value="{val form/info3}" class="ws"><br> <span class="mini1">検索させたい地名を入力して下さい。例：「新宿」「新宿品川」など。</span></td> </tr>  <tr> <th>こだわりで検索</th> <td>  <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>   </td> </tr>  </table> <div class="c mb30"><input type="submit" value="この条件で検索する" class="btn"> <input type="button" value="リセット" onClick="do_reset()" class="btn"></div> </form> <div class="c mb30"> 全<strong class="color1">{val counter/total}</strong>件中　<strong class="color1">{val counter/start}</strong>件目〜<strong class="color1">{val counter/end}</strong>件目を表示中 該当するデータが見つかりませんでした<br><a href="javascript:history.back()"><< 前のページに戻る</a> </div>  <div class="listlist">  <p class="img"><a href="?act=bukken&id={val list/info_id}"><img src="user_data/{val list/image1_file}" alt="{val list/title}"></a></p>   <p class="img"><a href="?act=bukken&id={val list/info_id}"><img src="images/noimg.png" alt="{val list/title}"></a></p>  <div class="text"> <h4> <a href="?act=bukken&id={val list/info_id}">{val list/title}</a> <span class="newicon">NEW</span> <span class="option1">オプション１</span> <span class="option2">オプション２</span> </h4> <p class="mb10">{val list/contents}</p> <p class="mini1 color2">{val list/info2/value}{val list/info3/value}</p>   <a href="?act=list&kind={val kind}&special{val list/special/value}={val list/special/value}"><img src="icon/{val list/special/icon}" alt="{val item/special/title}" title="{val list/special/title}"></a>   <span class="icon"><a href="?act=list&kind={val kind}&special{val list/special/value}={val list/special/value}">{val list/special/title}</a></span>   <p><a href="?act=bukken&id={val list/info_id}" class="btn2">詳細をみる</a></p> </div>  <p class="date"><span>■登録日:{val list/regdate/0}/{val list/regdate/1}/{val list/regdate/2} {val list/regtime/0}:{val list/regtime/1}</span> <span>■更新日:{val list/update/0}/{val list/update/1}/{val list/update/2} {val list/uptime/0}:{val list/uptime/1}</span></p> <p class="name"><a href="?act=list&ord=&html=list_user.html&top=0&page=&user_id={val list/user_id}">{val list/info1/value}</a></p> </div>   <p class="c clear">  <a href="javascript:do_page({val pager/prev/no})"><< 前へ</a> |   << 前へ |   <a href="javascript:do_page(0)">[先頭]</a> ･･･    <a href="javascript:do_page({val pager/list/no})">[{val pager/list/name}]</a> |   [{val pager/list/name}] |    ･･･ <a href="javascript:do_page({val pager/last/no})">[最後]</a> |   <a href="javascript:do_page({val pager/next/no})">次へ >></a>   次へ >>  </p>  </section>
出力イメージです。※スタイルはテスト確認後にそちらで整えて下さい。
使っているタグの詳細については、ポータル向けCMSマニュアルをご覧下さい。

続いて一覧ページ（求人用）の準備に入ります

上で作ったlist.htmlを複製し、ファイル名をlist_job.htmlに変更します。
list_job.htmlのメインブロックを一旦空にし、以下に入れ替えます。 <section> <h2>{val title}<span>（{val counter/total}件）（0件）</span></h2> <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="ta1ta1"> <tr> <th>都道府県で検索</th> <td> <label><input type="checkbox" name="info2X[]" value="東京" {val form/info2X東京}>東京</label> <label><input type="checkbox" name="info2X[]" value="千葉" {val form/info2X千葉}>千葉</label> <label><input type="checkbox" name="info2X[]" value="神奈川" {val form/info2X神奈川}>神奈川</label> </td> </tr> <tr> <th>地名で検索</th> <td><input type="input" name="info3" value="{val form/info3}" class="ws"><br> <span class="mini1">検索させたい地名を入力して下さい。例：「新宿」「新宿品川」など。</span></td> </tr>  <tr> <th>こだわりで検索</th> <td>  <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>   </td> </tr>  </table> <div class="c mb30"><input type="submit" value="この条件で検索" class="btn"> <input type="button" value="リセット" onClick="do_reset()" class="btn"></div> </form> <h2>{val title}<span>（{val counter/total}件）（0件）</span></h2> <div class="c"> 全<strong class="color1">{val counter/total}</strong>件中　<strong class="color1">{val counter/start}</strong>件目〜<strong class="color1">{val counter/end}</strong>件目を表示中 該当するデータが見つかりませんでした<br><a href="javascript:history.back()"><< 前のページに戻る</a> </div>  <div class="c mb30">｜  賃金の高い順にソート   <a href="javascript:do_search(1)">賃金の高い順にソート</a>  ｜  新着順にソート   <a href="javascript:do_search('')">新着順にソート</a>  ｜ </div>   <div class="listlist">  <p class="img"><a href="?act=bukken&id={val list/info_id}"><img src="user_data/{val list/image1_file}" alt="{val list/title}"></a></p>   <p class="img"><a href="?act=bukken&id={val list/info_id}"><img src="images/noimg.png" alt="{val list/title}"></a></p>  <div class="text"> <h4><a href="?act=bukken&id={val list/info_id}">{val list/title}</a></h4> <p>{val list/contents}<br> ■{val list/info1/title}:{val list/info1/value}<br> ■所在地:{val list/info2/value}{val list/info3/value}<br> ■{val list/info4/title}:{val list/info4/value}</p>   <a href="?act=list&kind={val kind}&special{val list/special/value}={val list/special/value}"><img src="icon/{val list/special/icon}" alt="{val item/special/title}" title="{val list/special/title}"></a>   <span class="icon"><a href="?act=list&kind={val kind}&special{val list/special/value}={val list/special/value}">{val list/special/title}</a></span>   <p><a href="?act=bukken&id={val list/info_id}" class="btn2">詳細をみる</a></p> </div>  <p class="date"><span>■登録日:{val list/regdate/0}/{val list/regdate/1}/{val list/regdate/2} {val list/regtime/0}:{val list/regtime/1}</span> <span>■更新日:{val list/update/0}/{val list/update/1}/{val list/update/2} {val list/uptime/0}:{val list/uptime/1}</span></p> </div>   <p class="c clear">  <a href="javascript:do_page({val pager/prev/no})"><< 前へ</a> |   << 前へ |   <a href="javascript:do_page(0)">[先頭]</a> ･･･    <a href="javascript:do_page({val pager/list/no})">[{val pager/list/name}]</a> |   [{val pager/list/name}] |    ･･･ <a href="javascript:do_page({val pager/last/no})">[最後]</a> |   <a href="javascript:do_page({val pager/next/no})">次へ >></a>   次へ >>  </p>  </section>
出力イメージです。※スタイルはテスト確認後にそちらで整えて下さい。
使っているタグの詳細については、ポータル向けCMSマニュアルをご覧下さい。

続いて一覧ページ（不動産：売買物件用）の準備に入ります

list.htmlを複製し、ファイル名をlist_fudosan.htmlに変更します。
list_fudosan.htmlのメインブロックを一旦空にし、以下に入れ替えます。 <section> <h2>{val user_info/name}の登録情報 {val title}<span>（{val counter/total}件）（0件）</span> </h2> <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="ta1ta1"> <tr> <th>都道府県で検索</th> <td> <label><input type="checkbox" name="info2X[]" value="東京" {val form/info2X東京}>東京</label> <label><input type="checkbox" name="info2X[]" value="千葉" {val form/info2X千葉}>千葉</label> <label><input type="checkbox" name="info2X[]" value="神奈川" {val form/info2X神奈川}>神奈川</label> </td> </tr> <tr> <th>地名で検索</th> <td><input type="input" name="info3" value="{val form/info3}" class="ws"><br> <span class="mini1">検索させたい地名を入力して下さい。例：「新宿」「新宿品川」など。</span></td> </tr>  <tr> <th>こだわりで検索</th> <td>  <div class="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="c mb30"><input type="submit" value="この条件で検索" class="btn"> <input type="button" value="リセット" onClick="do_reset()" class="btn"></div> </form> <h2>{val title}<span>（{val counter/total}件）（0件）</span></h2> <div class="c"> 全<strong class="color1">{val counter/total}</strong>件中　<strong class="color1">{val counter/start}</strong>件目〜<strong class="color1">{val counter/end}</strong>件目を表示中 該当するデータが見つかりませんでした<br><a href="javascript:history.back()"><< 前のページに戻る</a> </div>  <div class="c mb30">｜  高い順にソート   <a href="javascript:do_search(1)">高い順にソート</a>  ｜  安い順にソート   <a href="javascript:do_search(2)">安い順にソート</a>  ｜  新着順にソート   <a href="javascript:do_search('')">新着順にソート</a>  ｜ </div>   <div class="listlist">  <p class="img"><a href="?act=bukken&id={val list/info_id}"><img src="user_data/{val list/image1_file}" alt="{val list/title}"></a></p>   <p class="img"><a href="?act=bukken&id={val list/info_id}"><img src="images/noimg.png" alt="{val list/title}"></a></p>  <div class="text"> <h4> <a href="?act=bukken&id={val list/info_id}">{val list/title}</a> <span class="newicon">NEW</span> <span class="option1">おすすめ</span> <span class="option2">ご契約済み</span> PDF資料あり </h4> <p>{val list/contents}</p> <table class="c2">  <tr>  <th>{val list/list_item/row/title}</th> <td>{val list/list_item/row/value}</td>  </tr>  </table>   <a href="?act=list&kind={val kind}&special{val list/special/value}={val list/special/value}"><img src="icon/{val list/special/icon}" alt="{val item/special/title}" title="{val list/special/title}"></a>   <span class="icon"><a href="?act=list&kind={val kind}&special{val list/special/value}={val list/special/value}">{val list/special/title}</a></span>   </div>  <p class="date"><span>■登録日:{val list/regdate/0}/{val list/regdate/1}/{val list/regdate/2} {val list/regtime/0}:{val list/regtime/1}</span> <span>■更新日:{val list/update/0}/{val list/update/1}/{val list/update/2} {val list/uptime/0}:{val list/uptime/1}</span></p> <p class="name"><a href="?act=list&ord=&html=list_user.html&top=0&page=&user_id={val list/user_id}">{val list/info1/value}</a></p> </div>   <p class="c clear">  <a href="javascript:do_page({val pager/prev/no})"><< 前へ</a> |   << 前へ |   <a href="javascript:do_page(0)">[先頭]</a> ･･･    <a href="javascript:do_page({val pager/list/no})">[{val pager/list/name}]</a> |   [{val pager/list/name}] |    ･･･ <a href="javascript:do_page({val pager/last/no})">[最後]</a> |   <a href="javascript:do_page({val pager/next/no})">次へ >></a>   次へ >>  </p>  </section>
出力イメージです。※スタイルはテスト確認後にそちらで整えて下さい。
使っているタグの詳細については、ポータル向けCMSマニュアルをご覧下さい。

続いて一覧ページ（不動産：賃貸物件用）の準備に入ります

賃貸物件用は、サンプルとして日本地図を配置し、都道府県をクリックした先で一覧ページを出力する方法をとっています。
日本地図が不要なら、管理ページで一覧用HTMLを上の売買物件（list_fudosan.html）に変更して頂ければOKです。

list.htmlを複製し、ファイル名をlist_fudosan_chintai.htmlに変更します。
list_fudosan_chintai.htmlのメインブロックを一旦空にし、以下に入れ替えます。 <section> <h2>{val title}<span>（{val counter/total}件）（0件）</span></h2> <div id="map"> <div class="kyusyu"> <a href="#" class="okinawa">沖縄</a> <a href="#" class="kagoshima">鹿児島</a> <a href="#" class="kumamoto">熊本</a> <a href="#" class="miyazaki">宮崎</a> <a href="#" class="nagasaki">長崎</a> <a href="#" class="oita">大分</a> <a href="#" class="saga">佐賀</a> <a href="#" class="fukuoka">福岡</a> </div> <div class="shikoku"> <a href="#" class="kochi">高知</a> <a href="#" class="ehime">愛媛</a> <a href="#" class="kagawa">香川</a> <a href="#" class="tokushima">徳島</a> </div> <div class="cyugoku"> <a href="#" class="yamaguchi">山口</a> <a href="#" class="hiroshima">広島</a> <a href="#" class="okayama">岡山</a> <a href="#" class="shimane">島根</a> <a href="#" class="tottori">鳥取</a> </div> <div class="kansai"> <a href="#" class="hyogo">兵庫</a> <a href="#" class="kyoto">京都</a> <a href="#" class="shiga">滋賀</a> <a href="#" class="osaka">大阪</a> <a href="#" class="nara">奈良</a> <a href="#" class="mie">三重</a> <a href="#" class="wakayama">和歌山</a> </div> <div class="tyubu"> <a href="#" class="ishikawa">石川</a> <a href="#" class="fukui">福井</a> <a href="#" class="toyama">富山</a> <a href="#" class="gifu">岐阜</a> <a href="#" class="aichi">愛知</a> <a href="#" class="nigata">新潟</a> <a href="#" class="nagano">長野</a> <a href="#" class="yamanashi">山梨</a> <a href="#" class="shizuoka">静岡</a> </div> <div class="kanto"> <a href="./?act=list&kind=2&info2=神奈川&html=list_fudosan_chintai2.html" class="kanagawa">神奈川</a> <a href="./?act=list&kind=2&info2=東京&html=list_fudosan_chintai2.html" class="tokyo">東京</a> <a href="#" class="saitama">埼玉</a> <a href="#" class="gunma">群馬</a> <a href="#" class="tochigi">栃木</a> <a href="#" class="ibaraki">茨城</a> <a href="./?act=list&kind=2&info2=千葉&html=list_fudosan_chintai2.html" class="chiba">千葉</a> </div> <div class="tohoku"> <a href="#" class="fukushima">福島</a> <a href="#" class="yamagata">山形</a> <a href="#" class="miyagi">宮城</a> <a href="#" class="akita">秋田</a> <a href="#" class="iwate">岩手</a> <a href="#" class="aomori">青森</a> </div> <div class="hokkaido"> <a href="#">北海道</a> </div> </div>  <p class="c red big1">※東京(7件)、千葉(2件)、神奈川(3件)のみデータが登録されています。</p> <p class="check">この賃貸物件ページのみ、日本地図配置タイプの検索ページで用意しています。<br> 詳しい使い方・設定方法は<a href="https://template-party.com/portal_db/stepothers_list_search.html" target="_blank">マニュアル</a>をご覧下さい。</p> <p class="check">売買物件と同じ検索ページにした場合は、管理ページの「項目設定」メニューから「不動産情報(賃貸物件)」の編集ボタンを押し、「一覧用HTML」の入力情報を「list_fudosan.html」に変更して下さい。<br> この場合、「list_fudosan_chintai.html」と「list_fudosan_chintai2.html」は使う必要がなくなるのでテンプレートから削除しておいて下さい。</p> </section>
日本地図ページはこれで完了です。引き続き、日本地図クリック後の一覧ページの準備を行います。
list.htmlを複製し、ファイル名をlist_fudosan_chintai2.htmlに変更します。
list_fudosan_chintai2.htmlのメインブロックを一旦空にし、以下に入れ替えます。 <section> <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=""> <input type="hidden" name="info2" value="{val form/info2}"> <h2>『{val form/info2}』の{val title}<span>（{val counter/total}件）（0件）</span></h2> <p>以下の検索ブロックは編集可能です。詳しくは<a href="https://template-party.com/portal_db/stepothers_list_search.html" target="_blank">マニュアル</a>をご覧下さい。</p> <table class="ta1ta1"> <caption>『{val form/info2}』の検索をする</caption> <tr> <th>地名で検索</th> <td><input type="input" name="info3" value="{val form/info3}" class="ws"><br> <span class="mini1">検索させたい地名を入力して下さい。例：「新宿」「新宿品川」など。</span></td> </tr>  <tr> <th>こだわりで検索</th> <td>  <div class="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="c mb30"><input type="submit" value="この条件で検索" class="btn"> <input type="button" value="リセット" onClick="do_reset()" class="btn"></div> </form> <div class="c"> 全<strong class="color1">{val counter/total}</strong>件中　<strong class="color1">{val counter/start}</strong>件目〜<strong class="color1">{val counter/end}</strong>件目を表示中 該当するデータが見つかりませんでした<br><a href="javascript:history.back()"><< 前のページに戻る</a> </div>  <div class="c mb30">｜  高い順にソート   <a href="javascript:do_search(1)">高い順にソート</a>  ｜  安い順にソート   <a href="javascript:do_search(2)">安い順にソート</a>  ｜  新着順にソート   <a href="javascript:do_search('')">新着順にソート</a>  ｜ </div>   <div class="listlist">  <p class="img"><a href="?act=bukken&id={val list/info_id}"><img src="user_data/{val list/image1_file}" alt="{val list/title}"></a></p>   <p class="img"><a href="?act=bukken&id={val list/info_id}"><img src="images/noimg.png" alt="{val list/title}"></a></p>  <div class="text"> <h4> <a href="?act=bukken&id={val list/info_id}">{val list/title}</a> <span class="newicon">NEW</span> <span class="option1">おすすめ</span> <span class="option2">ご契約済み</span> PDF資料あり </h4> <p>{val list/contents}</p> <table class="c2"> <tr> <th>所在地</th> <td>{val list/info2/value}{val list/info3/value}</td> <th>{val list/info4/title}</th> <td>{val list/info4/value}</td> </tr> <tr> <th>{val list/info5/title}</th> <td>{val list/info5/value}</td> <th>{val list/info6/title}</th> <td>{val list/info6/value}</td> </tr> </table>   <a href="?act=list&kind={val kind}&special{val list/special/value}={val list/special/value}"><img src="icon/{val list/special/icon}" alt="{val item/special/title}" title="{val list/special/title}"></a>   <span class="icon"><a href="?act=list&kind={val kind}&special{val list/special/value}={val list/special/value}">{val list/special/title}</a></span>   </div>  <p class="date"><span>■登録日:{val list/regdate/0}/{val list/regdate/1}/{val list/regdate/2} {val list/regtime/0}:{val list/regtime/1}</span> <span>■更新日:{val list/update/0}/{val list/update/1}/{val list/update/2} {val list/uptime/0}:{val list/uptime/1}</span></p> <p class="name"><a href="?act=list&ord=&html=list_user.html&top=0&page=&user_id={val list/user_id}">{val list/info1/value}</a></p> </div>   <p class="c clear">  <a href="javascript:do_page({val pager/prev/no})"><< 前へ</a> |   << 前へ |   <a href="javascript:do_page(0)">[先頭]</a> ･･･    <a href="javascript:do_page({val pager/list/no})">[{val pager/list/name}]</a> |   [{val pager/list/name}] |    ･･･ <a href="javascript:do_page({val pager/last/no})">[最後]</a> |   <a href="javascript:do_page({val pager/next/no})">次へ >></a>   次へ >>  </p>  </section>
出力イメージです。※スタイルはテスト確認後にそちらで整えて下さい。
使っているタグの詳細については、ポータル向けCMSマニュアルをご覧下さい。

続いて一覧ページ（サブブロックの「お知らせ一覧」からのリンク先）の準備に入ります

list.htmlを複製し、ファイル名をlist_oshirase.htmlに変更します。
list_oshirase.htmlのメインブロックを一旦空にし、以下に入れ替えます。 <section> <h2>お知らせ<span>（{val counter/total}件）（0件）</span></h2> <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="c mb30"> 全<strong class="color1">{val counter/total}</strong>件中　<strong class="color1">{val counter/start}</strong>件目〜<strong class="color1">{val counter/end}</strong>件目を表示中 該当するデータが見つかりませんでした<br><a href="javascript:history.back()"><< 前のページに戻る</a> </div>  <div class="listlist">  <p class="img"><a href="?act=bukken&id={val list/info_id}"><img src="user_data/{val list/image1_file}" alt="{val list/title}"></a></p>   <p class="img"><a href="?act=bukken&id={val list/info_id}"><img src="images/noimg.png" alt="{val list/title}"></a></p>  <div class="text"> <h4><a href="?act=bukken&id={val list/info_id}">{val list/title}</a></h4> <p class="mb10">{val list/contents}</p>   <a href="?act=list&kind={val kind}&special{val list/special/value}={val list/special/value}"><img src="icon/{val list/special/icon}" alt="{val item/special/title}" title="{val list/special/title}"></a>   <span class="icon"><a href="?act=list&kind={val kind}&special{val list/special/value}={val list/special/value}">{val list/special/title}</a></span>   <p><a href="?act=bukken&id={val list/info_id}" class="btn2">詳細をみる</a></p> </div>  <p class="date"><span>■登録日:{val list/regdate/0}/{val list/regdate/1}/{val list/regdate/2} {val list/regtime/0}:{val list/regtime/1}</span> <span>■更新日:{val list/update/0}/{val list/update/1}/{val list/update/2} {val list/uptime/0}:{val list/uptime/1}</span></p> <p class="name"><a href="?act=bukken&id={val list/info_id}">{val list/info1/value}</a></p> </div>   <p class="c clear">  <a href="javascript:do_page({val pager/prev/no})"><< 前へ</a> |   << 前へ |   <a href="javascript:do_page(0)">[先頭]</a> ･･･    <a href="javascript:do_page({val pager/list/no})">[{val pager/list/name}]</a> |   [{val pager/list/name}] |    ･･･ <a href="javascript:do_page({val pager/last/no})">[最後]</a> |   <a href="javascript:do_page({val pager/next/no})">次へ >></a>   次へ >>  </p>  </section>
出力イメージです。※スタイルはテスト確認後にそちらで整えて下さい。

続いて一覧ページ（ユーザーごとの登録情報一覧）の準備に入ります

list.htmlを複製し、ファイル名をlist_user.htmlに変更します。
list_user.htmlのメインブロックを一旦空にし、以下に入れ替えます。 <section> <h2> 『{val user_info/name}』の登録情報 {val title}<span>（{val counter/total}件）（0件）</span> </h2> <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=""> <input type="hidden" name="user_id" value="{val user_info/user_id}"> </form> <div class="c mb30"> 全<strong class="color1">{val counter/total}</strong>件中　<strong class="color1">{val counter/start}</strong>件目〜<strong class="color1">{val counter/end}</strong>件目を表示中 該当するデータが見つかりませんでした<br><a href="javascript:history.back()"><< 前のページに戻る</a> </div>  <div class="listlist">  <p class="img"><a href="?act=bukken&id={val list/info_id}"><img src="user_data/{val list/image1_file}" alt="{val list/title}"></a></p>   <p class="img"><a href="?act=bukken&id={val list/info_id}"><img src="images/noimg.png" alt="{val list/title}"></a></p>  <div class="text"> <h4><a href="?act=bukken&id={val list/info_id}">{val list/title}</a></h4> <p class="mb10">{val list/contents}</p> <p><a href="?act=bukken&id={val list/info_id}" class="btn2">詳細をみる</a></p> </div>  <p class="date"><span>■登録日:{val list/regdate/0}/{val list/regdate/1}/{val list/regdate/2} {val list/regtime/0}:{val list/regtime/1}</span> <span>■更新日:{val list/update/0}/{val list/update/1}/{val list/update/2} {val list/uptime/0}:{val list/uptime/1}</span></p> <p class="name">{val list/info1/value}</p> </div>   <p class="c clear">  <a href="javascript:do_page({val pager/prev/no})"><< 前へ</a> |   << 前へ |   <a href="javascript:do_page(0)">[先頭]</a> ･･･    <a href="javascript:do_page({val pager/list/no})">[{val pager/list/name}]</a> |   [{val pager/list/name}] |    ･･･ <a href="javascript:do_page({val pager/last/no})">[最後]</a> |   <a href="javascript:do_page({val pager/next/no})">次へ >></a>   次へ >>  </p>  </section>
出力イメージです。※スタイルはテスト確認後にそちらで整えて下さい。

続いて詳細ページ（デフォルト用）の準備に入ります

item.htmlは、管理ページで専用のテンプレートを指定しない場合に適用される詳細ページ用デフォルトテンプレートになります。
試用版CMSでは、「飲食店」「病院」「習い事」がこのitem.htmlにより出力されています。
残りの「病院」「不動産」「お知らせ(サブブロック)」はそれぞれ専用のhtmlテンプレートを別途準備し、管理ページで指定しています。

既存ファイルをコピペし、item.htmlというファイル名のファイルを作成します。
メインコンテンツ内は空にしておいて下さい。
item.htmlのhead内に以下のタグを追加します。
list.htmlをベースにする場合、list.htmlのheadに入れたタグは削除して以下を追加して下さい。
<script> function set_image(img, title) { document.getElementById('bukken_image').src = img; document.getElementById('bukken_title').innerHTML = title; } </script>ｓ
item.htmlのメインブロック内に以下のタグを貼り付けます。
<article class="item"> <h2> {val item/title} <span class="new">new</span> <span class="option1">オプション１</span> <span class="option2">オプション２</span> </h2> <figure class="c mb15">  <img src="user_data/{val item/image1_file}" id="bukken_image" class="mb15" alt=""><br>   <a href="javascript:set_image('user_data/{val item/image1_file}');"><img src="user_data/{val item/image1_file}" width="70" alt=""></a>   <a href="javascript:set_image('user_data/{val item/image2_file}');"><img src="user_data/{val item/image2_file}" width="70" alt=""></a>   <a href="javascript:set_image('user_data/{val item/image3_file}');"><img src="user_data/{val item/image3_file}" width="70" alt=""></a>   <a href="javascript:set_image('user_data/{val item/image4_file}');"><img src="user_data/{val item/image4_file}" width="70" alt=""></a>   <a href="javascript:set_image('user_data/{val item/image5_file}');"><img src="user_data/{val item/image5_file}" width="70" alt=""></a>   <a href="javascript:set_image('user_data/{val item/image6_file}');"><img src="user_data/{val item/image6_file}" width="70" alt=""></a>   <a href="javascript:set_image('user_data/{val item/image7_file}');"><img src="user_data/{val item/image7_file}" width="70" alt=""></a>   <a href="javascript:set_image('user_data/{val item/image8_file}');"><img src="user_data/{val item/image8_file}" width="70" alt=""></a>   <a href="javascript:set_image('user_data/{val item/image9_file}');"><img src="user_data/{val item/image9_file}" width="70" alt=""></a>   <a href="javascript:set_image('user_data/{val item/image10_file}');"><img src="user_data/{val item/image10_file}" width="70" alt=""></a>   <a href="javascript:set_image('user_data/{val item/image11_file}');"><img src="user_data/{val item/image11_file}" width="70" alt=""></a>   <a href="javascript:set_image('user_data/{val item/image12_file}');"><img src="user_data/{val item/image12_file}" width="70" alt=""></a>   <a href="javascript:set_image('user_data/{val item/image13_file}');"><img src="user_data/{val item/image13_file}" width="70" alt=""></a>   <a href="javascript:set_image('user_data/{val item/image14_file}');"><img src="user_data/{val item/image14_file}" width="70" alt=""></a>   <a href="javascript:set_image('user_data/{val item/image15_file}');"><img src="user_data/{val item/image15_file}" width="70" alt=""></a>   <a href="javascript:set_image('user_data/{val item/image16_file}');"><img src="user_data/{val item/image16_file}" width="70" alt=""></a>　　   <a href="javascript:set_image('user_data/{val item/image17_file}');"><img src="user_data/{val item/image17_file}" width="70" alt=""></a>   <a href="javascript:set_image('user_data/{val item/image18_file}');"><img src="user_data/{val item/image18_file}" width="70" alt=""></a>   <a href="javascript:set_image('user_data/{val item/image19_file}');"><img src="user_data/{val item/image19_file}" width="70" alt=""></a>   <a href="javascript:set_image('user_data/{val item/image20_file}');"><img src="user_data/{val item/image20_file}" width="70" alt=""></a>  </figure> <table class="ta1ta1"> <tr> <th>タイトル</th> <td>{val item/title}</td> </tr>  <tr> <th>コメント</th> <td>{val item/contents}</td> </tr>   <tr> <th>{val item/info/title}</th> <td>{val item/info/value}</td> </tr>   <tr> <th>PDF資料</th> <td> <a href="?act=get_file&id={val item/pdf}">{val item/pdf_file/name}</a><br></td> </tr>   <tr> <th>資料１</th> <td><a href="?act=get_file&id={val item/file1/value}">{val item/file1_file/name}</a></td> </tr>   <tr> <th>資料２</th> <td><a href="?act=get_file&id={val item/file2/value}">{val item/file2_file/name}</a></td> </tr>   <tr> <th>資料３</th> <td><a href="?act=get_file&id={val item/file3/value}">{val item/file3_file/name}</a></td> </tr>   <tr> <th>資料４</th> <td><a href="?act=get_file&id={val item/file4/value}">{val item/file4_file/name}</a></td> </tr>   <tr> <th>動画</th> <td><video controls="" src="user_data/{val item/file5_file/save_name}">video</video><br> ※こちらのブロックの解説は<a href="https://template-party.com/portal_db/stepothers_item_video.html">マニュアルをご覧下さい</a> </td> </tr>   <tr> <th>地図</th> <td> <iframe src="https://maps.google.co.jp/maps?hl=ja&ll={val item/latlon}&q={val item/latlon}&ie=UTF8&t=m&amp&z=14&output=embed" width="600" height="400" frameborder="0" style="border:0" allowfullscreen></iframe> </td> </tr>  <tr> <th>こだわり</th> <td>   <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>   <span class="icon"><a href="?act=list&kind={val item/kind}&special{val item/special/value}={val item/special/value}">{val item/special/title}</a></span>   </td> </tr> <tr> <th>更新日時</th> <td> 登録：{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}分<br> </td> </tr> </table> <p class="c"> <a href="?act=toiawase&id={val item/info_id}" class="btn">問い合わせ</a> </p> </article> <p><a href="javascript:history.back()"><< 前のページに戻る</a></p>
出力イメージです。※スタイルはテスト確認後にそちらで整えて下さい。
使っているタグの詳細については、ポータル向けCMSマニュアルをご覧下さい。

続いて詳細ページ（求人用）の準備に入ります

item.htmlを複製し、ファイル名をitem_job.htmlに変更します。
item_job.htmlのメインブロックを一旦空にし、以下に入れ替えます。 <article class="item"> <h2>求人情報</h2> <h3> {val item/title} <span class="new">new</span> <span class="option1">オプション１</span> <span class="option2">オプション２</span> </h3>  <p>{val item/contents}</p>  <figure class="c mb15">  <img src="user_data/{val item/image1_file}" id="bukken_image" class="mb15" alt=""><br>   <a href="javascript:set_image('user_data/{val item/image1_file}');"><img src="user_data/{val item/image1_file}" width="70" alt=""></a>   <a href="javascript:set_image('user_data/{val item/image2_file}');"><img src="user_data/{val item/image2_file}" width="70" alt=""></a>   <a href="javascript:set_image('user_data/{val item/image3_file}');"><img src="user_data/{val item/image3_file}" width="70" alt=""></a>   <a href="javascript:set_image('user_data/{val item/image4_file}');"><img src="user_data/{val item/image4_file}" width="70" alt=""></a>   <a href="javascript:set_image('user_data/{val item/image5_file}');"><img src="user_data/{val item/image5_file}" width="70" alt=""></a>   <a href="javascript:set_image('user_data/{val item/image6_file}');"><img src="user_data/{val item/image6_file}" width="70" alt=""></a>   <a href="javascript:set_image('user_data/{val item/image7_file}');"><img src="user_data/{val item/image7_file}" width="70" alt=""></a>   <a href="javascript:set_image('user_data/{val item/image8_file}');"><img src="user_data/{val item/image8_file}" width="70" alt=""></a>   <a href="javascript:set_image('user_data/{val item/image9_file}');"><img src="user_data/{val item/image9_file}" width="70" alt=""></a>   <a href="javascript:set_image('user_data/{val item/image10_file}');"><img src="user_data/{val item/image10_file}" width="70" alt=""></a>   <a href="javascript:set_image('user_data/{val item/image11_file}');"><img src="user_data/{val item/image11_file}" width="70" alt=""></a>   <a href="javascript:set_image('user_data/{val item/image12_file}');"><img src="user_data/{val item/image12_file}" width="70" alt=""></a>   <a href="javascript:set_image('user_data/{val item/image13_file}');"><img src="user_data/{val item/image13_file}" width="70" alt=""></a>   <a href="javascript:set_image('user_data/{val item/image14_file}');"><img src="user_data/{val item/image14_file}" width="70" alt=""></a>   <a href="javascript:set_image('user_data/{val item/image15_file}');"><img src="user_data/{val item/image15_file}" width="70" alt=""></a>   <a href="javascript:set_image('user_data/{val item/image16_file}');"><img src="user_data/{val item/image16_file}" width="70" alt=""></a>　　   <a href="javascript:set_image('user_data/{val item/image17_file}');"><img src="user_data/{val item/image17_file}" width="70" alt=""></a>   <a href="javascript:set_image('user_data/{val item/image18_file}');"><img src="user_data/{val item/image18_file}" width="70" alt=""></a>   <a href="javascript:set_image('user_data/{val item/image19_file}');"><img src="user_data/{val item/image19_file}" width="70" alt=""></a>   <a href="javascript:set_image('user_data/{val item/image20_file}');"><img src="user_data/{val item/image20_file}" width="70" alt=""></a>  </figure> <table class="ta1ta1"> <caption>店舗情報</caption> <tr> <th>登録ID</th> <td>{val item/info_id}</td> </tr>  <tr> <th>{val item/info1/title}</th> <td>{val item/info1/value}</td> </tr>   <tr> <th>{val item/info2/title}</th> <td>{val item/info2/value}</td> </tr>   <tr> <th>{val item/info3/title}</th> <td>{val item/info3/value}</td> </tr>   <tr> <th>{val item/info4/title}</th> <td>{val item/info4/value}</td> </tr>   <tr> <th>{val item/info5/title}</th> <td>{val item/info5/value}</td> </tr>   <tr> <th>{val item/info6/title}</th> <td>{val item/info6/value}</td> </tr>   <tr> <th>{val item/info7/title}</th> <td>{val item/info7/value}</td> </tr>   <tr> <th>{val item/info8/title}</th> <td>{val item/info8/value}</td> </tr>   <tr> <th>{val item/info9/title}</th> <td>{val item/info9/value}</td> </tr>   <tr> <th>{val item/info10/title}</th> <td>{val item/info10/value}</td> </tr>  </table> <table class="ta1ta1"> <caption>企業情報</caption>  <tr> <th>{val item/info11/title}</th> <td>{val item/info11/value}</td> </tr>   <tr> <th>{val item/info12/title}</th> <td>{val item/info12/value}</td> </tr>   <tr> <th>{val item/info13/title}</th> <td>{val item/info13/value}</td> </tr>   <tr> <th>{val item/info14/title}</th> <td>{val item/info14/value}</td> </tr>   <tr> <th>{val item/info15/title}</th> <td>{val item/info15/value}</td> </tr>   <tr> <th>{val item/info16/title}</th> <td>{val item/info16/value}</td> </tr>   <tr> <th>{val item/info17/title}</th> <td>{val item/info17/value}</td> </tr>   <tr> <th>{val item/info18/title}</th> <td>{val item/info18/value}</td> </tr>   <tr> <th>{val item/info19/title}</th> <td>{val item/info19/value}</td> </tr>   <tr> <th>{val item/info20/title}</th> <td>{val item/info20/value}</td> </tr>   <tr> <th>地図</th> <td> <iframe src="https://maps.google.co.jp/maps?hl=ja&ll={val item/latlon}&q={val item/latlon}&ie=UTF8&t=m&amp&z=14&output=embed" width="600" height="400" frameborder="0" style="border:0" allowfullscreen></iframe> </td> </tr>  <tr> <th>こだわり</th> <td>   <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>   <span class="icon"><a href="?act=list&kind={val item/kind}&special{val item/special/value}={val item/special/value}">{val item/special/title}</a></span>   </td> </tr>  <tr> <th>PDF資料</th> <td> <a href="?act=get_file&id={val item/pdf}">{val item/pdf_file/name}</a><br></td> </tr>   <tr> <th>資料１</th> <td><a href="?act=get_file&id={val item/file1/value}">{val item/file1_file/name}</a></td> </tr>   <tr> <th>資料２</th> <td><a href="?act=get_file&id={val item/file2/value}">{val item/file2_file/name}</a></td> </tr>   <tr> <th>資料３</th> <td><a href="?act=get_file&id={val item/file3/value}">{val item/file3_file/name}</a></td> </tr>   <tr> <th>資料４</th> <td><a href="?act=get_file&id={val item/file4/value}">{val item/file4_file/name}</a></td> </tr>   <tr> <th>動画</th> <td><video controls="" src="user_data/{val item/file5_file/save_name}">video</video><br> ※こちらのブロックの解説は<a href="https://template-party.com/portal_db/stepothers_item_video.html">マニュアルをご覧下さい</a> </td> </tr>  <tr> <th>更新日時</th> <td> 登録：{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}分<br> </td> </tr> </table> <p class="c"> <a href="?act=toiawase&id={val item/info_id}" class="btn">『{val item/title}』に問い合わせ</a> </p> </article> <p><a href="javascript:history.back()"><< 前のページに戻る</a></p>
出力イメージです。※スタイルはテスト確認後にそちらで整えて下さい。
使っているタグの詳細については、ポータル向けCMSマニュアルをご覧下さい。

続いて詳細ページ（不動産用）の準備に入ります

item.htmlを複製し、ファイル名をitem_fudosan.htmlに変更します。
item_fudosan.htmlのメインブロックを一旦空にし、以下に入れ替えます。 <article class="item"> <h2>不動産情報</h2> <h3> {val item/title} <span class="new">new</span> <span class="option1">おすすめ</span> <span class="option2">ご契約済み</span> </h3> <figure class="c mb15">  <img src="user_data/{val item/image1_file}" id="bukken_image" class="mb15" alt=""><br>   <a href="javascript:set_image('user_data/{val item/image1_file}');"><img src="user_data/{val item/image1_file}" width="70" alt=""></a>   <a href="javascript:set_image('user_data/{val item/image2_file}');"><img src="user_data/{val item/image2_file}" width="70" alt=""></a>   <a href="javascript:set_image('user_data/{val item/image3_file}');"><img src="user_data/{val item/image3_file}" width="70" alt=""></a>   <a href="javascript:set_image('user_data/{val item/image4_file}');"><img src="user_data/{val item/image4_file}" width="70" alt=""></a>   <a href="javascript:set_image('user_data/{val item/image5_file}');"><img src="user_data/{val item/image5_file}" width="70" alt=""></a>   <a href="javascript:set_image('user_data/{val item/image6_file}');"><img src="user_data/{val item/image6_file}" width="70" alt=""></a>   <a href="javascript:set_image('user_data/{val item/image7_file}');"><img src="user_data/{val item/image7_file}" width="70" alt=""></a>   <a href="javascript:set_image('user_data/{val item/image8_file}');"><img src="user_data/{val item/image8_file}" width="70" alt=""></a>   <a href="javascript:set_image('user_data/{val item/image9_file}');"><img src="user_data/{val item/image9_file}" width="70" alt=""></a>   <a href="javascript:set_image('user_data/{val item/image10_file}');"><img src="user_data/{val item/image10_file}" width="70" alt=""></a>   <a href="javascript:set_image('user_data/{val item/image11_file}');"><img src="user_data/{val item/image11_file}" width="70" alt=""></a>   <a href="javascript:set_image('user_data/{val item/image12_file}');"><img src="user_data/{val item/image12_file}" width="70" alt=""></a>   <a href="javascript:set_image('user_data/{val item/image13_file}');"><img src="user_data/{val item/image13_file}" width="70" alt=""></a>   <a href="javascript:set_image('user_data/{val item/image14_file}');"><img src="user_data/{val item/image14_file}" width="70" alt=""></a>   <a href="javascript:set_image('user_data/{val item/image15_file}');"><img src="user_data/{val item/image15_file}" width="70" alt=""></a>   <a href="javascript:set_image('user_data/{val item/image16_file}');"><img src="user_data/{val item/image16_file}" width="70" alt=""></a>　　   <a href="javascript:set_image('user_data/{val item/image17_file}');"><img src="user_data/{val item/image17_file}" width="70" alt=""></a>   <a href="javascript:set_image('user_data/{val item/image18_file}');"><img src="user_data/{val item/image18_file}" width="70" alt=""></a>   <a href="javascript:set_image('user_data/{val item/image19_file}');"><img src="user_data/{val item/image19_file}" width="70" alt=""></a>   <a href="javascript:set_image('user_data/{val item/image20_file}');"><img src="user_data/{val item/image20_file}" width="70" alt=""></a>  </figure> <table class="ta1ta1"> <tr> <th>登録ID</th> <td>{val item/info_id}</td> </tr> <tr> <th>物件名</th> <td>{val item/title}</td> </tr>  <tr> <th>コメント</th> <td>{val item/contents}</td> </tr>   <tr> <th>{val item/info/title}</th> <td>{val item/info/value}</td> </tr>   <tr> <th>PDF資料</th> <td> <a href="?act=get_file&id={val item/pdf}">{val item/pdf_file/name}</a><br></td> </tr>   <tr> <th>資料１</th> <td><a href="?act=get_file&id={val item/file1/value}">{val item/file1_file/name}</a></td> </tr>   <tr> <th>資料２</th> <td><a href="?act=get_file&id={val item/file2/value}">{val item/file2_file/name}</a></td> </tr>   <tr> <th>資料３</th> <td><a href="?act=get_file&id={val item/file3/value}">{val item/file3_file/name}</a></td> </tr>   <tr> <th>資料４</th> <td><a href="?act=get_file&id={val item/file4/value}">{val item/file4_file/name}</a></td> </tr>   <tr> <th>動画</th> <td><video controls="" src="user_data/{val item/file5_file/save_name}">video</video><br> ※こちらのブロックの解説は<a href="https://template-party.com/portal_db/stepothers_item_video.html">マニュアルをご覧下さい</a> </td> </tr>   <tr> <th>地図</th> <td> <iframe src="https://maps.google.co.jp/maps?hl=ja&ll={val item/latlon}&q={val item/latlon}&ie=UTF8&t=m&amp&z=14&output=embed" width="600" height="400" frameborder="0" style="border:0" allowfullscreen></iframe> </td> </tr>   <tr> <th>こだわりアイコン</th> <td>   <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>   <span class="icon"><a href="?act=list&kind={val item/kind}&special{val item/special/value}={val item/special/value}">{val item/special/title}</a></span>   </td> </tr>  <tr> <th>更新日時</th> <td> 登録：{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}分<br> </td> </tr> </table> <p class="c"> <a href="?act=toiawase&id={val item/info_id}" class="btn">『{val item/title}』の問い合わせ</a> </p> </article> <p><a href="javascript:history.back()"><< 前のページに戻る</a></p>
出力イメージです。※スタイルはテスト確認後にそちらで整えて下さい。
使っているタグの詳細については、ポータル向けCMSマニュアルをご覧下さい。

続いて詳細ページ（サブブロックの「お知らせ一覧」のリンク先からの詳細ページ）の準備に入ります

item.htmlを複製し、ファイル名をitem_oshirase.htmlに変更します。
item_oshirase.htmlのメインブロックを一旦空にし、以下に入れ替えます。 <article class="item"> <h2>{val item/title}</h2>  <p>{val item/contents}</p>  <ul class="disc"> <li>{val item/info1/value}</li> <li><a href="{val item/info2/value}" target="_blank">{val item/info2/value}</a></li> <li>連絡先：{val item/info3/value}</li> </ul> <figure class="c mb15">  <img src="user_data/{val item/image1_file}" id="bukken_image" class="mb15" alt=""><br>   <a href="javascript:set_image('user_data/{val item/image1_file}');"><img src="user_data/{val item/image1_file}" width="70" alt=""></a>   <a href="javascript:set_image('user_data/{val item/image2_file}');"><img src="user_data/{val item/image2_file}" width="70" alt=""></a>   <a href="javascript:set_image('user_data/{val item/image3_file}');"><img src="user_data/{val item/image3_file}" width="70" alt=""></a>   <a href="javascript:set_image('user_data/{val item/image4_file}');"><img src="user_data/{val item/image4_file}" width="70" alt=""></a>   <a href="javascript:set_image('user_data/{val item/image5_file}');"><img src="user_data/{val item/image5_file}" width="70" alt=""></a>   <a href="javascript:set_image('user_data/{val item/image6_file}');"><img src="user_data/{val item/image6_file}" width="70" alt=""></a>   <a href="javascript:set_image('user_data/{val item/image7_file}');"><img src="user_data/{val item/image7_file}" width="70" alt=""></a>   <a href="javascript:set_image('user_data/{val item/image8_file}');"><img src="user_data/{val item/image8_file}" width="70" alt=""></a>   <a href="javascript:set_image('user_data/{val item/image9_file}');"><img src="user_data/{val item/image9_file}" width="70" alt=""></a>   <a href="javascript:set_image('user_data/{val item/image10_file}');"><img src="user_data/{val item/image10_file}" width="70" alt=""></a>   <a href="javascript:set_image('user_data/{val item/image11_file}');"><img src="user_data/{val item/image11_file}" width="70" alt=""></a>   <a href="javascript:set_image('user_data/{val item/image12_file}');"><img src="user_data/{val item/image12_file}" width="70" alt=""></a>   <a href="javascript:set_image('user_data/{val item/image13_file}');"><img src="user_data/{val item/image13_file}" width="70" alt=""></a>   <a href="javascript:set_image('user_data/{val item/image14_file}');"><img src="user_data/{val item/image14_file}" width="70" alt=""></a>   <a href="javascript:set_image('user_data/{val item/image15_file}');"><img src="user_data/{val item/image15_file}" width="70" alt=""></a>   <a href="javascript:set_image('user_data/{val item/image16_file}');"><img src="user_data/{val item/image16_file}" width="70" alt=""></a>　　   <a href="javascript:set_image('user_data/{val item/image17_file}');"><img src="user_data/{val item/image17_file}" width="70" alt=""></a>   <a href="javascript:set_image('user_data/{val item/image18_file}');"><img src="user_data/{val item/image18_file}" width="70" alt=""></a>   <a href="javascript:set_image('user_data/{val item/image19_file}');"><img src="user_data/{val item/image19_file}" width="70" alt=""></a>   <a href="javascript:set_image('user_data/{val item/image20_file}');"><img src="user_data/{val item/image20_file}" width="70" alt=""></a>  </figure> <p class="c"> <a href="?act=toiawase&id={val item/info_id}" class="btn">問い合わせ</a> </p> </article> <p><a href="javascript:history.back()"><< 前のページに戻る</a></p>
出力イメージです。※スタイルはテスト確認後にそちらで整えて下さい。

最後に、フォームの準備に入ります

既存ファイルをコピペし、toiawase.htmlというファイル名のファイルを作成します。
list.htmlやitem.htmlを土台にする場合は、head内に追加したタグは削除しておいて下さい。
また、メインコンテンツ内は空にしておいて下さい。
メインブロック内に以下のタグを貼り付けます。
重要な説明もそのまま入っていますが、実際の利用時には説明箇所は削除して下さい。
<section> <h2> 『{val item/title}』に関する問い合わせ お問い合わせフォーム </h2>  <p>お問い合わせ内容を送信しました。</p>    <p class="color1">※全項目入力必須です。</p>   <p class="color1">{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="ta1ta1">  <tr> <th>情報ID</th> <td>{val item/info_id}</td> </tr> <tr> <th>タイトル</th> <td>『{val item/title}』に関する問い合わせ</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/tel}   <input type="text" name="tel" size="50" class="ws" value="{val form/tel}">  </td> </tr>  <tr> <th>お問い合わせ内容</th> <td>  {val form/comment}   <textarea name="comment" cols="60" rows="8" class="wl">{rval form/comment}</textarea>  </td> </tr> </table> <div class="c">  <input type="submit" value="この内容で送信する" class="btn"> <input type="button" value="戻る" onClick="document.form1.action='?act=toiawase_reinput';document.form1.mode.value='';document.form1.submit()" class="btn">   <input type="submit" value="確認する" class="btn">  </div> </form>  </section>
出力イメージです。※スタイルはテスト確認後にそちらで整えて下さい。

フォームに関する補足

toiawase.htmlは「一般のお問い合わせフォーム」としての利用もできます。物件フォームの場合、詳細ページからリンクをつなぐことで自動的に物件IDと名称が入りますが、toiawase.htmlへのリンクを以下のurlでつなぐと、一般フォームとして開きます。
<a href="./?act=toiawase">お問い合わせ</a>
実際の出力サンプルはこちら。

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

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

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

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

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

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

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

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

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

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

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