ブログの幅の広げ方を教えてください
3カラムのシルクを使っています。全体的に窮屈な感じがするので、
記事の部分を100pxくらいひろげて、
記事と左右のサイドバーの間も少し余裕がほしいです。
画像の横幅を広げたり、URLを取得する方法はわかるのですが、CSSのどの部分をどのように変更すれば良いかが、わかりません。
全体的に150~200pxくらい広げたいです。
同じような質問がありますが、同じようにしても、右のサイドバーが落ちてしまいました。
回答(3)
3.

とりあえず、3カラムのシルクの本文を100px広げる方法だけ書いておきます。
どの回答を選ばれるかはお任せです。(私はHukaminさんの可変式のやりかたいいなと思ってます)
#container{
width:786px;
#banner{
width:767px;
#blogcontainer{
width:765px;
#wrapper{
width:585px;
#content{
width:405px;
#blog{
width:395px;
CSS内の以上のwidthを100ずつ足した値にして下さい。
これだけだと背景の画像がずれるので、
img/usr/silk_touch/top.jpg
CSS内に書いてあるの↑の画像をダウンロードし、画像編集ソフトにて横幅100広げてアップロード、CSS内の画像URLをアップロード先と入れ替えます。
最後にデザイン(CSS)もしくは全てのページの再構築を実行すれば完成。
1.
必ずバックアップをとりながら、少しずつ調整なさることをお勧め致します。
#containerがブログを大きく囲む枠だと思って下さい。
そのすぐ内側が#blogcontainerです。
#wrapperが左サイドバーとブログ本文を含む枠です。
#contentと#blogがブログ本文の部分です。
#leftと#rightはそれぞれのサイドバーを囲む枠です。
以上が枠についての説明です。
全体的に拡げたいのであれば、まず#containerと#blogcontainerのwidthの数値を大きくしましょう。
#wrapperと#rightの合計値より大きめに設定します。
そして記事の部分は#wrapperと#contentと#blogのwidthの数値を調整します。
#wrapperは#content(#blog)と#leftの合計値以上の幅が必要なので注意して下さい。
そしてカラム間の隙間については、paddingやmarginの数値が関わってきます。
簡単に言えば、marginは内容を囲む枠の外側の隙間の設定、paddingは内容を囲む枠の内側の隙間の設定です。
こちらのページで見た方が分かるかと思います。
それらの数値を上手く調整して下さい。
結構根気の必要な作業になるかと思います。
この説明で分からない場合は、コメント欄からお知らせ下さい。
出来ればブログのURLを教えて頂けるとCSSを拝見出来るので具体的なアドバイスがし易くなります。
2.
ちなみに私の知人には数人います。いずれも古いPCです。
ですから横幅を可変にしてみてはいかがでしょうか。
例えば全体を100%、サイドバーの横幅を230pxとし、中央を可変にした場合、
■#container
width:786px;→ width:100%;■#banner
width:767px;→ width:100%;画像の位置を中央に表示するならbackground:url(画像のURL) no-repeat 50% 0;
右寄せするならbackground:url(画像のURL) no-repeat 100% 0;
左寄せするならbackground:url(画像のURL) no-repeat 0 0;
■#blogcontainer
width:765px; → width:100%;
■#wrapper{
width:585px; → width:auto;
■#content{
width:405px; → width:auto; float:right; → margin:auto 230px;(topの数値は#bannerの高さと同じでleftの数値は#leftおよび#rightの横幅と同じ)
■#blog
width:395px;→ width:auto;
■#left
width:180px; → width:230px; float:left; → position:absolute;top:197px;left:0px;(topの数値は#bannerの高さと同じ)
■#right
width:180px; → width:230px; float:left; → position:absolute;top:197px;right:0px;(topの数値は#bannerの高さと同じ)
■.caltbl
カレンダーの大きさを変更する際には width:170px を更に広げます。
コメント(4)
望様
早速アドバイスいただきまして、ありがとうございました!
枠の説明ありがとうございました。
カラム間の隙間の調整はとても難しそうですね・・
私はやめておいた方がいいかな?という気になりました(笑)
ブログ幅(記事の幅)だけでも変えたいのですが・・
画像をどの数字と合わせればよいかなど、よくわかりません。(理解力がなく、申し訳ありません)
望様のご回答を参考にまた、調べてみたいと思います。
大変参考になりました。ありがとうございました。
ブログのURLはhttp://blog.livedoor.jp/backintime24/です。
Hukamin様
可変という方法もあるんですね。
そうですね、見る方のPCによって大きすぎると
見難いですよね。
見難い人のことを考えて、記事の横幅を100PXだけ広げることにしました。
とりあえず、記事の部分だけでも広げたいのですが。
がんばってみます・・
ありがとうございました。
backintimeさま、その後いかがでしょうか?
思うようにカスタマイズは出来ましたか?
もし無事に解決なさったのでしたら、この質問を閉じて頂けますようお願い致します。
まじかる☆スフィー様
大変わかりやすい説明をありがとうございました!
可変は画像の大きさが変わってしまうのが気になるので
まじかる☆スフィー様の方法でやってみようと思います。
ありがとうございました。




