• 締切済み

アメブロ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; }

みんなの回答

  • kobliha
  • ベストアンサー率88% (120/136)
回答No.6

>記事URL、コメント、テーマをクリック時も#sub_b、#mainの位置は変わらずとなります。 だとすれば、他に「相容れない」指定がある、若しくは途中に「デタラメ指定(CSS の仕様に則っていない)」があるかと。 多い例: } がない。 } が一個多い。 :(コロン) や ; (セミコロン)がメチャクチャ。 基本 セレクタ(適用場所) { (大カッコ) プロパティ(性質) : (コロン)値(性質の内容) ; (セミコロン) プロパティ(性質) : (コロン)値(性質の内容) ; (セミコロン) プロパティ(性質) : (コロン)値(性質の内容) ; (セミコロン) } (大カッコ)

  • kobliha
  • ベストアンサー率88% (120/136)
回答No.5

no.2 だが。 恐らくトップページしか見ていないと思うが、記事URL、コメント或いはテーマなどをクリックした状態は同じだろうか?

evianmirumiru
質問者

補足

再度のご回答有り難う御座います! 記事URL、コメント、テーマをクリック時も#sub_b、#mainの位置は変わらずとなります、、 こういった場合可能性として、何が考えられますでしょうか?

  • susy-xx
  • ベストアンサー率69% (339/485)
回答No.4

#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; }

evianmirumiru
質問者

補足

ご回答有り難う御座います! 試しに該当部分をコメントアウトし、 上記をそのまま追記させて頂いたのですが、 やはり表示は変わらずとなります、、 何か余計なcssを他に記載してしまっているのでしょうか?

  • susy-xx
  • ベストアンサー率69% (339/485)
回答No.3

それでも大丈夫だと思います。 ものすごく基本的なことですが 自力で2カラムにするときは「サイドバーの設定」で メニューを全部「右サイド」に移動させないとだめですが… 移動しました?

evianmirumiru
質問者

補足

再度のご回答有難うございます! 移動は済んでおります、3カラムの状態から、メニューを全て右サイドに移動させ、sub_aを非表示にするのみで2カラム左メニューにはなりましたので、 あとはmarginの調整などでsub_bを右に、mainを左に位置させるだけだと思ったのですが、、

  • kobliha
  • ベストアンサー率88% (120/136)
回答No.2

#frame = #wrap = #sub_a + #main + #sub_b + 40 がフツーなのだが、あなたは 673 + 200 > 800 これでは変わる訳がない。 デフォルトの二コラムは #main は 610px であるから。 つまり、「算数」の問題。

evianmirumiru
質問者

補足

回答有難う御座います。 記載しておりませんでした、現在#frameの幅は900pxで設定しております。 試しに早速今、#main 660px、#sub_b 200pxに変更し、 上記の計算式で合計900pxに収まるよう変更してみたのですが、 表示は変わらずとなります。。 どの辺りが原因となりますでしょうか? お手数とは思いますが、ご教授願えれば幸いと思います!

  • susy-xx
  • ベストアンサー率69% (339/485)
回答No.1

わざわざCSSをいじらなくても 「デザインの変更」→「レイアウトの変更」から 「2カラム・右メニュー」にチェックを入れて「適応」ボタンを押せば 変更できるんじゃないですか?

evianmirumiru
質問者

補足

回答有難う御座います。 出来ればそうしてしまいたいのですが、 既に細部を大幅にカスタマイズしてしまっており、レイアウトの変更をしてしまうと全て初期化されてしまうため出来ない状態です、、 出来れば現在の状態でcssを調整し2カラム右メニューにしたく思うのですが、 #sub_bの反応が無い原因は何が考えられますでしょうか?

関連するQ&A

  • 【HP制作】2カラムを3カラムに変更したい!

    現在2カラムで運営しているサイトを3カラムに変更したいのですが、上手く出来ずに困っています。 現在は、左サイドメニュー(1)、メインメニュー(2)で運営しています。 ここに右サイドメニュー(3)を追加したく、下記の通りCSSに右サイドを追加したのですが、 画面を確認すると、左から(1)→(3)→(2)の順番で表示されてしまいます。 因みに、メインのfloatをrightに変更すると、左から(2)→(1)→(3)の順に入れ替わり、 どうしても(1)→(2)→(3)の順番になりません。 独学で、その場しのぎでHP作りをしてきたので、間違いに気づけずにおります。 お分かりの方がいらっしゃったら、どうかよろしくお願いします。 初心者レベルなので、分かり易く教えて頂けると助かります。 どうぞよろしくお願いします。 ■CSS /*ページ全体の幅、レイアウトをセンタリング*/ #container { width:1130px; margin:0px auto; text-align:left; } /*ヘッダー*/ #header { width:100%; padding: 20px 0; clear:left; } /*左サイド*/ #leftside { float: left; width: 200px; } /*メイン*/ #main { float: right; ←ここを変えるとレイアウトが崩れてしまいます。 width: 700px; } /*右サイド*/  ←ここを追加しました。 #rightside { float: right; width: 200px; } /*フッター(コピーライト)*/ #footer { padding: 30px 0; width:100%; clear:both; color: #666; text-align: center; border-top: 1px solid #ccc; } ■HTML <div id="container"> </div> <!--***** メイン部分 *****--> <div id="main"> </div> <!--*****// メイン部分 *****--> <!--***** 左サイドメニュー *****--> <div id="leftside"> </div> <!--*****// 左サイドメニュー *****--> <!--***** 右サイドメニュー *****--> ←ここを追加しました。 <div id="rightside"> </div> <!--*****// 右サイドメニュー *****-->

    • ベストアンサー
    • CSS
  • ブログを3カラム右右から左右両サイドにしたい。

    現在CSSは下記のようになっています。 どこをいじれば右右から左右両サイドにできるのか教えていただけたら嬉しいです。 宜しくお願い致します。 /** 03. Layout - レイアウトの設定 */ /* ----------------------------------------------- */ body { margin: 0; padding: 0; min-width: 960px; text-align: center; background-image: none; background-repeat: repeat; background-position: 50% top; } div#containerWrap { width: 960px; margin: 0 auto 5px; } div#container {} div#content { padding: 10px 0; border-width: 1px; border-style: solid; } div#main , div#sub , div#extra { overflow: hidden; } div#main { float: left; display: inline; width: 538px; } div#main div.column-inner { padding: 0 10px 10px; } div#sub { float: left; display: inline; width: 210px; } div#sub div.column-inner { padding: 5px 10px 0; overflow: hidden; border-width: 1px; border-style: none none none solid; } div#extra { float: left; display: inline; width: 210px; } div#extra div.column-inner { padding: 5px 10px 20px; overflow: hidden; border-width: 1px; border-style: none none none solid; }

    • ベストアンサー
    • HTML
  • CSSレイアウトの2カラム左メニューでコンテンツを先にHTMLに記述できる方法をおしえてください。

    趣味でHPを作成しております。 一般的なCSSレイアウト2カラム左メニューにしたいのですが、 HTML部分で左メニューよりコンテンツを先に記述し、 CSSで左メニューで右にコンテンツがくるようにしたいです。 現在のCSSは * { margin:0; padding:0; } .wrapper { width: 750px; margin: 0 auto; } .header { width: 750px; height: 100%; } .main { width: 750px; } .menu { float: left; width: 200px; } .contents { float: left; width: 550px; } .footer { clear: both; width: 750px; height: 100%; } .menu ul { list-style: none; } このような記述です。 つづきましてHTML部分は <body> <div class="wrapper"> <div class="header"> ヘッダー部分 </div> <div class="main"> <div class="contents"> コンテンツ部分 </div> <div class="menu">  メニュー部分 </div> </div> <div class="footer"> フッター部分 </div> </div> </body> このような感じです。 しかしこれだとHTML部分はコンテンツが先にきておりますが、 メニューが右になってしまいます。 これをHTML部分を変えずにCSSでメニューを左に配置する方法はありますでしょうか? 1週間くらい試行錯誤したのですが、できませんでした。 お詳しい方教えてください。

    • ベストアンサー
    • HTML
  • ヘッダー・左カラムは固定、右カラム可変のレイアウト

    CSSでレイアウトを制作中なのですが、途中から分からず止まっております。 今の状況は縦に可変した時、左カラムのスクロールバーが最大まで表示されない状態です。また、右カラムは途切れてしまいます。 height100%に対し、ヘッダでピクセル指定しているからだと思うのですが。 ■CSS *{ margin:0px; padding:0px; } /** html */ html,body { height:100%; min-height:500px; overflow-y:hidden; } /** ヘッダ */ #header { height:125px; width:100%; } /** 左・右カラムの囲い */ #container { height:85%; margin-left:400px; } /** 左カラム */ #menu { float:left; height:85%; margin-left:-400px; overflow:auto; width:400px; } /** 右カラム */ #main{ float:right; height:100%; margin-left:430px; overflow:auto; width:100%; } /** フッタはありません */ ■HTML側 <div id="header"> ヘッダ </div> <div id="container"> <div id="menu"> 左カラム </div> </div> <div id="menu"> 右カラム </div> 以上です。 理想のレイアウトが、GoogleマップもしくはYahoo!マップの様に組みたいのですが・・・ http://maps.google.co.jp/ Googleマップ http://map.yahoo.co.jp/  Yahooマップ どなたかお力添えをお貸しください。 宜しくお願いします。

    • ベストアンサー
    • CSS
  • perlで3カラムにしたい (css)

    perlでcgiのアンケートのページを作っていますが、ページの最上部をヘッダー、ページの両端にメニューや広告、中央にコンテンツを配置する3カラム(三段組み)、最下部をフッターにしたいと考えています。 ページ幅 755pxでセンタリング、両端のメニュー、コンテンツともに幅固定で、以下のようなcssファイルを作りましたが、cgiのページを見ると、cssファイルの設定がうまく反映されません。 どうすれば良いのか、ぜひ御指導、アドバイス頂けると助かります。 m(_ _)m 当方初心者のため、もし以下のcssファイルの書き方に間違えがありましたら、ご指摘ください。 よろしくお願い致します。 ----------------------------- <HTML> <BODY> <div id="wrapper"> <div id="header"> ヘッダー部分 </div> <div id="main"> <div id="menu"> メニュー部分 </div> <div id="contents"> コンテンツ部分 </div> <div id="affiriate"> アフィリエイト部分 </div> </div> <div id="footer"> フッター部分 </div> * { margin: 0; padding: 0; } #wrapper { width: 755px; margin: 0 auto; /* 幅固定(755px)でセンタリングします。*/ } #header { width: 755px; height: 50px; } #main { width: 755px; /* 両端ブロックとコンテンツを囲んでいるセレクタです。*/ } #menu { float: left; width: 150px; /* floatに、width 指定は必須です。*/ } #contents { float: left; width: 505px; #affiliate { float: left; width: 150px; } #footer { clear: both; /* float をクリアしています。*/ width: 755px; height: 50px; } #menu ul { list-style: none; } </div> </BODY> </HTML>

    • ベストアンサー
    • CSS
  • 3カラムレイアウトで隙間

    下記のように3カラムレイアウトを作っています [css] #wraper { float:left; } #left { float:left; width:180px; margin:0px;} #center { width:450px; margin:0px;} #right { width:120px; margin:0px; } [html] <div id="wrapper">   <div id="left">左メニュー</div>   <div id="center">中央メイン</div> </div> <div id="right">右メニュー</div> が、それぞれの段組の間(↓の部分)に3pxほどの隙間があいてしまいます   ↓   ↓ [左] [中央] [右] 隙間なくぴったりつけるにはどうすればいいでしょうか。 どうぞよろしくおねがいいたします。

    • ベストアンサー
    • HTML
  • cssを現在勉強中です。

    cssを現在勉強中です。 初心者なのでバカな質問かもしれませんが、お願いします。 ページを段落にわけたいので、以下のようなクラスを作りました。 .menu{float:left;width:160px} .main{float:right;width:525px} htmlの方はmenuの部分とmainの部分を<div>で分けます。 ちゃんと右にmain部分が来て、左にmenu部分が来て二つに分けられたのですが、ここで疑問が一つ。 片方のクラスにfloatが決まっていればもう一つは特に設定をしなくてもいいのでは? 要するに .menu{width:160px} .main{float:right;width:525px} で良いのではないでしょうか? 実際にやってみるとmenuが少し下に位置にずれますが、特に問題があるとも思えません。 どちらにもfloatは必要でしょうか? 必要とすればなぜでしょうか? 馬鹿らしい質問だと思いますがよろしくお願いします。

    • ベストアンサー
    • HTML
  • cssで左カラムと右コンテンツの長さをそろえる方法

    cssで左カラムと右コンテンツの長さをそろえる方法 今ホームページを作っているのですが、左カラムの背景と右コンテンツの長さがそろわず困っています。 左は短めなので右が長くなっても左は短いままなのです。 【background-repeat:repeat-y;】で左の背景を繰り返しています。 どなたか分かるかた教えてください。 下のようになっています。 #wrapper…左カラムと右コンテンツ部分 #side…左カラム #main_contents…右コンテンツ部分 body{ width:930px; float:left; margin:0px; padding:0px; font-size:12px; background-color:#CCCC99; color:#333333; font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "MS ゴシック", "Osaka‐等幅"; line-height: 150%; height:100%; } #wrapper { margin:0px auto; background-color:#ffffcc; height:auto; min-height:100%; } #side { background-image:url(left_bg.gif); background-repeat:repeat-y; width:230px; float:left; margin:0; padding:0; } #main_contents{ width:685px; color:#333333; font-size:13px; font-family:"Verdana", "ヒラギノ角ゴ Pro W3", "MS ゴシック", "Osaka‐等幅"; line-height:170%; float:right; background-color:#ffffcc; padding-left:15px; margin:0; padding-bottom:200px; }

  • 3列コラムのデザインがブラウザによって崩れてしまう

    3列コラムのヘッダーフッター構成でページを作ったのですが IE8では問題なく表示されるのですが…(Firefox3でも問題なく表示されます)IE8以下のバージョンのブラウザでは、デザインが崩れてしまうのです… どこがおかしいのか分からず…CSSを書き出してみますので、アドバイスよろしくお願いいたします。 デザイン: ●Topページのみ3列コラムで、その他は2列コラムになっています その為、センター部分を.centと.cent2で分け、横幅を変えて調整しました。。 ●フッター部分はナビ部分とコピーライト部分と2つになっています。 .head { background-color: #ffffff; width: 100%; height: 113px; } .main  (コラム全体) { width:100%; background-color: #ffffff; border: 0px; } .left  (左コラム) { float:left; width:170px; background-color: #ffffff; padding-right: 10px; } .cent  (センターコラム topのみ) { float:left; width:421px; padding: 0px 10px 10px 15px; } .cent2  (右コラム 他ページ) { float:left; width:591px; padding: 0px 15px 10px; } .right  (右コラム topのみ) { float:left; width:175px; } .foot_menu  (フッターナビ部分)        { width:100%; clear:both; background-color: #FFFFFF;        } .foot      (フッターコピーライト部分) { clear:left; height: 42px; background-image: url(コピーライト用画像); background-repeat: no-repeat; } その他補足が必要な場合はおっしゃって下さい。 よろしくお願いいたします

    • ベストアンサー
    • HTML
  • どう変更してもIE6だけCSSレイアウトが崩れてしまいます。

    CSSレイアウトで、サイトを作成していたのですが、 最近になってIE6で確認してみると、レイアウトが崩れまくっていました。。。 3カラムレイアウトなのですが、Firefox等他のブラウザではきちんと表示されるので、なぜかIE6だけ縦1列になってしまいます。。 こちらのサイトでもIE6はレイアウトが崩れやすいという情報がたくさんあり、そちらのアドバイスを参考にしながら1日かけてがんばってのですが、できませんでした。もう限界です(涙) 現在のCSSは、 * { margin:0; padding:0; } .wrapper { width: 740px; margin: 0 auto; } .header { width: 740px; } .main { width: 740 px; /* 両端ブロックとコンテンツを囲んでいるクラスです。 */ } .menu {display: inline; float: left; width: 205px; } .contents {display: inline; float: left; width: 385px; } .affiliate {display: inline; float: left; width: 150px; } .footer { clear: both; width: 740px; } というような状態です。 どなたかアドバイスいただけますと大変幸いです。 よろしくお願いいたします。

    • ベストアンサー
    • HTML