- 締切済み
アメブロcss 3カラムを2カラムに変更の仕方
アメブロカスタマイズについて。 現在アメブロの3カラムをcssを編集し2カラム右メニューにしようとしているのですが、 上手く2カラム右メニューに表示出来ません。 まずサイドバー項目を右に全てずらし、左は空とし、 #sub_a{display:none;}として、 #mainの幅を拡大し2カラム左メニューは問題なく出来たのですが、 メニューを右にずらす事が出来ておりません。 感覚としては#mainは動かせているのですが、#sub_bがびくともしないような感覚です。 現在のcssは以下のようになっており、表示としては#sub_bも#mainも左に寄っており、 #sub_bの下に#mainが表示されている状態です。 具体的にどの点を修正すれば2カラム右メニューとなりますでしょうか? #main{ float:left; width:673px; left: 0px; top: 0px; } #sub_main{ width:100%; overflow:hidden; } #sub_a{ display:none; } #sub_b{ float: right; width:200px; margin-left: 688px; top: 0px; z-index: 100; }
- みんなの回答 (6)
- 専門家の回答
みんなの回答
- kobliha
- ベストアンサー率88% (120/136)
>記事URL、コメント、テーマをクリック時も#sub_b、#mainの位置は変わらずとなります。 だとすれば、他に「相容れない」指定がある、若しくは途中に「デタラメ指定(CSS の仕様に則っていない)」があるかと。 多い例: } がない。 } が一個多い。 :(コロン) や ; (セミコロン)がメチャクチャ。 基本 セレクタ(適用場所) { (大カッコ) プロパティ(性質) : (コロン)値(性質の内容) ; (セミコロン) プロパティ(性質) : (コロン)値(性質の内容) ; (セミコロン) プロパティ(性質) : (コロン)値(性質の内容) ; (セミコロン) } (大カッコ)
- kobliha
- ベストアンサー率88% (120/136)
no.2 だが。 恐らくトップページしか見ていないと思うが、記事URL、コメント或いはテーマなどをクリックした状態は同じだろうか?
- susy-xx
- ベストアンサー率69% (339/485)
#sub_main は不要に思えますし、 z-index: 100; がちょっと目を引きます。 #main{ float: left; width: 673px; margin:0; padding:0px; } #sub_a{ display: none; } #sub_b{ float: right; z-index: 1; width:200px; margin:0; padding: 0; }
補足
ご回答有り難う御座います! 試しに該当部分をコメントアウトし、 上記をそのまま追記させて頂いたのですが、 やはり表示は変わらずとなります、、 何か余計なcssを他に記載してしまっているのでしょうか?
- susy-xx
- ベストアンサー率69% (339/485)
それでも大丈夫だと思います。 ものすごく基本的なことですが 自力で2カラムにするときは「サイドバーの設定」で メニューを全部「右サイド」に移動させないとだめですが… 移動しました?
補足
再度のご回答有難うございます! 移動は済んでおります、3カラムの状態から、メニューを全て右サイドに移動させ、sub_aを非表示にするのみで2カラム左メニューにはなりましたので、 あとはmarginの調整などでsub_bを右に、mainを左に位置させるだけだと思ったのですが、、
- kobliha
- ベストアンサー率88% (120/136)
#frame = #wrap = #sub_a + #main + #sub_b + 40 がフツーなのだが、あなたは 673 + 200 > 800 これでは変わる訳がない。 デフォルトの二コラムは #main は 610px であるから。 つまり、「算数」の問題。
補足
回答有難う御座います。 記載しておりませんでした、現在#frameの幅は900pxで設定しております。 試しに早速今、#main 660px、#sub_b 200pxに変更し、 上記の計算式で合計900pxに収まるよう変更してみたのですが、 表示は変わらずとなります。。 どの辺りが原因となりますでしょうか? お手数とは思いますが、ご教授願えれば幸いと思います!
- susy-xx
- ベストアンサー率69% (339/485)
わざわざCSSをいじらなくても 「デザインの変更」→「レイアウトの変更」から 「2カラム・右メニュー」にチェックを入れて「適応」ボタンを押せば 変更できるんじゃないですか?
補足
回答有難う御座います。 出来ればそうしてしまいたいのですが、 既に細部を大幅にカスタマイズしてしまっており、レイアウトの変更をしてしまうと全て初期化されてしまうため出来ない状態です、、 出来れば現在の状態でcssを調整し2カラム右メニューにしたく思うのですが、 #sub_bの反応が無い原因は何が考えられますでしょうか?
補足
再度のご回答有り難う御座います! 記事URL、コメント、テーマをクリック時も#sub_b、#mainの位置は変わらずとなります、、 こういった場合可能性として、何が考えられますでしょうか?