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

#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.
「カスタマイズ/管理」は画面の上の方、管理トップページという項目の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を再構築します。
コメント(5)
使っているデザイン名と、
サイドバーか本文部分のどちらを狭めたいのか(あるいは両方か)
教えていただけると回答できる方がいるかも知れません。
ご指摘有難うございます。
デザイン名はカスタムと出ています。
狭めたいのはブログ自体の横幅です。
画面いっぱいにすると左のサイドバーと本分が全体的に左に寄ってしまいます。
エクスプロ-ラーのお気に入りを表示させた状態では綺麗に見えているのですが。
http://blog.livedoor.jp/kazuleee3453/?blog_id=1761...
URLのせておきます。
宜しくお願いします。
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{}
このようになっています。
ご指導宜しくお願いいたします。
回答2を書いてから思いついたのですが、
#blogcontainer{
position:relative;
}
を
#blogcontainer{
width:500px
}
にすれば、全体の幅が500pxになるかもしれません。.blogは、それに合わせて縮まると思います。←やってみないとわかりません。
toshikipi様
一度やってみます。
重ね重ね有難うございます。




