CMS デザインガイド [1/12] CMS デザインガイド Contents Management System 2006/6/5
CMS デザインガイド [2/12] ::: 目 次 [ A-1] CMSの 仕 組 み [ A-2] テンプレートについて [ A-3] テンプレートの 作 成 [ A-4] template.iniについて [ A-5] テンプレートの 配 置 について [ A-6] 便 利 な 機 能
CMS デザインガイド [3/12] [A-1] CMSの 仕 組 み ::: 1.CMSとは CMSとは Contents Management System の 略 でサイトのコンテンツである 画 像 やテキストを 管 理 し てページの 作 成 更 新 を 自 動 化 するシステムです デザインをテンプレートと 呼 ばれる 雛 型 で 管 理 します テンプレートの 内 容 を 基 に 適 切 な 入 力 画 面 を サイトマネージャ が 自 動 的 に 作 成 します 入 力 画 面 から 入 力 されたコンテンツをデータベースへ 保 管 し このデータからサイトを 作 成 します テンプレートは 既 存 のデザインに 専 用 タグを 追 加 するだけで 作 成 出 来 ます 現 在 運 用 されているサイトをCMSへ 移 行 する 事 でデザインはそのままに ユーザーが 簡 単 に 更 新 できるサイトにする 事 が 可 能 です デザイナー ユーザー テンプ レート [ サイトマネージャ ] コンテンツ 登 録 ( テキスト 画 像 ) サイト 作 成 データベースへ 保 管 ::: 2.CMSを 使 うメリット ブログもCMSの 一 種 ですがブログに 比 べてCMSではユーザーが 自 由 にデザインや サイトの 構 造 を 設 定 できる 点 がメリットとして 上 げられます 特 にデザインに 関 してはサイトの 全 体 的 なデザインだけでは 無 く ページ 別 にデザインを 選 べますので 商 品 紹 介 や 会 社 概 要 等 の 複 雑 なデザインでも html のタグを 意 識 する 事 なく 簡 単 に 編 集 する 事 が 可 能 です [ ブログ ] 全 体 的 なデザインは ユーザーで 設 定 できるが 各 ページはユーザーが レイアウトを 行 う 必 要 がある 為 ユーザーに スキルが 必 要 となる [ CMS ] 全 体 的 なデザインはブロ グと 同 様 各 ページの 内 容 に 合 った デザインが 選 べる 為 ユーザーは 簡 単 にページ の 更 新 が 可 能
CMS デザインガイド [4/12] [A-2] テンプレートについて ::: 1.サイトテンプレートとページテンプレート テンプレートはサイト 全 体 のデザインとなる サイトテンプレート と ページ 毎 のデザインとなる ページテンプレート に 分 かれています サイトテンプレート は1サイトに 必 ず 一 つ 必 要 です ページテンプレート 内 はエントリという 単 位 でデータを 入 力 します サイトテンプレート メニュー ページテンプレート 画 像 項 目 1 文 字 項 目 1 文 字 項 目 2 文 字 項 目 1 エントリ 画 像 項 目 1 文 字 項 目 2 文 字 項 目 1 画 像 項 目 1 文 字 項 目 2 テンプレートが 上 記 のように 分 かれている 事 で 複 数 のデザインが 必 要 な 場 合 に ページテンプレートを 作 るだけで 済 み 効 率 が 良 くなります この 作 業 は Dreamweaver 等 のテンプレート 機 能 が 付 いているweb 開 発 ツールと 相 性 が 良 くテンプレートの 部 分 が サイトテンプレート になり 編 集 可 能 領 域 の 部 分 が ページテンプレート になります
CMS デザインガイド [5/12] [A-3] テンプレートの 作 成 ::: 1. 例 題 それでは 例 題 として 簡 単 なテンプレートを 作 ります 青 い 部 分 が 専 用 タグです 専 用 タグの 詳 細 は 別 冊 の CMS 専 用 タグ 説 明 書 を 参 照 してください 解 説 は 次 のページで 行 います (ソース 中 の 行 番 号 は 説 明 用 ですので 実 際 には 不 要 です ) サイトテンプレート 1: <html><head></head> 2: <body> 3: サイトタイトル<br /> 4: <ul> 5: <$Pages$> 6: <li><a href="<$pageurl$>"><$pagemenutitle$></a></li> 7: <$/Pages$> 8: </ul><br /> 9: <$PageTemplate$> 10: </body> 11: </html> ページテンプレート 1: <div> 2: <$Entries$> 3: <hr> 4: 商 品 : <$EntryItem id="1" name=" 商 品 名 "$><br /> 5: 価 格 : <$EntryItem id="2" name=" 価 格 "$> 円 <br /> 6: <$/Entries$> 7: </div> サイトマネージャ 上 での 入 力 画 面 商 品 名 [ ] 価 格 [ ] 公 開 されるソース (ページ 名 : 商 品 一 覧 として2エントリ 追 加 時 ) 1: <html><head></head> 2: <body> 3: サイトタイトル<br /> 4: <ul> 5: <li><a href="http://www.xxxx.xx/pg20/index.html"> 商 品 一 覧 </a></li> 6: </ul><br /> 7: <div> 8: <hr> 9: 商 品 : 商 品 1<br /> 10: 価 格 : 500 円 <br /> 11: <hr> 12: 商 品 : 商 品 2<br /> 13: 価 格 : 600 円 <br /> 14: </div> 15: </body> 16: </html>
CMS デザインガイド [6/12] ::: 2. 例 題 の 説 明 サイトテンプレート 今 回 の 例 題 ではメニューの 下 にページテンプレートの 内 容 が 出 力 されるようにしています 5~7 行 目 でメニューの 表 示 を 行 っています ユーザーが 複 数 のページを 登 録 すればページ 数 だけ 繰 り 返 し 表 示 されます 9 行 目 でページテンプレートを 出 力 しています サイトテンプレートでは 必 ずこの<$PageTemplate$>タグを 一 つ 入 れるようにしてください ページテンプレート ページテンプレートではユーザーが 登 録 を 行 う 部 分 をエントリとして 扱 います <$Entries$>から<$/Entries$>までがエントリとなり ユーザーが 入 力 するエントリの 個 数 だけ 繰 り 返 されます ::: 3. 特 殊 なエントリ ページテンプレートで<$Entries$>の 範 囲 内 に 記 述 する 通 常 のエントリ 以 外 に 2つの 特 殊 なエントリがあります これらは 通 常 のエントリのように 繰 り 返 される 事 はありません ページ 基 本 デザイン 見 出 しなどの 繰 り 返 さない 部 分 を<$Entries$>の 範 囲 外 に 記 述 できます この 範 囲 外 に 記 述 した 部 分 はエントリ 一 覧 の ページ 基 本 デザイン として 編 集 できます (<$EntryItem$> 等 の ID は<$Entries$> 内 とは 別 に 1 から 振 ってください) ただしページテンプレートに<$Entries$>は 必 ず 必 要 ですので 繰 り 返 さないデザインの 場 合 は<$Entries$>の 範 囲 内 に 記 述 して 後 述 の Tempalte.ini で Template_MaxEntries = 1 と 指 定 してください サイト 基 本 デザイン サイトテンプレートにも<$Entries$>を 記 述 する 事 ができます エントリは1 個 固 定 で<$Entries$> 範 囲 外 に 記 述 する 事 もできません サイトロゴなど 全 ページに 渡 る 部 分 をユーザーに 変 更 させたい 場 合 は ここに 記 述 してください
CMS デザインガイド [7/12] [A-4] template.ini について ::: 1.tempate.ini とは 前 章 でテンプレートの 記 述 方 法 を 説 明 しましたが テンプレートにはソースのほかに テンプレートの 動 作 を 決 める template.ini ファイルが 必 ず 必 要 です テキストファイルですので 下 記 の 記 述 例 を 参 考 に 作 成 してください 全 ての 項 目 を 指 定 する 必 要 はありません 詳 細 は 次 のページで 説 明 します template.ini 記 述 例 ( 先 頭 //はコメント 行 *は 初 期 値 ) // 種 類 (site *, page) Template_Kind = page // 携 帯 (true: 携 帯, false:pc*) Template_Mobile = false // カテゴリ Template_Category = 新 着 情 報 // タイトル Template_Title = 新 着 情 報 詳 細 // テンプレートファイル 名 Template_File = index.html // CSSファイル 名 Template_Css = site-style.css // テンプレートスクリーンショットイメージファイル 名 Template_Image = template.jpg // 最 大 エントリ 数 (0: 無 制 限 *, 1:1 件 のみ 入 力 可 能 ) Template_MaxEntries = 0 // 子 ページ 受 入 (true: 可, false: 不 可 *) Template_SubpageRcv = true // 子 ページ 一 覧 (true: 可, false: 不 可 *) Template_SubpageList = false // エントリ 一 覧 表 示 用 ID (page 用 ) Template_DisplayID = 1 // エントリ 入 力 用 備 考 (タグ 可 能 ) Template_EntryMemo = // 拡 張 フォルダ 名 (カンマ 区 切 りで 複 数 ) Template_ExtPath = // サイトテンプレート 無 効 (true: 無 効, false: 有 効 *) Template_SiteDisabled = false // ページ 種 別 (normal*, top) Template_PageKind = normal // 備 考 ( 改 行 は\n タグ 可 能 ) Template_Memo = 説 明 文 // 作 成 者 Template_Author = T.Tanaka // 最 終 変 更 者 Template_Modifier = T.Tanaka
CMS デザインガイド [8/12] ::: 2.Tempate.ini 各 項 目 の 説 明 各 項 目 の 意 味 は 下 記 の 通 りです 値 の*は 指 定 しない 場 合 の 初 期 値 です 種 類 (Template_Kind = (site *, page)) テンプレートの 種 類 です site を 指 定 するとサイトテンプレート page を 指 定 するとページテンプレートとなります 携 帯 (Template_Mobile (true: 携 帯, false:pc*)) true を 指 定 すると 携 帯 用 テンプレート false でPC 用 テンプレートとなります 指 定 の 無 い 場 合 はPC 用 です カテゴリ (Template_Category) テンプレート 選 択 時 のカテゴリです ページテンプレートの 場 合 はメニュー 名 の 初 期 値 にもなります タイトル (Template_Title) ユーザーがテンプレートを 選 択 する 時 に 表 示 されるタイトルです テンプレート CSSファイル 名 (Template_File, Template_Css) テンプレート 本 体 やCSSのファイル 名 を 指 定 します テンプレートSS 名 (Template_Image) テンプレート 選 択 時 に 出 すサムネイルの 画 像 ファイル 名 です サイズは(150px x 150px) 最 大 エントリ 数 (Template_MaxEntries (0: 無 制 限 *, 1:1 件 のみ 入 力 可 能 )) 1 を 指 定 するとエントリ 一 覧 が 出 ずページ 一 覧 からすぐにエントリの 編 集 が 可 能 になります 子 ページ 受 入 (Template_SubpageRcv (true: 可, false: 不 可 *)) 子 ページを 受 け 入 れ 可 能 なページ(<$SubPages$>で 子 ページへのリンクが 出 るページ)の 場 合 には true を 指 定 してください 子 ページ 一 覧 (Template_SubpageList (true: 可, false: 不 可 *)) 新 着 情 報 の 親 ページなどの 子 ページ 一 覧 ページの 時 に true を 指 定 します true を 指 定 した 場 合 <$SubPages$>の page オプションで 選 択 の 対 象 となります エントリ 一 覧 表 示 用 ID(Template_DisplayID) 通 常 エントリ 一 覧 画 面 では ID の 1 番 が 表 示 されますが 違 う ID を 表 示 したい 場 合 に 指 定 します ページテンプレートのみで 有 効 です エントリ 入 力 用 備 考 (Template_EntryMemo (タグ 可 能 )) サイトマネージャのエントリ 一 覧 画 面 でエントリの 説 明 文 として 表 示 されます 拡 張 フォルダ 名 (Template_ExtPath (カンマ 区 切 りで 複 数 )) 通 常 は template.ini と 同 一 フォルダか img images image フォルダしか 公 開 時 にコピー されません これ 以 外 に 使 うフォルダがある 場 合 にはここで 指 定 してください ページ 種 別 (Template_PageKind (normal*, top)) ページの 種 類 を 指 定 します top を 指 定 するとユーザーがテンプレート 選 択 した 時 に 自 動 で( 保 存 場 所 / 種 別 トップ ) になります normal は 通 常 ページで( 保 存 場 所 空 白 種 別 通 常 )となります
CMS デザインガイド [9/12] サイトテンプレート 無 効 (Template_SiteDisabled (true: 無 効, false: 有 効 *)) true を 指 定 するとサイトテンプレートを 無 視 してページテンプレートのみを 書 き 出 します ポップアップページ 等 でサイトテンプレートのヘッダ 等 が 不 要 なページを 作 成 する 際 に 指 定 してください ページテンプレートのみで 有 効 です 備 考 (Template_Memo ( 改 行 は\n タグ 可 能 )) ページテンプレートの 選 択 画 面 で 説 明 文 として 表 示 されます サイトテンプレートの 場 合 にはテンプレート 名 として 表 示 されます 作 成 者 最 終 変 更 者 (Template_Author, Template_Modifier) 作 成 者 と 最 終 変 更 者 の 氏 名 です
CMS デザインガイド [10/12] [A-5] テンプレートの 配 置 について ::: 1.テンプレートのフォルダ 構 成 テンプレートを 配 置 するには 各 ユーザーのホームページスペースにFTPで 接 続 し ドキュメントルートに weble_template フォルダを 作 成 します この 中 にサイトテンプレートとページテンプレートを 入 れますが 配 置 は 下 記 のように サイトテンプレートフォルダの 下 にページテンプレートフォルダを 配 置 する 構 成 をおすすめします 配 置 が 終 了 すればサイトマネージャから 登 録 を 行 ってください システムへテンプレートがコピーされます [ユーザースペースへのテンプレート 配 置 例 ] /htdocs /weble_template /tpl01 template.ini index.html site-style.css template.jpg サイトテンプレート /images image01.jpg /top template.ini index.html template.jpg /images image01.jpg /company template.ini.html template.jpg /images image01.jpg ページテンプレート ページテンプレート フォルダ 名 ファイル 名 は 英 数 で 表 記 してください
CMS デザインガイド [11/12] [A-6] 便 利 な 機 能 ::: 1.ページテンプレート 識 別 タグ <!--PageTemplateBegin--> ~ <!--PageTemplateEnd--> ページテンプレート 作 成 時 にはサイトテンプレートを 合 わせた 形 で 編 集 する 方 が 便 利 です この 時 上 記 のタグをページテンプレートとの 境 に 入 れるとテンプレート 登 録 時 に 自 動 的 に サイトテンプレート 部 分 が 削 除 されます Dreamweaver のテンプレート 機 能 を 使 った 場 合 の 使 用 例 <html> <body> (サイトテンプレート 部 ) <!-- InstanceBeginEditable name="xxxx" --> <!--PageTemplateBegin--> (ページテンプレート 部 ) <!--PageTemplateEnd--> <!-- InstanceEndEditable --> (サイトテンプレート 部 ) </body> </html> ::: 2.サイトベースアドレス 指 定 方 法 テンプレートソース テンプレート 登 録 後 href="// href="<$sitebaseurl$> src="// src="<$sitebaseurl$> url(// url(<$sitebaseurl$> サイトテンプレートはホームページ 公 開 時 に 全 てのページに 展 開 されますので ここで 使 う 固 定 の 画 像 (<$EntryPict$>を 除 く 画 像 )はサイトベースアドレスから 指 定 する 必 要 があります この 時 <$SiteBaseUrl$>をパスの 頭 に 付 けるとweb 開 発 ツールで 表 示 が 崩 れますので 上 記 の 方 法 で 記 述 するようにしてください CSSでも 使 用 可 能 です 使 用 例 テンプレートソース テンプレート 登 録 後 <a href="//index.xml"> <a href="<$sitebaseurl$>index.xml"> <img src="//images/xxxx.gif" /> <img src="<$sitebaseurl$>images/xxxx.gif" /> background-image: url(//image/xxxx.gif); background-image: url(<$sitebaseurl$>images/xxxx.gif);
CMS デザインガイド [12/12] ::: 3. 専 用 タグのコメント 化 <!--<$Entries$>--> EntryPict や Entries など 専 用 タグをコメントにした 方 がデザイン 時 に 便 利 な 場 合 が あります 全 ての 専 用 タグは 上 記 のようにコメントにしても 登 録 時 にコメントタグが 取 り 除 かれます この 時 に <!-- や --> と 専 用 タグの 間 はスペース 無 しか1 個 にしてください ::: 4.ダミー 画 像 について <img src= xxxxx.jpg name= weble width=nnn height=nnn /> EntryPict 等 でデザイン 時 に 画 像 の 配 置 を 確 認 したい 場 合 上 記 のようにイメージタグの name 値 を weble にする 事 で 登 録 時 にイメージタグが 取 り 除 かれますので 配 置 の 確 認 用 にダミーの 画 像 を 入 れる 事 が 可 能 です 前 述 の 専 用 タグのコメント 化 と 組 みあわす 事 でテンプレートの 作 成 がイメージに 近 いものと なります ( 例 ) <img src= dummy1.jpg name= weble width=99 height=99 alt= 商 品 画 像 /> <!--<$EntryPict id= 1 size= 99x99 name= 商 品 画 像 $>--> ::: 5.コメント 化 について <$weble$> ~ <$/weble$> 上 記 のタグを 入 れる 事 で 登 録 時 にタグ 間 の 文 字 を 全 て 取 り 除 きます ( 例 )... テンプレートの 内 容... <!--<$weble$>--> この 場 所 はテンプレート 登 録 時 に 取 り 除 かれます コメント 等 にお 使 いください <!--<$/weble$>-->... テンプレートの 内 容...