他のテンプレートや、自社のオリジナルデザインに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タグを使うなど、今使っているサイトのコーディングに合わせて調整して下さい。
※以下は試用版を試すための設定です。物件項目は変更できます。
<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://〜〜〜/で開きます。
新着物件情報のタグを追加。
<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>   {val newinfo/title}{val newinfo/contents}  
▼出力イメージです。※スタイルはテスト確認後にそちらで整えて下さい。

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

既存ファイルをコピペし、list.htmlというファイル名のファイルを作成します。
メインコンテンツ内は空にしておいて下さい。
list.htmlのhead内に以下のタグを追加します。
<script>  </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 mb15"><input type="submit" value="この条件で検索する"> <input type="button" value="リセット" onClick="do_reset()"></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}"> <h4> {val list/title}[No.{val list/info_id}] <span class="newicon">NEW</span>  キャンペーン物件  PDF資料あり </h4> <figure>  <img src="user_data/{val list/image1_file}" alt="{val list/title}">   <img src="images/noimg.png" alt="{val list/title}">  </figure> <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>   <p class="c">  <a href="javascript:do_page({val pager/prev/no})"><< 前へ</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/next/no})">次へ >></a>   次へ >>  </p>
実際の一覧ページの出力サンプルを見る場合はこちら。

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

既存ファイルをコピペし、item.htmlというファイル名のファイルを作成します。
メインコンテンツ内は空にしておいて下さい。
item.htmlのhead内に以下のタグを追加します。
上のlist.htmlをベースにする場合、list.htmlのheadに入れたタグは削除して以下を追加して下さい。
<script> 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 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>　  </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="この物件に問い合わせをする"></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などお好みに合わせて調整しなおして下さい。

導入ページのレイアウトが崩れている場合

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

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

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

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

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

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

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

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