freoで幅可変の2カラムのスキンを作るには | Web Liberty&freoカスタマイズ集

ユーティリティ

2021年05月

カテゴリー

タグクラウド

キーワード検索

ページ

リンク

ユーザー

新着画像

新着/更新エントリー

freoにTinyMCE5を導入する: 2020/08/08 13:39
freo用markItUp!拡張版の配布: 2018/06/10 14:01
freoのエントリーのタグ投稿を楽にする方法: 2018/05/12 10:28
freoのエントリーとページの編集画面で添付ファイルとイメージの画像を表示する方法: 2018/03/16 14:38
freoのエントリーとページの編集画面でオプションの画像を表示する方法: 2018/03/16 14:28

新着コメント

Re:freoにTinyMCE5を導入する: 2020/09/16 from ccc
Re:freoにTinyMCE5を導入する: 2020/09/15 from ろき
Re:ユーザー登録記事数表示プラグイン: 2020/06/04 from 羽布
Re:freoのiPhone版テンプレートをjQuery Mobileでカスタマイズ（ver1.1）: 2020/02/01 from haneta
Re:freoのiPhone版テンプレートをjQuery Mobileでカスタマイズ（ver1.1）: 2020/02/01 from ccc

過去ログ

人気コンテンツ

ブログパーツ

Twitter: @cccabinet からのツイート
Twilogを見る

Feed

エントリー

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

2010/06/05 15:06
カテゴリー：カスタムテンプレート
タグ：freoCSS, freoテンプレート

表示のサンプルはこちら

templates/internals/default/default.html と templates/internals/view/default.html を開き、下から2行目にある
```
{include file='utility.html'}
```
を、1行目の
```
{include file='header.html'}
```
の下に移動します。
css/default.css のうち
- 全体 ⇒ div#container の
```
width: 760px;
```
  を削除します。
- 内容 ⇒ div#content の
```
float: left;
```
  と、
```
width: 550px;
```
  を削除し、
```
margin-right: 210px ;
```
  追加します（左側にユーティリティが来る場合は margin-left: 210px ; にします）。
- エントリー ⇒ div#entry div.entry の
```
width: 550px;
```
  を削除します。
- ユーティリティ ⇒ div#utility の
```
float: left;
```
  の部分を、
```
float: right;
```
  にし、
```
margin-left: 10px;
```
  を削除します（左側にユーティリティが来る場合は float: left;のままに）。
- IE6用設定 ⇒ * html div#container の
```
width: 800px;
```
  を削除します。

ページ移動

関連エントリー

コメント

コメントはまだありません。

コメント登録

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