知識、知恵のカタマリ

[PR]コレがGoogleの検索ストーリー

解決済

clip!clip!
Ads By Google

ブログ全体の幅が大きすぎてバランスが悪いです。
少し幅を狭めたいのですがCSSのどこをいじれば変わりますか?2カラムです。

ライブドアブログです。

2007-03-27 16:31の質問
この質問と回答を読んで役に立った場合は「役に立つ質問」に投票してください。投票が多い質問は、役に立つ質問一覧に掲載され、より多くの人に見てもらうことができます。

回答(2)

2.

2007-03-31 12:17:29ベスト
 ブログをお作りになる時、最初からカスタムをお選びになったのではないかと思います。それで、既製のテンプレートとCSSの記述が違っているのだと思います。

#blogcontainer{
position:relative; ←ここが相対の記述です。
}
#content{
position:absolute; ←ここも相対の記述です。
left:240px;
right:20px;
top:15px;
}
.blog{} ←ここが、ブログ本文なはずです。
#links{ ←ここがサイドバーです。
position:absolute;
left:20px;
top:15px;
width:200px;
}
 このへんが関係ありそうです。

#blogcontainer{
position:relative;
}
では、相対的に決定しているみたいで、数値で指定していません。{}の中身を変更すればよいはずです。
 相対は、たしかウィンドウの幅に依存して、ウィンドウを広げると表示も広がる指定の仕方だったはずです。

#blogcontainer ←ブログ全体の幅
#wrapper ←メインコンテンツとナビゲーションをひとつにまとめるらしいです。
#content ←ここもよくわかりませんが、テンプレートによっては、本文の幅と同じになっていることがあります。
#blog ←本文の幅です。
#links ←サイドバー

#blogcontainerは#blog+#links+10px
 全体を500pxで、サイドバーを200pxにするなら、
200+290+10=500
 これで本文が290pxになるので、幅がかなり縮まるはずです。

#wrapperが見当たりませんが、#blog+#links+10pxで計算できるはずです。全体幅500pxの場合、290+200+10=500pxになると思います。

 CSSの記述に関して、記述の順序なのど規則があるかもしれません。下記の#blogcontainer~#linksまでをコピー&ペーストしても幅を変更してもよいかもしれません。念のために、CSSにペーストする前に、現在のCSSをコピーしてメモ帳などに保存してください。

#blogcontainer{
width:500px;
text-align:center;
margin:0 auto;
}

#content{
width:300px;
float:left;
text-align:center;
padding-bottom:30px;
}


#blog{
width:290px;
text-align:left;
margin:0 auto;
}

#links{
float:right;
margin:0 auto;
width:200px;
padding:28px 0 50px;
}

 2カラムで、本文幅290px、サイドバー200px、サイドバーと本文の間のゆとり10px、全体の幅500pxになるはずです。
自信度 : 自信なし 回答レベル : 回答

色々やったのですが、中々難しいです。
もう少し頑張ります。
有難うございました。

1.

2007-03-28 08:39:42
 ご存じかと思いますが、CSSの編集ページは、Livedoorblog管理画面>カスタマイズ/管理>デザインの設定>カスタマイズで、CSSの編集画面という順で行けます。
 「カスタマイズ/管理」は画面の上の方、管理トップページという項目の2個右にあります。
 「デザインの設定」は、画面左の「ブログの設定/管理」の2番目の項目です。
 「カスタマイズ」は、一番下までスクロールした左にあります。

 カスタマイズのCSS編集画面が出たら、下記の部分をお探しください。スクロールして少し下にあります(例はサクラ2カラムです)

#blogcontainer{
width:775px;
text-align:center;
margin:0 auto;
}

#content{
width:575px;
float:left;
text-align:center;
padding-bottom:30px;
}


#blog{
width:575px;
text-align:left;
margin:0 auto;
}

#links{
float:right;
margin:0 auto;
width:190px;
padding:28px 0 50px;
}

 このうちの、以下の3カ所の幅(width)の数値(●●px)を減らすと幅が縮まります。
#blogcontainer{
width:775px;

#content{
width:575px;

#blog{
width:575px;

 たとえば100px減らすとすると、デフォルトから各100px引いてください。

 計算するなら、#blogcontainer=#blog+#links+10pxになるように変更します。
 余分な10pxは本文とサイドバーの間のゆとりだと思います。
 #contentは#blogと同じ幅でよいみたいです。
 #blogcontainerは全体の幅で、#linksはサイドバーの幅です。

 変更を保存して、CSSを再構築します。
回答レベル : 回答
Ads By Google

コメント(5)

2007-03-27 20:48:46

使っているデザイン名と、
サイドバーか本文部分のどちらを狭めたいのか(あるいは両方か)
教えていただけると回答できる方がいるかも知れません。

#2.  
2007-03-27 21:06:14

ご指摘有難うございます。
デザイン名はカスタムと出ています。
狭めたいのはブログ自体の横幅です。
画面いっぱいにすると左のサイドバーと本分が全体的に左に寄ってしまいます。
エクスプロ-ラーのお気に入りを表示させた状態では綺麗に見えているのですが。
http://blog.livedoor.jp/kazuleee3453/?blog_id=1761...
URLのせておきます。
宜しくお願いします。

#3.  
2007-03-28 16:33:16

toshikipiさん、ご指摘の箇所が見当たりません。
#container{}
#banner,#subbanner{
background:#666;
border-bottom:1px solid #999;
}
#banner a{color:#fff;text-decoration:none;}
#banner a:hover{color:#999;text-decoration:none;}
.blogtitle{
font-size:24px;
font-weight:bold;
text-decoration:none;
padding:40px 0 5px 20px;
}
.description{
font-size:12px;
font-weight:bold;
padding:0 0 5px 20px;
border-bottom:1px solid #fff;
}
#blogcontainer{
position:relative;
}
#content{
position:absolute;
left:240px;
right:20px;
top:15px;
}
.blog{}
#links{
position:absolute;
left:20px;
top:15px;
width:200px;
}
#footer{}
#outfooter{}
このようになっています。
ご指導宜しくお願いいたします。

2007-03-31 13:22:12

 回答2を書いてから思いついたのですが、
#blogcontainer{
position:relative;
}

#blogcontainer{
width:500px
}
にすれば、全体の幅が500pxになるかもしれません。.blogは、それに合わせて縮まると思います。←やってみないとわかりません。

#5.  
2007-03-31 17:16:30

toshikipi様
一度やってみます。
重ね重ね有難うございます。

トラックバック(2)

トラックバックURL: