CMS履歴(2020/07/10更新)

他のテンプレートや、自社のオリジナルデザインにCMSを組み込む方法

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

  1. CMSがあなたのサーバーで動くか、試用版を試して下さい。
    ※試用版が動作しない場合は、弊社CMSは使えません。
    試用版を試す

下準備

  1. あなたのサイトの文字コードが「UTF-8」になっているか確認して下さい。
    htmlの上の方に、<meta charset="UTF-8">など、「UTF-8」の文字があれば問題ありません。
  2. 文字コードに問題なければ、冒頭のステップでテストをした「試用版」ファイルから以下の赤ワクファイルだけ抜き出し、あなたのサイトフォルダに移動して下さい。
    ※同じフォルダ名やファイル名があると上書きされてしまいます。ご注意下さい。
    .htaccessファイルが見当たらない場合はこちら。
  3. 続いて、original_sampleset.zipをダウンロード&解凍します。
    original_sampleset.zipのダウンロード

    画像がない場合の代替画像(noimg.png)と、スタイルシート(stylestyle.css)の2枚のファイルが入っています。
    cssは、オリジナルデザインにCMSを組み込みやすくする為に弊社で用意したものです。後で変更して頂いて構いません。
    こちらの2枚のファイルもあなたのサイトに移動して下さい。
  4. 以下より、あなたのサイトの編集作業に入ります。

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

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

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

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

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

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

↓トップページのデモサイトです。

  1. トップページ(通常はindex.html)のファイル名をtop.htmlに変更。

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

  2. お知らせ欄の出力タグを追加。
  3. トップページ出力用コンテンツタグを追加。

続いてランチメニュー(一覧ページ)の準備に入ります

↓ランチページのデモサイトです。

  1. top.htmlを複製し、lunch.htmlというファイル名のファイルを作成します。
    メインコンテンツ内は空にしておいて下さい。
  2. lunch.htmlのhead内に以下のタグを追加します。
  3. lunch.htmlのメインブロック内に以下のタグを貼り付けます。

続いてテイクアウトメニュー(一覧ページ)の準備に入ります

↓テイクアウトページのデモサイトです。

  1. 手順は上のランチメニューと同じなので、先に作成したlunch.htmlを複製し、ファイル名をtakeout.htmlに変更するだけでOKです。

続いてコースメニュー(一覧ページ)の準備に入ります

↓コースページのデモサイトです。

  1. 手順は上のランチメニューと同じなので、先に作成したlunch.htmlを複製し、ファイル名をcourse.htmlに変更します。
  2. コンテンツを以下に置き換えて下さい。コースメニューは詳細ページを持たせているので、リンクタグが追加されています。
    詳細ページが不要なら、lunch.htmlを複製してファイル名だけcourse.htmlに変更しておけばOKです。

続いてコースメニューの詳細ページの準備に入ります

↓コース詳細ページのデモサイトです。

  1. top.htmlを複製し、course2.htmlというファイル名のファイルを作成します。
    メインコンテンツ内は空にしておいて下さい。
  2. course2.htmlのhead内に以下のタグを追加します。
  3. メインブロック内に以下のタグを貼り付けます。

続いてアクセスページの準備に入ります

↓アクセスページのデモサイトです。

  1. top.htmlを複製し、access.htmlというファイル名のファイルを作成します。
    メインコンテンツ内は空にしておいて下さい。
  2. access.htmlのメインブロック内に以下のタグを貼り付けます。

続いてスタッフ募集(一覧ページ)の準備に入ります

↓スタッフ募集ページのデモサイトです。

  1. 先に作成したlunch.htmlを複製し、ファイル名をrecruit.htmlに変更します。
  2. recruit.htmlのメインブロックを一旦空にし、以下のタグを貼り付けます。

最後に、お問い合わせフォームの準備に入ります

↓お問い合わせページのデモサイトです。

  1. top.htmlを複製し、contact.htmlというファイル名のファイルを作成します。
    メインコンテンツ内は空にしておいて下さい。
  2. メインブロック内に以下のタグを貼り付けます。
  3. フォームの通知先メールアドレスなどの設定はsetup.phpで行います。
    詳しくはマニュアルをご参照下さい。

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

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

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

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

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

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

飲食店向け汎用CMSのマニュアル・FAQ

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

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

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

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