ユーティリティ

2017年08月

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

キーワード検索

キーワード検索フォーム
キーワード

ユーザー

  • cccのアバター

新着画像

過去ログ

Twitter

Twilogを見る

Feed

エントリー

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

  1. templates/internals/default/default.htmltemplates/internals/view/default.html を開き、下から2行目にある
    {include file='utility.html'}
    を1行目の
    {include file='header.html'}
    の下に移動します。
  2. templates/utility.html を開いて右側のナビゲーションとして
    <div id="utility2"></div>

    を追加します。
    (もしくは utility2.html を作成 して <div id="utility2"></div> の部分を作り、templates/internals/default/default.htmltemplates/internals/view/default.html{include file='utility.html'} の下に {include file='utility2.html'} を追加します)

  3. 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.csstemplates/utility.htmltemplates/internals/default/default.htmltemplates/internals/view/default.html を改造したものをセットにして配布しています。

ページ移動

関連エントリー

コメント

とさいぬ

はじめまして、とさいぬです。

freoを利用している僕のサイトで、この記事を参考に幅可変3カラム化をしました。
しかし、ほとんどのページで正しく表示されるのですが、エントリーをカテゴリ一覧から記事を絞ると、記事が上に、ナビケーションが下へ落ち、凸型のようになります。

GoogleChrome、Firefox、Android標準ブラウザで確認しましたが、どのブラウザでも同じ現象が起きました。

そこまでcss等に詳しくないので、どこをどのくらい調節したらいいのかわかりません。
どうしたらいいでしょうか。

  • URL
  • 2012/03/11 22:10:00

とさいぬ

カテゴリーで絞り込んだ時のテンプレート(templates/internals/category/default.html)にも同じような編集を加えることで解決しました。

ありがとうございました。

  • 2012/03/12 21:16:00

コメント登録

  • コメントを入力してください。
  • 一旦登録したコメントは、あとで編集できませんのでご注意下さい。
登録フォーム
名前
メールアドレス
URL
コメント(コメント本文の装飾について
閲覧制限
※基本的には「全体に公開」されますが、内容によっては管理人の方で公開を制限する場合がございますので、その旨ご了承下さい。
freoをカタカナ3文字で入力してください(スパム対策)