デザインの変更時の注意点
概要
デザインを変更する際の注意点を紹介します。
広告
詳細
レイアウトや配色などは、すべて外部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のコード内で気兼ねなく {
や }
を書くことができます。