freoのメニューをタイトルより上にする

2011/01/13 22:10
カテゴリー：カスタムテンプレート
タグ：freoCSS, freoテンプレート

表示のサンプルはこちら

templates/header.html を次のように編集（赤字を追加）します。

<body>
<div id="container">
  <div id="top">
    <div id="header">
      <h1><a href="{$freo.core.http_file}">{$freo.config.basis.title}</a></h1>
      <p>{$freo.config.basis.description}</p>
    </div>
    <div id="menu">
      <h2>メニュー</h2>
      <ul>
        <li><a href="{$freo.core.http_file}">トップページ</a></li>
        <li><a href="{$freo.core.https_file}/login">ログイン</a></li>
      </ul>
    </div>
  </div>
  <div id="main">←一番最後の行

templates/footer.html を次のように編集（赤字を追加）します。

  </div>←一番最初の行
  <div id="footer">
    <address>Created by <a href="https://freo.jp/">freo</a>.</address>
  </div>
</div>
</body>

css/default.css を次のように編集します。
- ヘッダー ⇒ div#header の前に
```
div#top {
  margin:0px;
  padding:0px 0px 0px 0px;
}
```
  を追加します。
  
  div#header { の
```
clear: both;
```
  の部分を、
```
float:left;
```
  にします。
  
  div#header h1 { に、
```
padding:32px 0px 0px 0px;
```
  を追加します。
- メニュー ⇒ div#menu { に
```
float:right;
```
  を追加します。
- 内容 ⇒ div#content の前に
```
div#main {
  clear: both;
  width:760px;
}
```
  を追加します。

コメント登録

コメントを入力してください。
一旦登録したコメントは、あとで編集できませんのでご注意下さい。

名前

メールアドレス

URL

コメント（コメント本文の装飾について）

コメント本文の装飾について

本文に特定の記号を書くことにより、手軽にマークアップを行うことができます。

引用

概要

文章を >> だけの行と << だけの行で囲うと引用に変換します。

入力例

この部分は通常の文章です。
>>
ここは引用になります。
<<
この部分は通常の文章です。

結果

この部分は通常の文章です。

ここは引用になります。

この部分は通常の文章です。

整形コード

概要

文章を >|| だけの行と ||< だけの行で囲うと整形コードに変換します。プログラムの掲載時に利用すると読みやすくなります。

入力例

この部分は通常の文章です。
>||
<html>
　<body><p>HTMLやプログラムを掲載することができます。</p></body>
</html>
||<
この部分は通常の文章です。

結果

この部分は通常の文章です。

<html>
　<body><p>HTMLやプログラムを掲載することができます。</p></body>
</html>

この部分は通常の文章です。

閲覧制限

基本的には「全体に公開」されますが、内容によっては管理人の方で公開を制限する場合がありますので、その旨ご了承下さい。

freoをカタカナ3文字で入力してください（スパム対策）

登録者情報を記憶する

日	月	火	水	木	金	土
-	-	-	-	-	1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

freoカスタマイズ集