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

下準備方法【通常版・高機能版】

古いWEBデザインの場合、レイアウトが崩れる可能性がありますが、組み込み自体は可能なので、ダウンロード後に崩れた部分のhtmlやcssを調整してみて下さい。
また、ご利用中のCSSなどに影響を受ける場合もあります。その際も生成後に調整してみて下さい。

補足:「とりあえず今すぐ試したい」場合は(サンプルzip)

1カラム用と、2カラム用の必要最低限のタグのみ配置したサンプルzipをご用意しております。
いずれかのzipファイルをダウンロード後、解凍せずzipのままでアップロードし、生成して下さい。
※このサンプルzipを使う場合は、下の作業は不要です。

「生成前」と「生成後」でzipを展開して比較頂くと、違いがわかりやすいかと思います。
(当ページの一番下に、弊社の一般用のhtmlテンプレートを使った出力例もあります。)

弊社テンプレートや、オリジナルデザインに組み込む手順

※ここの手順がよくわからない場合は、上の「とりあえず今すぐ試したい」にあるサンプルzipを使っての生成を試してみて下さい。

必ず元ファイルはバックアップしておいて下さい。
CMSテンプレート化システムを通すと、不要なファイルが削除されたり、CMS専用のファイル・フォルダ類が追加されます。
必ずオリジナルファイルはバックアップしておいて下さい。

①index.htmlの確認

トップページ用ファイル(index.html)を準備して下さい。
通常、トップページはindex.htmlなのでそれがちゃんとあればOK。もしない場合は準備して下さい。

②list.htmlの準備

トップページ以外の土台となるファイル(list.html)を準備します。
list.htmlというファイル名がない場合、既存のhtmlを複製し、ファイル名をlist.htmlに変更してメインコンテンツを空にしておいて下さい。
既にlist.htmlというファイルを使っている場合、そのファイルは別名に変更して下さい。

③CMSのメインコンテンツ用のタグを入れます

タグ

<!--CMS-TEMPLATE-main-->

上で準備したindex.htmllist.htmlにそれぞれ1行、CMSのメインコンテンツを出力させる目印タグを追加します。タグはhtml側から追加して下さい。CMSとは関連なく表示させたおきたいメインコンテンツ情報はそのまま残しておきます。
ダウンロードすると、自動的に以下の情報を出力させるタグに置き換わります。




④ - 1 サブコンテンツ専用のタグを入れます

タグ

<!--CMS-TEMPLATE-sub-side-->

上で準備したindex.htmllist.htmlに、CMSのサブコンテンツ専用タグを出力させる目印タグを追加します。必ずサブコンテンツブロック内に入れて下さい。
※サブコンテンツが「ない」デザインの場合、このステップは飛ばして次のステップをお読み下さい。

このステップのタグと、下のステップのタグから出力される内容は「全く同じ内容」です。
ただ、出力用のレイアウトが異なっています。

④ - 2 サブコンテンツがないデザインをご利用の場合

タグ

<!--CMS-TEMPLATE-sub-top-->

1カラムレイアウトなど、サブコンテンツがないデザインをご利用の場合、コンテンツ上部に横並びで出力させるレイアウト用のタグを利用します。基本的には<!--CMS-TEMPLATE-main-->のすぐ上の行に入れればOK。
※サブコンテンツが「ある」デザインの場合、このステップは飛ばして下さい。

このステップのタグと、上のステップのタグから出力される内容は「全く同じ内容」です。
ただ、出力用のレイアウトが異なっています。

該当データが「4個以上」で、横スライドショーが起動します。
3個だと、単に3列の固定並び、それ以下だとレイアウトが崩れる可能性があります。
スライドの個数を変更したい場合は、ダウンロードファイルのslick.jsを開いて「slidesToShow」で枚数を調整して下さい。

⑤最後に、フォルダごとzip圧縮して下さい

その他のファイルが入っていても構いませんので、WEBサイト用のファイルを丸ごとzip圧縮をかけておいて下さい。
容量が大きな画像フォルダなどは、とりあえずzipから省いておいて頂くと、スムーズにダウンロードが進みます。

⑥以上で下準備は完了です!

あとはzipをアップロードし、テーマを選んでからダウンロードボタンを押すだけです。

おまけ

CMS化された事のない弊社テンプレートにこのシステム(高機能版の不動産タイプ)を導入したデモサイトです。
アフターのリンク先は、ダウンロード直後のファイルではなく以下の編集を終えたファイルになります。

  • ダウンロードしたファイルのトップページの赤い注意書きは削除。
  • 削除した赤い注意書き情報をもとに、メニュー部分を手作業で入れ替え。
  • トップページへのリンクが<a href="index.html">になっている場合のみ<a href="./">に変更。この意味については各CMSマニュアルをお読み下さい。

tp_biz54のビフォー(左)&アフター(右)

 

tp_clinic5のビフォー(左)&アフター(右)