デザインの変更時の注意点

デザインを変更する際の注意点を紹介します。

レイアウトや配色などは、すべて外部CSSで設定しています。CSSファイルは css/ に格納されています。ただし、css/common.css はTinyMCEでテキストを表示する際にも使われるので、あまりいじらないことをお勧めします。（仕組みを理解した上で編集するのは問題ありません。）

訪問者向けページ用のCSSは css/default.css、管理者向けページ用のCSSは css/admin.css です。

HTML部分はすべてテンプレートで設定しています。テンプレートは templates/ に格納されています。どのタイミングでどのテンプレートが読み込まれるかは、内部構造の解説を参照してください。ただ、それなりに複雑なので、そのうち色々な設定例を用意したいと思います。

なお、テンプレートの文字コードは UTF-8N で保存する必要があります。Shift-JISなど他の文字コードになっていると、文字化けしたりエラーになったりします。

また、テンプレート内に単独で { や } を書くとエラーになります。テンプレートエンジンに採用しているSmartyでは、{ や } を特殊な文字として扱うからです。具体的には、テンプレート内に

<style type="text/css">

strong {
  color: #FF0000;
}

</style>

と書くとエラーになります。これを防ぐには、{ や } を普通の文字として扱ってほしい箇所全体を {literal} と {/literal} で囲います。具体的には、

<style type="text/css">
{literal}
strong {
  color: #FF0000;
}
{/literal}
</style>

このように書けば、エラーにならずに表示できます。以下の公式ページも参考にしてください。

CSSやJavaScriptは、外部ファイル化してしまうのも一つの手段です。それなら、CSSやJavaScriptのコード内で気兼ねなく { や } を書くことができます。

創作サイト向けコンテンツ管理システム freo（フレオ）