【freo】【freo講座】【初心者の為のfreoテンプレート編集講座】【基本編(01)】freoの構造について
- 2012/08/13 20:30
- 80
freoのテンプレートの編集方法について簡単にご説明します。
ものすごく簡単に記載しているので、ニュアンス等が違っている場合がありますが、そこら辺は大目に見て下さい。
freoを使ったサイトでは、
データベースに登録されている情報が
テンプレートで指定した形式で
スタイルシートで設定したスタイルで
表示されます。
なにを表示できるかは、[freo/libs/freo]フォルダ以下のphpファイルで
どのように表示するかは、[freo/templates]フォルダ以下のhtmlファイルで
スタイルの設定は[freo/css]フォルダ以下のcssファイルで決められています。
テンプレートを編集するときは、自分が
・なにを表示したいのか、
・どのように表示したいのか、
・どんなスタイルで表示したいのか、
をわけて考える必要があります。
それによって、編集すべきファイルが変わってくるからです。
なにを表示したいのか
データベースに登録されている情報を表示してみます。
まず、データベースにはどんな情報が登録されているのか確認します。
freo公式サイト→各種解説→データベース構成の解説ページを開きます。
ここでは、freoで使用するデータベースに登録されている情報を見ることができます。
まずは、本体のテーブル構成ページを見てみます。
ここには、freo本体で使用されるテーブルに登録される情報の一覧を見ることができます。
そもそもデータベースってなにかっていうと、freoに登録される情報が記録されているものです。
じゃあテーブルってなにかっていうと、データベースに登録されている情報を分類分けしているものです。
データベースに登録されている情報は、テーブルごとに分類されています。
データベースをある一つの国だとすると、テーブルは都道府県、フィールドは市町村、といった感じです。
データベースがある本棚だとすると、テーブルは一つの本、フィールドはその中にある絵や文章といった感じです。
- フィールド…データベースに登録される情報の名前。
- タイプ…フィールドのタイプです。VARCHARの後にある(数字)は文字数を表しています。
- ヌル…フィールドが必須項目かそうでないかを定義しています。必須でない場合はYESと記載されています。必須項目である場合は空欄です。
- キー…それぞれのフィールドを関連付けるためのものです。たとえば、エントリーIDがそのエントリーのタイトルを呼び出す(判断)するための鍵になる、といった感じです。
- 備考…AUTO_INCREMENTと書かれているものは自動的に入力されます。
- 格納データ…そのフィールドがつまりなんなのかっていう説明です。
この表を見れば、自分が表示したいものがどのテーブルのどのフィールドに格納されているのかが判ると思います。
どのように表示したいのか
本体のテーブル構成ページで自分の表示したい情報が見つかったら、テンプレートを編集します。
テンプレートでは、表示したい情報をどのように表示するかを設定できます。
たとえば、<p>~</p>のような段落で表示するのか、<h1>~</h1>のように見出しで表示するのか、などです。
これは、実際にテンプレートをエディタで開いてみるのが一番わかりやすいです。
たとえば、[freo/templates/header.html]をエディタで開くと、23行目に
と書いてあります。
これは、
という意味になります。
これを段落に変えたい場合は
にすればいいですし、リンクを取りたいなら
にすればいいですし、罫線を下につけたいなら
にすればいいわけです。
どんなスタイルで表示したいのか
freo公式のデザインの変更時の注意点をに書いてありますが、freoではレイアウトや配色などは、すべて外部CSSで設定しています。
[freo/templates/header.html]を見ると、12行目で[freo/css/default.css]を読み込んでいるので、この[freo/css/default.css]を変更するのが良いでしょう。
ためしに、見出しのスタイルを変更して、<h1>~freoのタイトル~</h1>部分を変更してみます。
[freo/css/default.css]をエディタで開き、36行目~39行目の
line-height: 1.0;
margin: 0;
}
を
line-height: 1.0;
margin: 0;
border:10px solid #cccccc;
background-color:#000000;
color:#ffffff;
}
に変更してみて下さい。
[freo/css/default.css]を上書きしてアップロードすると、freoのタイトルのスタイルが変更になっていると思います。
このように、スタイルをどんどん変えると、同じテンプレートを使用していても、ガラッとイメージを変えることができると思います。
cat-korokoro
freo初心者です(60代)
投稿キィープラグインDLしましたが、htmlの書き換えがよくわかりません
<!--{if $page.restriction == 'password' and !$smarty.session.security.page[$page.id] and $freo.user.authority != 'root' and $freo.user.authority != 'author'}-->
<form action="{$freo.core.http_file}/page/{$page.id}" method="post" class="passwordForm">
<fieldset>
<legend>認証フォーム</legend>
<p>
<input type="text" name="page[password]" size="30" value="" />
<input type="submit" value="パスワード認証" class="passwordSubmit" />
</p>
</fieldset>
</form>
<!--{/if}-->
↑の、formの中にコピペで入れ込むのでしょうか?!
それともこの下?!
記述を教えていただけるとありがたいのですが(^^ゞ