自社のオリジナルデザインに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="index.php">」に変更。
- CMS出力用のメニューとリンクを設定。
liタグを使うなど、今使っているサイトのコーディングに合わせて調整して下さい。
トップページの編集に入ります
- トップページ(通常はindex.html)のファイル名をindex2.htmlに変更。
index2.htmlのファイル名は変更しないで下さい。
プログラムがこのファイルをトップページとして読み込んで出力しますので、ファイル名は変更しないで下さい。また、他にindex.htmlがあるとそちらが優先表示されてしまいますので、作らないように。index2.htmlというファイル名ですが、実際にこのファイルにアクセスする事はありません。通常のindex.html同様、http://〜〜〜/で開きます。
- index2.htmlを開き、新人スタッフブロックを追加します。
- 続いて試用版の「早番(当日)」スタッフを出力させるブロックを追加します。
この「遅番or早番」はsetup.phpで変更・追加は可能ですが、マニュアルをしっかり読んで実行して下さい。
- 続いて試用版の「遅番(当日)」スタッフを出力させるブロックを追加します。
この「遅番or早番」はsetup.phpで変更・追加は可能ですが、マニュアルをしっかり読んで実行して下さい。
- 続いて、「お知らせ」ブロックを追加します。
- ▼トップページの出力イメージです。※スタイルはテスト確認後にそちらで整えて下さい。

スタッフ一覧ページの編集に入ります
- 既存ファイルをコピペし、cast.htmlというファイル名のファイルを作成します。
メインコンテンツ内は空にしておいて下さい。
- cast.htmlのメインブロック内に以下のタグを貼り付けます。
- ▼スタッフ一覧ページの出力イメージです。※スタイルはテスト確認後にそちらで整えて下さい。

スケジュール一覧ページの編集に入ります
- 既存ファイルをコピペし、schedule.htmlというファイル名のファイルを作成します。
メインコンテンツ内は空にしておいて下さい。
- schedule.htmlのメインブロック内に以下のタグを貼り付けます。
- ▼スケジュール一覧ページの出力イメージです。※スタイルはテスト確認後にそちらで整えて下さい。

スタッフ詳細ページの編集に入ります
- 既存ファイルをコピペし、staff.htmlというファイル名のファイルを作成します。
メインコンテンツ内は空にしておいて下さい。
- staff.htmlのhead内に以下のタグを追加します。
- staff.htmlのメインブロック内に以下のタグを貼り付けます。
- ▼スタッフ詳細ページの出力イメージです。※スタイルはテスト確認後にそちらで整えて下さい。

簡易予約フォームの編集に入ります
- 既存ファイルをコピペし、form.htmlというファイル名のファイルを作成します。
メインコンテンツ内は空にしておいて下さい。
- メインブロック内に以下のタグを貼り付けます。
注意書きもそのまま入っていますが、実際の利用時には説明箇所は変更して下さい。
- ▼簡易予約フォームの出力イメージです。※スタイルはテスト確認後にそちらで整えて下さい。

年齢制限ページを設ける場合は
Enter(入り口)ページはindex.htmlで準備し、Enterボタンのリンク先を、http://〜〜〜〜/index.phpにして下さい。
こうすることで、http://〜〜〜〜/でアクセスしてきた人は年齢制限ページをまず見ることになり、Enterを押したらCMSのトップページが開く順番になります。
サーバーにアップロードして動作確認
当然ですが、仮フォルダを作ってそちらで動作確認をして下さい。いきなり本番サイトへの上書きはしないように。
動作に問題なければcssなどお好みに合わせて調整しなおして下さい。
サンプルページのレイアウトが崩れている場合
既存サイトのスタイルより優先順位が低い場合、スタイルが反映されません。
!importantを加えてみて下さい。強制的に適用されます。
例:color: #FFF !important;
既存サイトのレイアウトが崩れている場合
CMS用で読み込んでいるcssファイルに同じスタイルがある可能性があるので確認して下さい。
CMSのマニュアル・FAQについては
マニュアルはこちら。
FAQ集はこちら。
どうしもうまくいかない場合
サポート掲示板からご質問下さい。無償サポートの範囲内で対応させて頂きます。