人気ワード

Copy Title & URL

Bookmark

Feed

Share

HTMLテンプレートコンテンツを作成する方法

目次

  1. HTMLテンプレートとは
    1. コンテンツタイプ:HTMLテンプレート
  2. HTMLテンプレートコンテンツの作成
  3. HTMLテンプレートコンテンツの設定
    1. コンテンツ情報
    2. コンテンツ設定
    3. テンプレートHTML
      1. HTMLテンプレートでヘッダーを作成する【基本HTML】

HTMLテンプレートとは

コンテンツタイプ:HTMLテンプレート

【HTMLテンプレート】を作成するコンテンツタイプです。

【サーチプラスfor不動産】HTMLテンプレートサンプルデザインイメージ
図1-1:Web側でのサンプルデザインの表示例

【HTMLテンプレート】コンテンツを作成すると、各コンテンツから呼び出すことのできるHTMLテンプレートを作成することができます。

ヘッダーやフッターなど共通項目の変数を用意しています。

HTMLテンプレートコンテンツの作成

管理者画面:コンテンツ管理 > コンテンツを作成する

【サーチプラスfor不動産】HTMLテンプレートのコンテンツ新規作成
図2-1:コンテンツ新規作成

コンテンツ作成画面のコンテンツタイプから「HTMLテンプレート」を選択すると、HTMLテンプレートのコンテンツを作成することができます。

【サーチプラスfor不動産】HTMLテンプレートの新規作成
図2-2:HTMLテンプレートの新規作成

【サンプルデザイン】
サーチプラスfor不動産は、あらかじめサンプルデザイン(コンテンツID:headerなど)を用意しています。

【サーチプラスfor不動産】HTMLテンプレートコンテンツの検索結果画面
図2-3:HTMLテンプレートコンテンツの検索結果画面

サンプルデザインを複製・編集して、コンテンツを作成することも可能です。
コンテンツを新規作成する前にサンプルを一通り確認することで、スムーズにコンテンツの作成が行えます。

HTMLテンプレートコンテンツの設定

設定項目はコンテンツのタイプによって内容が異なります。
ここでは、「HTMLテンプレート」を作成する方法について解説します。

【サーチプラスfor不動産】HTMLテンプレートのコンテンツ設定一覧画面

1.コンテンツ情報

【サーチプラスfor不動産】HTMLテンプレートのコンテンツ情報設定画面

コンテンツタイプ
HTMLテンプレートを作成します。「HTMLテンプレート」と表示していることを確認してください。

2.コンテンツ設定

【サーチプラスfor不動産】HTMLテンプレートのコンテンツ設定画面1

コンテンツID
コンテンツURLで使用するIDです。省略した場合は自動入力します。変更するとコンテンツURLも変更されます。
※「HTMLテンプレート」を選択している場合は、変数名として使用されます。

カテゴリ名
コンテンツの管理用にカテゴリ分けが可能です。省略した場合は「未設定」になります。

コンテンツ名
コンテンツを管理する名称です。わかりやすい名称を設定します。

3.テンプレートHTML

「HTMLテンプレート」コンテンツでは、以下の編集エリアを用意しています。
編集エリアでHTMLの編集や変数を挿入します。

  • 基本HTML
【サーチプラスfor不動産】HTMLテンプレートコンテンツのテンプレートHTMLイメージ

HTMLテンプレートでヘッダーを作成する【基本HTML】

HTMLテンプレートでヘッダーのコンテンツを作成します。ここで入力するコードがコンテンツのベースとなります。
HTMLテンプレートを使用したいコンテンツ(新着物件やお問い合わせフォームなど)でHTMLテンプレート変数を挿入することで使用できます。
共通部分として作成するので、個別にコンテンツを編集することなく一括更新が行えます。

【Web側】

【サーチプラスfor不動産】HTMLテンプレート(ヘッダー)のWeb側の表示例
図3-1:HTMLテンプレートのWeb側の表示例

【基本HTML】

【サーチプラスfor不動産】HTMLテンプレートのヘッダーの記述例
図3-2:HTMLテンプレート(ヘッダー)の記述例

製品情報

不動産サイト構築システム「サーチプラスfor不動産」
製品サーチプラスfor不動産
概要不動産サイトの制作に最適なCMS不動産検索システム
自由なデザインで不動産検索・問合せ機能を追加

HTMLが直接記述できる
自由度の高いCMS不動産サイト構築システム

レスポンシブデザイン標準装備
選べるモジュールで多彩な不動産サイトに対応
URLhttps://estate.searchplus.jp/

関連記事