解決済
ブログの幅を固定する方法を教えてください。
デザインは「デフォルト2008（スカイ,2カラム） 」です。ウィンドウの幅に合わせて、ブログ幅が変わらないようにしたいと思います。
こちらで、ブログ幅固定の記事を探してＣＳＳを変更してみたいのですが、うまくできませんでした。
よろしくお願いします。
回答(1)
1.
あなたのCSSの現在の記述が解かりませんので、おそらく当該デザインをデフォルトで使われているであろう方のものを見せていただいています。
/* ----------------------------------- */
/** Layout */
などと書かれているので解かりやすいCSSですね。
ヘッダー広告以外の全体の入れ物のcontents-outerで、width:94%;となっていますので、width:760px;で、外側の幅は決まります。
その中のmainは、width:100%;となっていますが、760pxの100%ということですので、そのままでよいと思います。
プラグインと呼ばれるものは、おそらくsubだと思います、これは、width:220px;となっていて固定されているようです。あまり小さな数字で幅を指定するとプラグインの内容に依ってはオーバーフローする場合があると思います。sub-innerのwidth:100%;も220pxの100%です。(extraもwidth:220px;となっているようですね)
結局、contents-outerの幅の指定だけでよいかもしれませんが、表示幅が狭くなるとマージンやパディングの値が気になるかもしれません。じっくり試してみてください。
/* =============================================== */
/** 02. Layout - レイアウト（全体の枠組み） */
/* ----------------------------------------------- */
body {
margin: 0;
padding: 0;
min-width: 600px;
background-color: #dedede;
text-align: center;
}
/* ----------９４％→７６０px------------ */
div#container {
width: 760px;
margin: 0 auto;
padding-bottom: 10px;
background-color: #ffffff;
position: relative;
}
で、固定することができました。
ＣＳＳをさらに学んでいこうと思えるきっかけになりました。
コチビさん、ありがとうございました。
コメント(9)
こんばんは、
ご自分でどのようにされたのかを明示され、どうしたいのか具体的な数値も示されると解答が付きやすいと思います。
lovedoorブログでこんなデザインのものがありますね、これのことでしょうか。
http://img.blog.livedoor.com/img/design/large/defa...
CSSやテンプレートHTMLを変更する場合は、例えば、下記URLのイメージ(当ナレッジのものです)：
のようにボックス配置(デザインを形成するための構造)やそれぞれのボックスのサイズを知っておく必要があります。ご自分で一度紙にでも描いてみられるとよいと思います。
>>#2
すみません、誤解があったようで‥‥
#1で、「イメージ(当ナレッジのものです)：」との記述は正しくは、「イメージ(当ナレッジで掲載されていた他のものです)：」となるかと思います。
現状が解からなければ前へ進めないことの例示をしただけですので‥‥‥
確か、Operaブラウザには、ページをこれと似たように解析して表示する機能があったと思います。そんなものを利用されたらと思います。
>>#1
PICSに直リンされてますが、同じサイトとはいえ引用元のURL書いとかなきゃマズいんじゃないですか
【第4世代のHTMLテンプレートの構造について】
http://knowledge.livedoor.com/31561#answer90898
どうぞ好きに使ってください＾＾
わかりやすいイメージを、ありがとうございます。
１度紙に書いて、整理してみますね。
ウィンドウを最大化したときにブログの幅もそれに合わせて変化しないようにしたいのですが、うまくできませんでした。
自分でＣＳＳ変えた方法は、
width: ○px;などwidthの数値を消す、でした。
ＣＳＳはよく理解できていません。
ブログ幅を（プラグインの幅も含め）７６０pxにしたいと思います。
使っているデザインは、
>lovedoorブログでこんなデザインのものがありますね、これのことでしょうか。
リンクしてくださったものと同じです。
＞【第4世代のHTMLテンプレートの構造について】
こちらを参考にさせていただきながら、もう少しＣＳＳについて調べてチャレンジしてみます。
ありがとうございます。保存させていただきますね！
