自社のオリジナルデザインに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)の2枚のファイルが入っています。
cssは、オリジナルデザインにCMSを組み込みやすくする為に弊社で用意したものです。後で変更して頂いて構いません。
こちらの2枚のファイルもあなたのサイトに移動して下さい。
- 以下より、あなたのサイトの編集作業に入ります。
全ページ共通の編集作業に入ります
既存サイトをコピーし、コピーしたもので作業を行なって下さい。
いきなり本サイトで設定すると問題が出た場合に復旧しづらくなります。
- 全てのhtmlファイルの<head>内に以下のスタイル読み込みタグを追加。
できれば既存サイトのcss読み込み行より下に配置して下さい。
※cssファイル名は任意のものに変更して頂いても構いません。変更の際は、cssファイル本体のファイル名も変更しておきましょう。
他、例えばcssフォルダがある場合は「css/stylestyle.css」としてもらっても構いません。この場合も、指定した階層に移動するのを忘れず。
- トップページへのリンク先を全て「<a href="./">」に変更。
- CMS出力用のメニューとリンクを設定。liタグを使うなど、今使っているサイトのコーディングに合わせて調整して下さい。
※以下は試用版を試すための設定です。項目は変更できます。
▼出力イメージです。※スタイルはテスト確認後にそちらで整えて下さい。
- サブブロックに「管理者おすすめサイト」と「お知らせ」の出力用タグを追加。
▼出力イメージです。※スタイルはテスト確認後にそちらで整えて下さい。

トップページの編集に入ります
- トップページ(通常はindex.html)のファイル名をindex_.htmlとアンダーバー入りに変更。
index_.htmlのファイル名は変更しないで下さい。
プログラムがこのファイルをトップページとして読み込んで出力しますので、ファイル名は変更しないで下さい。また、他にindex.htmlがあるとそちらが優先表示されてしまいますので、作らないように。index_.htmlというファイル名ですが、実際にこのファイルにアクセスする事はありません。通常のindex.html同様、http://〜〜〜/で開きます。
- index_.htmlを開き、現在の情報件数を出力するタグを追加。
▼出力イメージです。※スタイルはテスト確認後にそちらで整えて下さい。

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

- 新着不動産情報のタグを追加。
▼出力イメージです。※スタイルはテスト確認後にそちらで整えて下さい。
- 不動産以外の新着情報のタグを追加。
▼出力イメージです。※スタイルはテスト確認後にそちらで整えて下さい。
続いて一覧ページ(デフォルト用)の準備に入ります
list.htmlは、管理ページで専用のテンプレートを指定しない場合に適用される一覧ページ用デフォルトテンプレートになります。
試用版CMSでは、「飲食店」「病院」「習い事」がこのlist.htmlにより出力されています。
残りの「病院」「不動産」「お知らせ(サブブロック)」はそれぞれ専用のhtmlテンプレートを別途準備し、管理ページで指定しています。
- 既存ファイルをコピペし、list.htmlというファイル名のファイルを作成します。
メインコンテンツ内は空にしておいて下さい。
- list.htmlのhead内に以下のタグを追加します。
- list.htmlのメインブロック内に以下のタグを貼り付けます。
- 出力イメージです。※スタイルはテスト確認後にそちらで整えて下さい。
使っているタグの詳細については、ポータル向けCMSマニュアルをご覧下さい。

続いて一覧ページ(求人用)の準備に入ります
- 上で作ったlist.htmlを複製し、ファイル名をlist_job.htmlに変更します。
- list_job.htmlのメインブロックを一旦空にし、以下に入れ替えます。
- 出力イメージです。※スタイルはテスト確認後にそちらで整えて下さい。
使っているタグの詳細については、ポータル向けCMSマニュアルをご覧下さい。

続いて一覧ページ(不動産:売買物件用)の準備に入ります
- list.htmlを複製し、ファイル名をlist_fudosan.htmlに変更します。
- list_fudosan.htmlのメインブロックを一旦空にし、以下に入れ替えます。
- 出力イメージです。※スタイルはテスト確認後にそちらで整えて下さい。
使っているタグの詳細については、ポータル向けCMSマニュアルをご覧下さい。

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

- list.htmlを複製し、ファイル名をlist_fudosan_chintai.htmlに変更します。
- list_fudosan_chintai.htmlのメインブロックを一旦空にし、以下に入れ替えます。
- 日本地図ページはこれで完了です。引き続き、日本地図クリック後の一覧ページの準備を行います。
- list.htmlを複製し、ファイル名をlist_fudosan_chintai2.htmlに変更します。
- list_fudosan_chintai2.htmlのメインブロックを一旦空にし、以下に入れ替えます。
- 出力イメージです。※スタイルはテスト確認後にそちらで整えて下さい。
使っているタグの詳細については、ポータル向けCMSマニュアルをご覧下さい。

続いて一覧ページ(サブブロックの「お知らせ一覧」からのリンク先)の準備に入ります
- list.htmlを複製し、ファイル名をlist_oshirase.htmlに変更します。
- list_oshirase.htmlのメインブロックを一旦空にし、以下に入れ替えます。
- 出力イメージです。※スタイルはテスト確認後にそちらで整えて下さい。

続いて一覧ページ(ユーザーごとの登録情報一覧)の準備に入ります
- list.htmlを複製し、ファイル名をlist_user.htmlに変更します。
- list_user.htmlのメインブロックを一旦空にし、以下に入れ替えます。
- 出力イメージです。※スタイルはテスト確認後にそちらで整えて下さい。

続いて詳細ページ(デフォルト用)の準備に入ります
item.htmlは、管理ページで専用のテンプレートを指定しない場合に適用される詳細ページ用デフォルトテンプレートになります。
試用版CMSでは、「飲食店」「病院」「習い事」がこのitem.htmlにより出力されています。
残りの「病院」「不動産」「お知らせ(サブブロック)」はそれぞれ専用のhtmlテンプレートを別途準備し、管理ページで指定しています。
- 既存ファイルをコピペし、item.htmlというファイル名のファイルを作成します。
メインコンテンツ内は空にしておいて下さい。
- item.htmlのhead内に以下のタグを追加します。
list.htmlをベースにする場合、list.htmlのheadに入れたタグは削除して以下を追加して下さい。
- item.htmlのメインブロック内に以下のタグを貼り付けます。
- 出力イメージです。※スタイルはテスト確認後にそちらで整えて下さい。
使っているタグの詳細については、ポータル向けCMSマニュアルをご覧下さい。

続いて詳細ページ(求人用)の準備に入ります
- item.htmlを複製し、ファイル名をitem_job.htmlに変更します。
- item_job.htmlのメインブロックを一旦空にし、以下に入れ替えます。
- 出力イメージです。※スタイルはテスト確認後にそちらで整えて下さい。
使っているタグの詳細については、ポータル向けCMSマニュアルをご覧下さい。

続いて詳細ページ(不動産用)の準備に入ります
- item.htmlを複製し、ファイル名をitem_fudosan.htmlに変更します。
- item_fudosan.htmlのメインブロックを一旦空にし、以下に入れ替えます。
- 出力イメージです。※スタイルはテスト確認後にそちらで整えて下さい。
使っているタグの詳細については、ポータル向けCMSマニュアルをご覧下さい。

続いて詳細ページ(サブブロックの「お知らせ一覧」のリンク先からの詳細ページ)の準備に入ります
- item.htmlを複製し、ファイル名をitem_oshirase.htmlに変更します。
- item_oshirase.htmlのメインブロックを一旦空にし、以下に入れ替えます。
- 出力イメージです。※スタイルはテスト確認後にそちらで整えて下さい。

最後に、フォームの準備に入ります
- 既存ファイルをコピペし、toiawase.htmlというファイル名のファイルを作成します。
list.htmlやitem.htmlを土台にする場合は、head内に追加したタグは削除しておいて下さい。
また、メインコンテンツ内は空にしておいて下さい。
- メインブロック内に以下のタグを貼り付けます。
重要な説明もそのまま入っていますが、実際の利用時には説明箇所は削除して下さい。
- 出力イメージです。※スタイルはテスト確認後にそちらで整えて下さい。

フォームに関する補足
toiawase.htmlは「一般のお問い合わせフォーム」としての利用もできます。物件フォームの場合、詳細ページからリンクをつなぐことで自動的に物件IDと名称が入りますが、toiawase.htmlへのリンクを以下のurlでつなぐと、一般フォームとして開きます。
<a href="./?act=toiawase">お問い合わせ</a>
実際の出力サンプルはこちら。
サーバーにアップロードして動作確認
当然ですが、仮フォルダを作ってそちらで動作確認をして下さい。いきなり本番サイトへの上書きはしないように。
動作に問題なければcssなどお好みに合わせて調整しなおして下さい。
サンプルページのレイアウトが崩れている場合
既存サイトのスタイルより優先順位が低い場合、スタイルが反映されません。
!importantを加えてみて下さい。強制的に適用されます。
例:color: #FFF !important;
既存サイトのレイアウトが崩れている場合
CMS用で読み込んでいるcssファイルに同じスタイルがある可能性があるので確認して下さい。
CMSのマニュアル・FAQについては
マニュアルはこちら。
FAQ集はこちら。
どうしもうまくいかない場合
サポート掲示板からご質問下さい。無償サポートの範囲内で対応させて頂きます。