お世話になります。
今週からCMS Desingerを検討している初心者です。
スキーマ定義、エントリー定義、デザイン定義でウェブサイトへの
埋め込みが確認できたので埋め込まれた内容のデザインを
変更しようと考えてますがデザイン定義にスタイルシートを使い
装飾するにはどのようにするかお教えください。
よろしくお願いします。
デザイン定義にスタイルシート繁栄
Re: デザイン定義にスタイルシート繁栄
smatsuさん、CMS Designerのご利用ありがとうございます。webmasterです。
CMS Designerとスタイルシート（CSS）の関係は、ぱっと見てわかりにくいかと思います。
CMS Designerのデザイン構築においてCSSを適用する場合、以下のように考えて頂くとわかりやすいかもしれません。
例えば、yourpage.php というファイルにコンテンツを埋め込んだとします。
--- yourpage.php ---
この場合ですと、デザイン定義内で、日記のタイトル部分を「diary_title」というclass名で修飾しています。この部分は、デザイン定義側で、
これに併せてcssファイルを作成し、yourpage.phpのヘッダで読み込めば、このページのコンテンツ部分に任意のスタイルを適用することが可能です。
例えば以下のような感じで、任意のcssファイルを読み込むことになるかと思います。
--- yourpage.php ---
CMS Designerとスタイルシート（CSS）の関係は、ぱっと見てわかりにくいかと思います。
CMS Designerのデザイン構築においてCSSを適用する場合、以下のように考えて頂くとわかりやすいかもしれません。
例えば、yourpage.php というファイルにコンテンツを埋め込んだとします。
--- yourpage.php ---
上記のようになっていたとして、これに対応するデザイン定義ファイルが、次のようになっていたとします。<?php require_once( "cmsdesigner/include/view.php.inc" ); // encoding="euc-jp" ?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-jp">
<title>テストページです。</title>
</head>
<body>
テストページ<br>
<table border="1">
<tr>
<td> メニュー部分 </td>
<td><cmsd:entry name="public_diary" design="default" /> </td>
</tr>
</table>
</body></html>
<?php cmsd_end_template(); ?>
すると、yourpage.phpをサーバ経由でブラウザで表示した際に、CMS Designerが、yourpage.php 内の「<cmsd:entry name="public_diary" design="default" />」の埋め込みタグの部分に、URLで指定したエントリIDに対応するエントリを、デザイン定義にあわせて次のように埋め込みます。<?xml version="1.0" encoding="UTF-8" ?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output method="text" encoding="EUC-JP" omit-xml-declaration="yes" />
<xsl:template match="/entry">
<div class="diary_title" >
<xsl:value-of select="title" />
</div>
<div class="diary_body">
<xsl:value-of select="body" disable-output-escaping="yes" />
</div>
</xsl:template>
</xsl:stylesheet>
つまり、デザイン定義に書いたHTMLに、エントリ内容が反映された上で、yourpage.phpの埋め込みタグ部分に出力されて、ブラウザで表示されることになります。--- yourpage.php?eid=00001 の結果（例） ---
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-jp">
<title>テストページです。</title>
</head>
<body>
テストページ<br>
<table border="1">
<tr>
<td> メニュー部分 </td>
<td>
<div class="diary_title" >
動物園に行きました
</div>
<div class="diary_body">
今日は動物園に行ってきました。楽しかったです。
</div>
</td>
</tr>
</table>
</body></html>
この場合ですと、デザイン定義内で、日記のタイトル部分を「diary_title」というclass名で修飾しています。この部分は、デザイン定義側で、
のように記述しているので、このように出力された、ということです。もしこれを、<div class="diary_title" >
<xsl:value-of select="title" />
</div>
<div class="diary_body">
<xsl:value-of select="body" disable-output-escaping="yes" />
</div>
とすれば、<h2>
<xsl:value-of select="title" />
</h2>
<p>
<xsl:value-of select="body" disable-output-escaping="yes" />
</p>
のように出力されます。<h2>
動物園に行きました
</h2>
<p>今日は動物園に行ってきました。楽しかったです。</p>
これに併せてcssファイルを作成し、yourpage.phpのヘッダで読み込めば、このページのコンテンツ部分に任意のスタイルを適用することが可能です。
例えば以下のような感じで、任意のcssファイルを読み込むことになるかと思います。
--- yourpage.php ---
以上、ご不明な点がございましたら細かいことでも結構ですのでご質問頂ければ幸いです。<?php require_once( "cmsdesigner/include/view.php.inc" ); // encoding="euc-jp" ?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-jp">
<link rel="stylesheet" href="yourstyle.css" type="text/css" />
<title>テストページです。</title>
</head>
<body>
：
Re: デザイン定義にスタイルシート繁栄
webmaster様
返信、遅くなり申し訳ありません。
スタイルシートの使い方、判りました。有難う御座います。
何件か試して見て出来ました。
今後ともよろしくお願い致します。
返信、遅くなり申し訳ありません。
スタイルシートの使い方、判りました。有難う御座います。
何件か試して見て出来ました。
今後ともよろしくお願い致します。