無料ホームページテンプレート Template Party

不動産CMS

>> CMSバージョン履歴(2019/08/08更新) <<

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

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

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

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

下準備

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

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

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

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

    ※cssファイル名は任意のものに変更して頂いても構いません。変更の際は、cssファイル本体のファイル名も変更しておきましょう。
    他、例えばcssフォルダがある場合は「css/stylestyle.css」としてもらっても構いません。この場合も、指定した階層に移動するのを忘れず。

  2. トップページへのリンク先を全て「<a href="./">」に変更。
  3. CMS出力用のメニューとリンクを設定。liタグを使うなど、今使っているサイトのコーディングに合わせて調整して下さい。
    ※以下は試用版を試すための設定です。物件項目は変更できます。

    ▼出力イメージです。※スタイルはテスト確認後にそちらで整えて下さい。
  4. サブブロックにおすすめ物件出力用のタグを追加。
    1カラムレイアウトの場合はメインコンテンツ内でも構いません。

    ▼出力イメージです。※スタイルはテスト確認後にそちらで整えて下さい。

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

  1. トップページ(通常はindex.html)のファイル名をindex_.htmlとアンダーバー入りに変更。

    index_.htmlのファイル名は変更しないで下さい。
    プログラムがこのファイルをトップページとして読み込んで出力しますので、ファイル名は変更しないで下さい。また、他にindex.htmlがあるとそちらが優先表示されてしまいますので、作らないように。index_.htmlというファイル名ですが、実際にこのファイルにアクセスする事はありません。通常のindex.html同様、http://〜〜〜/で開きます。

  2. index_.htmlを開き、新着物件情報のタグを追加。

    ▼出力イメージです。※スタイルはテスト確認後にそちらで整えて下さい。
  3. お知らせ欄の出力タグを追加。

    ▼出力イメージです。※スタイルはテスト確認後にそちらで整えて下さい。

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

  1. 既存ファイルをコピペし、list.htmlというファイル名のファイルを作成します。
    メインコンテンツ内は空にしておいて下さい。
  2. list.htmlのhead内に以下のタグを追加します。
  3. list.htmlのメインブロック内に以下のタグを貼り付けます。
  4. 実際の一覧ページの出力サンプルを見る場合はこちら。

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

  1. 既存ファイルをコピペし、item.htmlというファイル名のファイルを作成します。
    メインコンテンツ内は空にしておいて下さい。
  2. item.htmlのhead内に以下のタグを追加します。
    上のlist.htmlをベースにする場合、list.htmlのheadに入れたタグは削除して以下を追加して下さい。
  3. メインブロック内に以下のタグを貼り付けます。
    重要な説明もそのまま入っていますが、実際の利用時には説明箇所は削除して下さい。
  4. 実際の詳細ページの出力サンプルを見る場合はこちら。

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

  1. 既存ファイルをコピペし、toiawase.htmlというファイル名のファイルを作成します。
    list.htmlやitem.htmlを土台にする場合は、head内に追加したタグは削除しておいて下さい。
    また、メインコンテンツ内は空にしておいて下さい。
  2. メインブロック内に以下のタグを貼り付けます。
    重要な説明もそのまま入っていますが、実際の利用時には説明箇所は削除して下さい。
  3. 実際の出力サンプルを見る場合はこちら。

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

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

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

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

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

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

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

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

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

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

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

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

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