不動産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="./">」に変更。
CMS出力用のメニューとリンクを設定。liタグを使うなど、今使っているサイトのコーディングに合わせて調整して下さい。
※以下は試用版を試すための設定です。物件項目は変更できます。
<a href="./?act=list&kind=1">売買物件</a> <a href="./?act=list&kind=2">賃貸物件</a> <a href="./?act=list&kind=3">店舗物件</a> <a href="./?act=list&kind=4">駐車場物件</a>
▼出力イメージです。※スタイルはテスト確認後にそちらで整えて下さい。
サブブロックにおすすめ物件出力用のタグを追加。
１カラムレイアウトの場合はメインコンテンツ内でも構いません。
<h2>おすすめ物件情報</h2>  <div class="listlist"> <a href="?act=bukken&id={val osusume/info_id}"> <figure>  <img src="user_data/{val osusume/image1_file}" alt="{val osusume/title}">   <img src="noimg.png" alt="{val osusume/title}">  </figure> <h4>{val osusume/title}</h4> <p>■{val osusume/info1/title}…{val osusume/info1/value} ■{val osusume/info2/title}…{val osusume/info2/value} ■{val osusume/info3/title}…{val osusume/info3/value} </p> </a> </div> 
▼出力イメージです。※スタイルはテスト確認後にそちらで整えて下さい。

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

トップページ（通常はindex.html）のファイル名をindex_.htmlとアンダーバー入りに変更。
index_.htmlのファイル名は変更しないで下さい。
プログラムがこのファイルをトップページとして読み込んで出力しますので、ファイル名は変更しないで下さい。また、他にindex.htmlがあるとそちらが優先表示されてしまいますので、作らないように。index_.htmlというファイル名ですが、実際にこのファイルにアクセスする事はありません。通常のindex.html同様、http://〜〜〜/で開きます。
index_.htmlを開き、新着物件情報のタグを追加。
<h2>新着物件</h2>  <div class="listlist option2"> <a href="?act=bukken&id={val list0/info_id}"> <figure>  <img src="user_data/{val list0/image1_file}" alt="{val list0/title}">   <img src="noimg.png" alt="{val list0/title}">  </figure> <h4>{val list0/title}<span class="newicon">NEW</span></h4> <table>  <tr>  <th>{val list0/list_item/row/title}</th> <td>{val list0/list_item/row/value}</td>  </tr>  </table> <span class="option1">おすすめ</span> <span class="option2">ご契約済</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>  
▼出力イメージです。※スタイルはテスト確認後にそちらで整えて下さい。

続いて物件一覧ページの準備に入ります

既存ファイルをコピペし、list.htmlというファイル名のファイルを作成します。
メインコンテンツ内は空にしておいて下さい。
list.htmlのhead内に以下のタグを追加します。
<script type="text/javascript">  </script>
list.htmlのメインブロック内に以下のタグを貼り付けます。
<h2>{val title}</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><input type="input" name="info1" value="{val form/info1}" class="ws"> (部分一致検索)</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"><input type="submit" value="この条件で検索する" class="btn"> <input type="button" value="リセット" onClick="do_reset()" class="btn"></div> </form> <div class="c">  高い順にソート   <a href="javascript:do_search(1)">高い順にソート</a>  ｜  安い順にソート   <a href="javascript:do_search(2)">安い順にソート</a>  ｜  新着順にソート   <a href="javascript:do_search('')">新着順にソート</a>  ｜ </div>  <div class="listlist option2"> <a href="?act=bukken&id={val list/info_id}"> <figure>  <img src="user_data/{val list/image1_file}" alt="{val list/title}">   <img src="noimg.png" alt="{val list/title}">  </figure> <h4> {val list/title}[No.{val list/info_id}] <span class="newicon">NEW</span>  キャンペーン物件  PDF資料あり </h4> <table>  <tr>  <th>{val list/list_item/row/title}</th> <td>{val list/list_item/row/value}</td>  </tr>  </table> <span class="option1">おすすめ</span> <span class="option2">ご契約済</span> </a> </div>
実際の一覧ページの出力サンプルを見る場合はこちら。

続いて物件詳細ページの準備に入ります

既存ファイルをコピペし、item.htmlというファイル名のファイルを作成します。
メインコンテンツ内は空にしておいて下さい。
item.htmlのhead内に以下のタグを追加します。
上のlist.htmlをベースにする場合、list.htmlのheadに入れたタグは削除して以下を追加して下さい。
<script type="text/javascript"> function set_image(img) { document.getElementById('bukken_image').src = img; } </script>
メインブロック内に以下のタグを貼り付けます。
重要な説明もそのまま入っていますが、実際の利用時には説明箇所は削除して下さい。
<h2> {val item/title}　[No.{val item/info_id}]　 <span class="newicon">NEW</span> <span class="option1">おすすめ</span> <span class="option2">ご契約済</span>  キャンペーン物件  </h2> <figure class="c">  <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>  </figure> <table class="ta1ta1"> <tr> <th>物件名</th> <td>{val item/title}</td> </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="?act=get_file&id={val item/pdf}">{val item/pdf_file/name}</a></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>   [<a href="?act=list&kind={val item/kind}&special{val item/special/value}={val item/special/value}">{val item/special/title}</a>]    </td> </tr> </table> <p class="c"> <span style="color:red">※管理ページの「ご契約済み」を選択した場合のみ、ここの問い合わせボタンは表示されません。<br> setup.phpのご契約済みの場所を変更すると設定がずれるのでご注意下さい。<br> 常にボタンを表示させたい場合は、ボタンタグからとを削除して下さい。</span><br> <a href="?act=toiawase&id={val item/info_id}"><input type="submit" value="この物件に問い合わせをする" class="btn"></a> </p>
実際の詳細ページの出力サンプルを見る場合はこちら。

最後に、物件専用フォームの準備に入ります

既存ファイルをコピペし、toiawase.htmlというファイル名のファイルを作成します。
list.htmlやitem.htmlを土台にする場合は、head内に追加したタグは削除しておいて下さい。
また、メインコンテンツ内は空にしておいて下さい。
メインブロック内に以下のタグを貼り付けます。
重要な説明もそのまま入っていますが、実際の利用時には説明箇所は削除して下さい。
<h2>物件お問い合わせフォーム</h2>  <p class="color1">お問い合わせ内容を送信しました。</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/comment}   <textarea name="comment" cols="60" rows="8" class="wl">{rval form/comment}</textarea>  </td> </tr> </table> <div class="c">  <input type="submit" value="この内容で送信する">   <input type="submit" value="確認する">  </div> </form>
実際の出力サンプルを見る場合はこちら。

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

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

CMS出力ではないページや、物件専用フォームにはサブコンテンツのおすすめコーナーは出力されません。

情報が空になるので、気になる場合は該当するhtmlから直接おすすめブロックを削除して下さい。

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

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

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

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

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

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

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

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

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