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

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

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

サービス詳細ページ

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

手順

前のステップでデータは入力していますので、それら全てを詳細ページに表示させる設定をテンプレートに行います。

  1. サービス詳細ページのテンプレートを準備します。
    ファイル名は任意のもので構いませんが、管理しやすいように頭にservice_をつけるといいでしょう。
    今回は、service.htmlをコピーし、ファイル名をservice_item.htmlとしました。

    詳細ページのファイル名については、管理ページで直接指定するので、どんな名前でも構いません。

  2. service_item.htmlを開き、head内に以下のタグを追加します。※service.html作成時に入れたタグは削除して下さい。

    ※詳細ページ全てに必要なタグです。忘れず入れるようにして下さい。


    ↓以下をコピペして使って下さい。
  3. mainコンテンツ内を一旦空にし、以下タグに置き換えます。
  4. htmlファイルをサーバーにアップロードして下さい。
  5. 詳細ページのファイル指定を管理ページで行います。
    「項目設定」メニューを選択し、「サービス」の編集ボタンをクリック。
  6. 「詳細用HTML」という箇所があるので、そこに直接htmlファイル名を指定します。
  7. 一覧ページにアクセスし、詳細ページへのリンクボタンをクリックしてみて下さい。
  8. 以下のように詳細ページが開けばOKです。
    スタイルはあなたの環境に合わせて整えて下さい。

詳細ページで使うタグ

{val item/〜}

valはデータを出力させる為のタグです。全ページ共通で使うタグなので覚えておきましょう。
itemは詳細ページのデータを指定するタグです。トップページや会社概要などの固定ページはここが「info」、サービスページではここが「list」でしたね。

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

使用したタグの解説

「1」の解説

{val item/title}

管理画面の「名称」を読み込むタグです。
固定ページなら「item」でなく「info」、ループ出力ページなら「list」が入りましたね。

「2」の解説

<!--{def item/new_flag}--> 〜 <!--{/def}-->

管理画面の「新着」プルダウンを選択した場合に出力させるタグです。

「3」の解説

<!--{def item/recommend●}--> 〜 <!--{/def}-->

setup.phpの「オプション選択肢」を出力させるタグです。 setupのデータは、管理画面のデータ入力ページの一番下のおすすめプルダウンに反映されます。

「4」の解説

{val item/contents}

管理画面の「説明」を出力させるタグです。

「5」の解説

{val item/image●_file}

画像を出力させるタグです。user_dataはアップロード画像を格納しているフォルダ名です。
こちらもdefで囲んでいるので、画像がアップロードされている場合に出力されます。

「6」の解説

サムネイルの画像ブロックです。同じようにdefで囲んでいます。

「7」の解説

<!--{each item/info}--> 〜 <!--{/each}-->

管理ページで入力されている「項目(1〜20)」を全て自動出力させる為のタグです。
間にある、{val item/info/title}が見出し、{val item/info/value}が本文です。

もし一覧ページのように個別に出力させたいなら、eachのタグは外し、{val item/info1/title}や{val item/info1/value}などのように直接項目番号を指定して入力して下さい。

「8」の解説

PDF資料がある場合にPDF名とリンクを出力するブロックです。

「9」の解説

./?act=contact&id={val item/info_id}

サービス専用フォームへのリンクアドレスです。

>> Next. サービス専用フォームの作成

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