エントリー
freoで幅可変の3カラムのスキンを作るには
- カテゴリー：カスタムテンプレート
- タグ：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;
- 全体 ⇒ div#container の
※追記：以上の作業でうまくいかない場合は、こちら をダウンロードして css/default.css と差し替えてください（デフォルトのものを改造したものです）。
2011.1.14より css/default.css、templates/utility.html、templates/internals/default/default.html、templates/internals/view/default.html を改造したものをセットにして配布しています。
関連エントリー
- 2023/09/05 freoのプロフィールやコメントでGravatarのアバターを表示する方法
- 2022/01/10 freoをあれこれカスタマイズ版の配布
- 2021/11/14 ショッピングカートプラグインの商品配送方法・料金などの変更
- 2021/09/25 freoのメディア登録・メディア管理のTinyMCE5プラグイン
- 2021/09/23 カレンダーの祝日定義の変更・延長
- 2020/08/08 freoにTinyMCE5を導入する
- 2018/06/10 freo用markItUp!拡張版の配布
- 2018/05/12 freoのエントリーのタグ投稿を楽にする方法
- 2018/03/16 freoのエントリーとページの編集画面で添付ファイルとイメージの画像を表示する方法
- 2018/03/16 freoのエントリーとページの編集画面でオプションの画像を表示する方法
コメント
とさいぬ
カテゴリーで絞り込んだ時のテンプレート（templates/internals/category/default.html）にも同じような編集を加えることで解決しました。
ありがとうございました。
- 2012/03/12 21:16:00
コメント登録
- コメントを入力してください。
- 一旦登録したコメントは、あとで編集できませんのでご注意下さい。
とさいぬ
はじめまして、とさいぬです。
freoを利用している僕のサイトで、この記事を参考に幅可変3カラム化をしました。
しかし、ほとんどのページで正しく表示されるのですが、エントリーをカテゴリ一覧から記事を絞ると、記事が上に、ナビケーションが下へ落ち、凸型のようになります。
GoogleChrome、Firefox、Android標準ブラウザで確認しましたが、どのブラウザでも同じ現象が起きました。
そこまでcss等に詳しくないので、どこをどのくらい調節したらいいのかわかりません。
どうしたらいいでしょうか。