• 虹色ミツバチ
  • freoカスタマイズメモ、テンプレート・プラグイン配布/officeTIPS
検索プラグイン

> Entry >freo>freo講座>初心者の為のfreoテンプレート編集講座> 【基本編(01)】freoの構造について

【freo】【freo講座】【初心者の為のfreoテンプレート編集講座】【基本編(01)】freoの構造について

  • 2012/08/13 20:30
  • 77

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行目に

 <h1><a href="{$freo.core.http_file}">{$freo.config.basis.title}</a></h1>

と書いてあります。
これは、

 <見出しここから><[freo/config.php]で設定したfreoの設置URLへのリンクここから>{freoの管理ページ→システム→設定管理→基本設定で設定したfreoのタイトル}<[freo/config.php]で設定したfreoの設置URLへのリンクここまで><見出しここまで>

という意味になります。
これを段落に変えたい場合は

 <p><a href="{$freo.core.http_file}">{$freo.config.basis.title}</a></p>

にすればいいですし、リンクを取りたいなら

 <h1>{$freo.config.basis.title}</h1>

にすればいいですし、罫線を下につけたいなら

 <h1><a href="{$freo.core.http_file}">{$freo.config.basis.title}</a></h1><hr />

にすればいいわけです。

どんなスタイルで表示したいのか

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行目の

 div#header h1 {
    line-height: 1.0;
    margin: 0;
}

 div#header h1 {
    line-height: 1.0;
    margin: 0;
    border:10px solid #cccccc;
    background-color:#000000;
    color:#ffffff;
}

に変更してみて下さい。
[freo/css/default.css]を上書きしてアップロードすると、freoのタイトルのスタイルが変更になっていると思います。
このように、スタイルをどんどん変えると、同じテンプレートを使用していても、ガラッとイメージを変えることができると思います。

ページ移動

ユーティリティ

Twitter

記事検索

ページ上部へ