freoで幅可変の3カラムのスキンを作るには

2010/06/05 17:20
カテゴリー：カスタムテンプレート
タグ：freoCSS, freoテンプレート, freo配布物

表示のサンプルはこちら

templates/internals/default/default.html と templates/internals/view/default.html を開き、下から2行目にある
```
{include file='utility.html'}
```
を、1行目の
```
{include file='header.html'}
```
の下に移動します。
templates/utility.html を開いて右側のナビゲーションとして
```
<div id="utility2">～</div>
```
を追加します。
（もしくは utility2.html を作成して <div id="utility2">～</div> の部分を作り、templates/internals/default/default.html と templates/internals/view/default.html の {include file='utility.html'} の下に {include file='utility2.html'} を追加します）
css/default.css のうち
- 全体 ⇒ div#container の
```
width: 760px;
```
  を削除します。
- 内容 ⇒ div#content の
```
float: left;
```
  と、
```
width: 550px;
```
  を削除し、
```
margin: 0 210px;
```
  を追加します。
- エントリー ⇒ div#entry div.entry の
```
width: 550px;
```
  を削除します。
- ユーティリティ ⇒ div#utility の
```
margin-left: 10px;
```
  を削除します。
- 右ナビゲーション
```
div#utility2 {
  float: right;
  width: 200px;
  margin-bottom: 20px;
}
```
  を追加し、
```
div#utility ○○{
```
  となっている部分を全部
```
div#utility ○○, div#utility2 ○○{
```
  とします（○○は同じもの）。
- IE6用設定 ⇒ * html div#container の
```
width: 800px;
```
  を削除します。

※追記：以上の作業でうまくいかない場合は、こちらをダウンロードして css/default.css と差し替えてください（デフォルトのものを改造したものです）。
2011.1.14より css/default.css、templates/utility.html、templates/internals/default/default.html、templates/internals/view/default.html を改造したものをセットにして配布しています。

コメント登録

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

名前

メールアドレス

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	-	-	-	-

freoカスタマイズ集