本文へジャンプします。

ココログサポート Top>>Questions List>>・カスタムテーマの左右の枠の幅を広げたい...

fixed_question

・カスタムテーマの左右の枠の幅を広げたい

現在テーマは若葉を使っていますが、若葉の緑色の左右の枠の幅を広くしたいと思います。
方法を教えてください。お願いします。

　現状は以下のURLをご覧ください。

　　http://happyyama.cocolog-nifty.com/test/
basic infomations

yamayama | 2011/09/23 12:04(5021days ago) | permalink

Please login to comment.

Re: ・カスタムテーマの左右の枠の幅を広げたい
こんにちは。

現在のテンプレートの「記事欄」＋「右サイドバー」＋「左サイドバー」の合計が950pxですので
この合計値の範囲内なら調整可能です。

.layout-three-column #alpha{width: XXXpx;}/*右サイドバー*/
.layout-three-column #gamma {width: XXXpx;}/*左サイドバー*/
.layout-three-column #beta {width: XXXpx;}/*記事欄*/

上記の各項目の「XXX」部分に合計が950になるように振り分けて数値を入力してください。
現在は左右のサイドバーが各200px、記事欄が550pxです。

それと、サイドバーの幅を変更すると背景にある画像の位置がずれますので、
気になるようなら下記の記述を入れて背景を一色に変更するといいと思います。
※ここの背景は1枚の続き画像なので項目ごとに幅を変えることができません。
#pagebody {background:#カラーコード;}

no-name. | 2011/09/23 13:07(5021days ago) | permalink

Re: ・カスタムテーマの左右の枠の幅を広げたい
早速回答ありがとうございます。
たびたび助けていただきありがとうございます。

すみません、質問内容の書き方が間違っていました。

　カスタムテーマの左右の葉っぱの見える幅を広げたい
でした。（左右の背景の葉っぱが見える幅を広げ得たい）

　申し訳ありません。よろしくお願いします。

yamayama | 2011/09/23 19:58(5021days ago) | permalink

Re: ・カスタムテーマの左右の枠の幅を広げたい
下記の内容ではどうでしょう。

#container {width: XXXpx;}/*記事欄+左右サイドバーの合計*/
#pagebody{width:XXXpx;}/*記事欄+左右サイドバーの合計*/
.layout-three-column #alpha{width: XXXpx;margin-left:XXpx;}
.layout-three-column #gamma {width: XXXpx;margin-right:XXpx;}
.layout-three-column #beta {width: XXXpx;}

#container と#pagebodyには記事欄+左右サイドバーの合計の数値を入れます。
（どちらも同じ数値）
#alphaと#gammaには左右サイドバーの数値を入れますが、その際に
右サイドバー（#alpha）には左端の余白（margin-left）、
左サイドバー（#gamma）には右端に余白（margin-right）
をそれぞれ10～20pxほど設定します。
この余白分も加えた左右サイドバーと記事欄の合計が#container と#pagebodyの数値と同じになるように
設定してください。

例えばサイドバーを150（うち余白20）、記事欄を400で設定する場合は
#container {width: 700px;}
#pagebody{width:700px;}
.layout-three-column #alpha{width: 130px;margin-left:20px;}
.layout-three-column #gamma {width: 130px;margin-right:20px;}
.layout-three-column #beta {width: 400px;}
となります。

no-name. | 2011/09/23 21:07(5021days ago) | permalink

Re: ・カスタムテーマの左右の枠の幅を広げたい
　ありがとうございました。
　例を書いていただいたので、更によくわかりました。
　いろいろ数字を変えて取りあえず決めました。

　左右サイドバーの薄い緑の幅が最大文字幅と同じに
まれば更に良いなと思っていますが、できたらよろしくお願いします。

　本当にありがとうございます。

yamayama | 2011/09/24 00:53(5020days ago) | permalink

Re: ・カスタムテーマの左右の枠の幅を広げたい
＞左右サイドバーの薄い緑の幅が最大文字幅と同じ

本来のサイドバーに表示してある背景部分を現在の幅に合わせたいという意味でしょうか？

だとしたら、一番最初の回答にも書きましたが、
あの部分は左サイドバー、記事欄、右サイドバーと全て続いている1枚の画像で出来ているので
サイドバーだけ、あるいは記事欄だけの幅を個別に変えることはできないのです。

下記が該当の画像だけのアドレスです。
色が薄いので判りにくいですが、画面の一番上に高さ20px、幅980pxの細長い画像が見えると思います。
元のデザインはこれを縦に敷き詰めて背景にしています。
サイドバー、記事欄とも最初の数値（サイドバー各200、記事欄550）に合うように作られているので
残念ながらCSSで調整することはできません。
http://theme.cocolog-nifty.com/themes/rich/wakaba/main_bg.gif

no-name. | 2011/09/24 09:26(5020days ago) | permalink

Re: ・カスタムテーマの左右の枠の幅を広げたい
　こんにちは、たびたびありがとうございます。

　わかりました、これで十分満足しています。
　ありがとうございました。

yamayama | 2011/09/24 11:56(5020days ago) | permalink

Re: ・カスタムテーマの左右の枠の幅を広げたい
　解決済で順調にきていたのですが、他の操作をした時か、他の原因かわからないのですが突然？幅が変わって（変えて）しまいました。（テーマーは　若葉）
　数字をいじくったのですがうまくいかないので、回答いただいた数にして
確認しましたが、変化がないようです。
この機能がうごかなくなった？？？

今、下記の状態ですが他の影響で機能が働かなくなった？
よろしくお願いします。

#container {width: 700px;}　　　/*画面の幅　少なくすると外枠の緑が多くなる*/
#pagebody{width:700px;}
.layout-three-column #alpha{width: 130px;margin-left:20px;}
.layout-three-column #gamma {width: 130px;margin-right:20px;}
.layout-three-column #beta {width: 400px;}　/*少なくすると両サイドが広がる　メモ*

yamayama | 2013/03/10 23:53(4487days ago) | permalink