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

汎用CMS(企業向け)のご紹介

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

トップページの作成

以下はデモページです。※このページを作るわけではありません。

設定

  1. 今からトップページで使う項目をセットしていきます。
    左メニュー「項目設定」を選択し、「新規追加」ボタンをクリック。

    サンプルセットは新規登録ができないので、ここのステップは設定済みです。
    以下のリストが表示されますので、「TOP」の「編集」ボタンを押して次のステップに移動して下さい。

    ※並び順はこの画像の通りではない可能性があります。

  2. 一番上のプルダウンから、今から設定するページを選択します。
    今回はまずトップページ(TOP)を選択。
  3. 見出しを入力していきます。
    今回はわかりやすいようにご挨拶以外はそれぞれの項目番号を記入しましたが、あなたのサイトの出力用に合わせて入力して下さい。
    ここの見出しはサイト側に出力させない事もできます。その場合は、単にデータ入力ページに使われる見出しとなります。
  4. それでは、データを入力していきましょう。
    左メニューから「TOP」を選択し、「新規追加」ボタンをクリック。

    サンプルセットは新規登録ができないので、ここのステップは設定済みです。
    以下のリストが表示されますので「編集」ボタンを押して次のステップに移動して下さい。

    ※並び順はこの画像の通りではない可能性があります。

    「固定ページ」では新規追加ボタンで複数データを登録しても、最新の1件のみしかサイトに反映されません。
    複数データが全て反映されるのは「ループ出力」タイプのページのみです。

  5. 今セットした見出しが反映されていますので、右側の入力エリアに本文を入力していきましょう。画像もアップロードしてみましょう。

各項目のタグ解説

入力データの名前はそれぞれ以下の通りです。
html側を見てみると、それぞれのname値がついているのでそちらでも確認できます。

PDFファイルもデフォルトで登録ページにセットされています。項目設定メニューでの設定箇所はありません。

トップページ(&固定ページ)で使う出力用タグ

{val info/〜}

valはデータを出力させる為のタグです。全ページ共通で使うタグなので覚えておきましょう。
infoはトップページ(他、固定ページ専用)のデータを指定するタグです。

  • ページタイトル(名称)はtitleなので、トップページ(固定ページ)の出力用タグは{val info/title}です。
  • ページコメント(説明)はcontentsなので、トップページ(固定ページ)の出力用タグは{val info/contents}です。
  • 1つ目の見出しはinfo1/title、本文はinfo1/valueなので、トップページ(固定ページ)の出力用タグはそれぞれ{val info/info1/title}{val info/info1/value}です。
  • 1つ目の画像の見出しはimage1/title、画像はimage1_fileなので、トップページ(固定ページ)の出力用タグはそれぞれ{val info/image1/title}{val info/image1_file}です。
    但し、{val info/image1_file}だと画像ファイル名がそのまま表示されるだけなので、<img src="./user_data/{val info/image1_file}" alt="">とimgタグを使って指定しましょう。
    user_dataは画像がアップロードされるフォルダ名です。

実践してみましょう

  1. サンプルデータのtop.htmlを開き、mainブロック内に上記のタグを入力してアップロードして下さい。
    タグは上の解説文のものをコピペしてきて下さい。
    ファイル名(top.html)は変更しないで下さい。
    プログラムがこのファイルを認識してindex.html代わりに使いますので、ファイル名は変更しないで下さい。また、他にindex.htmlがあるとそちらが優先表示されてしまいますので、作らないように。top.htmlというファイル名ですが、実際にこのファイルにアクセスする事はありません。通常のindex.html同様、http://〜〜〜/でアクセスできます。
  2. プレビュー確認します。
    上の注意書きにあるように、top.htmlへのアクセスではなく、
    http://〜〜〜〜〜/
    でアクセスします。
    以下のようにそれぞれ出力されていればOKです。
  3. 「項目2」以降もそれぞれ出力させるタグを追加しましょう。
    h2やh3の見出しタグを使うとサンプル用のスタイルが反映されます。
    (※画像名はサイト側に表示させる必要はなさそうなので外しています。)
    ※下の方でタグをまとめてコピペできるようにしていますので、手打ちが面倒な人はここは頭にだけ入れておいて下さい。
  4. 再びプレビュー。
    全データ反映されていればOKです。

管理画面での入力値がない場合

管理画面でデータの入力をしない場合、以下のように残ったパーツだけが出力されてしまいます。
以下は1つ目(ご挨拶)と2つ目のデータを入力しなかった場合の例ですが、見出し用のスタイルと段落の余白がそのまま出てしまっています。

入力データがある場合にのみ、ブロックを出力させるタグ

<!--{def info/info●/value}--> 〜 <!--{/def}-->

defは「データが存在する場合」を意味します。
infoは先に解説したのと同じ、トップページ(他、固定ページ専用)のデータを指定するタグです。
valueはテキストエリアに入力した本文でしたね。

以下のように使います。

「info1/value」は先に解説しているように、1つ目の本文です。
つまり、1つ目の本文が入っている場合にのみ、間に挟んだブロックを出力させる、という事になります。

再びアップロードしましょう。
以下のようにブロックごと消えてすっきりしました。

もう1つ補足。

画像は見出しなどの装飾はないので、アップロードしていない場合に余分なパーツが残る事はないのですが、このサンプルでは段落タグを使っているのでその分の余白が残ります。段落タグごと非表示にしたければ以下のようにして下さい。
以下は、「image1_file/value(画像1)がアップロードされている場合のみ、間のブロック(画像1)を出力させる」、という意味になります。


以下をコピペして使って下さい。●部分は出力させたい項目名に合わせて数字を入れて下さい。

まとめたタグ

↓いままでの解説をまとめたタグです。(項目1〜項目20)

PDFファイルの出力用タグ

PDFファイルの出力タグは以下です。

<a href="./?act=output_file&id={val info/pdf}">{val info/pdf_info/name} (サイズ:{val info/pdf_info/size} Byte)</a>
defと組み合わせて以下のように使って下さい。

↓出力サンプル。

容量表示が不要なら(サイズ 〜 Byte)を削除して下さい。
ここではpdfファイル名をそのまま出力させていますが、代わりにPDFアイコンなど使ってもいいと思います。
※日本語は環境によって化ける場合があるので使わないようにして下さい。

>> Next. 会社概要ページの作成

このコンテンツのトップに戻る