Tales of Chaotic Dream ~混沌の夢物語~

ardinの脳内を赤裸々に公開。日記・詩・小説もどきの他テンプレカスタム等、不定期更新。
注意事項
  1. 当ブログはイラストサイト:Dream of Chaosのコンテンツの一つです。
  2. ここをはけ口としている為、比較的高い頻度で愚痴や毒を吐きます。ご了承下さい。
  3. 詩や小説など管理人による創作物の無断転載は「ダメ、ゼッタイ。」タメ口は気にしませんが、必要以上に小文字、ギャル文字などは使わないで下さい。ある程度親しくなってからネタとしてなら許容出来ますが・・・。
  4. 当ブログや、メインサイト、及び管理人に関する事であれば、いかなる発言も意見の一つとして受け入れるつもりです。しかし、リンク先や、知人・友人、その他直接管理人にはどうしようもない事象に対しての誹謗中傷は自重して下さい。


テンプレートの幅を可変にする

私が公開中のテンプレートは全て固定幅で作られています。
この幅を可変にするカスタマイズです。
現在私が公開中の共有テンプレート全てに適用できるはずです。

* * *

テンプレートのCSSに以下の様な記述があります。

/*▼▼▼▼サイトの幅▼▼▼▼*/
#body{
width:900px; /*全体*/
margin:0 auto; /*全体中央寄せ*/
}

#main{
width:650px; /*メイン*/
float:left; /*カラム左寄せ*/
overflow:auto; /*はみ出し時処理*/
}

#sub{
width:241px; /*サブ*/
float:right; /*カラム右寄せ*/
}

#titlelist{
width:888px; /*全記事表示*/
}
/*▲▲▲▲サイトの幅▲▲▲▲*/

上記の青字部分を下記の赤字のように変更してください。

/*▼▼▼▼サイトの幅▼▼▼▼*/
#body{
width:75%; /*全体*/
margin:0 auto; /*全体中央寄せ*/
min-width: 700px;
}

#main{
width:70%; /*メイン*/
float:left; /*カラム左寄せ*/
overflow:auto; /*はみ出し時処理*/
}

#sub{
width:29%; /*サブ*/
float:right; /*カラム右寄せ*/
}

#titlelist{
width:100%; /*全記事表示*/
}
/*▲▲▲▲サイトの幅▲▲▲▲*/

注意点など
  1. メインとサブは足して100%を越えないようにしてください。足して100%にすると、メインカラムとサブカラムの隙間が無くなるので、99%までにした方が見やすいかと思います。
  2. ブログ内容の全体幅とウィンドウの間にゆとりが欲しい時は全体の数値を50~90%位の任意の数字にしてください。それ以上小さくてもダメではないですが、あまり小さい数字を指定すると見にくくなる可能性もあります。
  3. 緑字は最低の幅を指定しています。この場合、ウィンドウ幅を700px以下にすると横スクロールバーが表示され、それ以上記事などは細くなりません。指定しなければ、ウィンドウを細くしただけブログの記事なども細くなります。
関連記事

EDIT [2009/09/03 15:41] その他 テンプレ Comment:0


<< | BlogTop | PageTop  | >>

コメントの投稿














管理者にだけ表示を許可する

トラックバック

この記事のトラックバックURL
http://talesofchaoticdream.blog32.fc2.com/tb.php/713-80c28eae

Template Design by Tales of Chaotic Dream