1. デザインテンプレートの構成を知ろう

ここでは、Webページを修正するための「デザインテンプレート」の概要について紹介させていただきます。

1-1. デザインテンプレートができること

SMPではリードのデータ管理やメールなどの施策管理だけでなく、CMSとしてマイページや申込画面のコンテンツを管理することが可能です。中級編をマスターしていただくと、SMPで作成するページのコンテンツ・レイアウト・動きを、皆様の運用に合わせてカスタマイズすることができます。このコンテンツ・レイアウト・動きを決めているのが「デザインテンプレート」です。本編では、これをカスタマイズする方法をご紹介します。

1-2. デザインテンプレートの構成要素

テンプレートの中には以下のファイルが含まれています。

・HTMLファイル：ページの見出し・本文・構造を決める

・CSSファイル：ページ内の色や配置などのレイアウトを決める

・javascriptファイル：ユーザーの閲覧や操作に応じてポップアップやデータの授受などの動きを決める

・画像ファイル：ページで表示する画像を決める

1-3. デザインテンプレートで編集できるページ

SMPでは下記図に示すページをご用意しています。これらのページ全てをSMPのデザインテンプレートで編集することができます。

拡大版ダウンロード：【標準デザインテンプレート】SMPサイトマップ(サイト構成／画面遷移設計図)

大きく分けると以下の画面があります
・キャンペーン詳細、申込フォーム
・キャンペーン一覧(ポータルページ)
・マイページ
・ログイン
・そのほかエラーや配信停止

1-4. デザインテンプレートの種類

デザインテンプレートには以下２種類あり、それぞれ適用範囲が異なります。

・全キャンペーン管理画面(青色の画面)から取得・登録する「システムテンプレート=system.zip」

・個キャンペーン管理画面(オレンジ色の画面)から取得・登録する「キャンペーンテンプレート=seminar.zip」

■「システムテンプレート」の適用範囲

システムテンプレートの編集内容は、全てのキャンペーンの、全て画面(サイトマップ参照)に反映されます。

■「キャンペーンテンプレート」の適用範囲

キャンペーンテンプレートの編集内容は、そのキャンペーンの、ピンク領域の画面(サイトマップ参照)にのみ反映されます。

1-5. デザインテンプレートのフォルダ構成

■テンプレートの構成

・キャンペーンテンプレートの中にはapplication,unsubscribeなどのフォルダがあり、これらの中にキャンペーン詳細画面、申込画面などのHTMLファイルが含まれています。また、Sharedの中にCSS,JS,画像ファイルが存在します。

・システムテンプレートの中にはlogin,mypageなどのフォルダがあり、これらの中にログイン画面やマイページ画面のHTMLファイルが含まれています。また、seminar_beseというフォルダがありますが、これは個別キャンペーンにまだキャンペーンテンプレートを適用していない場合にデフォルトで適用されるデザインです。実際にseminar_baseフォルダの中身を見ると構成がSeminar.zipと同じ(上記図参照)となっていますが、これは個別キャンペーンのデフォルトデザインだからです。

1-6. 画像・CSS・jsの編集方法

■ファイルの設置方法(フォルダの階層)

sharedの中に画像・CSS・JavaScriptのフォルダ・ファイルが用意されているので、これらの中に各種ファイルを設置してください。

■ファイルパス(相対パス)の指定方法

画像,CSS,jsが含まれるsharedフォルダは、キャンペーンテンプレートにもシステムテンプレート（seminar_beseフォルダ内）にも存在します。通常の運用であまり意識することはないですが、どのようなファイルパスを宣言するかによって、キャンペーンテンプレートのsharedフォルダ(画像,CSS,js)を読み込むか、システムテンプレートのsharedフォルダ(画像,CSS,js)を読み込むかを決めることができます。

具体的には、ファイルパスを

href="__base_system_path__/shared/css/***.css"

と書いた場合、それを宣言したHTMLファイルが仮にキャンペーンテンプレートのものであったとしても、システムテンプレートからファイルを読み込んできます。

href="__base_seminar_path__/shared/css/***.css"

と書いた場合、それを記載したHTMLファイルがシステムテンプレートのものであったとしても、キャンペーンテンプレートからファイルを読み込んできます。

1-7. 変数($FORM)の特徴

■変数とは

キャンペーンのタイトルを変更したいとき、あるいはフォームの入力項目の表示非表示を切り替えたいなどというとき、わざわざHTMLを書き替えるのは面倒ですよね。SMPでご用意している「変数」を予めHTMLに埋め込んでおけば、後の運用では管理画面から設定を少し変えるだけで、ページに出力される様々な内容を変えることができます。

■変数の仕組み

例として、管理画面で変更したキャンペーンタイトルがWebページに表示される仕組みは以下のようになっています。

1. サイト訪問者がブラウザでWebページ（キャンペーン詳細画面）を読み込む＝HTMLが読み込まれる

2. HTML内に埋め込んだ変数(例：$FORM{title})が読み込まれる

3. 変数に格納されているSMP設定項目の値(例：（キャンペーンタイトル）)が読み込まれる

4.SMP設定項目の値(例：（キャンペーンタイトル）)がWebページに表示される

このように、変数が管理画面の設定値を読み込み、その情報をページ上に表示してくれるため、HTMLを書き替える必要がなくなります。