openpneのログイン後表示のセンタリング方法

前へ 次へ
このQ&Aのポイント
  • openpneのログイン後表示のセンタリング方法は、管理画面の配色・CSS変更からカスタムCSSを追加するか、xhtml_style.php内の#Containerに左右マージン設定を追加する方法があります。
  • ただし、720pxのコンテンツに対してのセンタリングになるため、サイドメニューにバナーや他の要素を追加するとセンタリングが崩れてしまいます。
  • ログイン後の表示を970pxに対してサイドメニューも含めてセンタリングする方法は、padding-rightを設定してみたり他の方法を試してもしっくりしないという課題があります。
回答を見る
  • ベストアンサー

openpneのログイン後表示のセンタリング方法解りますか？

openpneのログイン後表示のセンタリング方法解りますか？ openpneのログイン後からの表示をセンターにしたいのですが、 サイドメニューの幅も含めると　970px になると思います。 よくあるのが、下記の方法でセンタリングする方法ですが 当然コンテンツの幅、720にに対してのセンタリングになっているので サイドメニューにバナー等を追加すると、当然センターにはなりません。 openpneセンタリングでよく出てくる設定　↓ ーーーーーーーーーーーーーーーーーーーーーーーーーーー 　管理画面[配色・CSS変更]-[カスタムCSS追加]で以下を追加 　　/*コンテンツセンタリング*/ 　　#Container { 　 　 margin: 0 auto; 　　} 　あるいは xhtml_style.php 内の #Container に左右マージン設定を追加 　#Container { 　 position: relative; 　 width: 720px; 　 margin-right: auto; 　 margin-left: auto; 　} ーーーーーーーーーーーーーーーーーーーーーーーーーー padding-right: 250px　を追加してみたりもしたのですが 見た目はセンターですが、やはりしっくりしません。 いろいろ試してはみたのですが。。。 どなたか、ログイン後からの表示をサイドメニューも含めて970pxに対してセンタリングする方法を ご存じの方いてませんか、よろしくお願い致します。

  • HTML
  • 回答数1
  • ありがとう数9

質問者が選んだベストアンサー

  • ベストアンサー
  • naokita
  • ベストアンサー率57% (1008/1745)
回答No.1

<body> <div style="width: 970px; margin: 0 auto;"> </div> </body>

muraotou
質問者

お礼

回答をヒントに、カスタムCSSに #Body{ width: 970px; margin-right: auto; margin-left: auto; } を追加でサイドメニューを含む全体のセンタリングが出来ました。 有難う御座いました。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • divをセンタリングで横並び

    1920px×1080pxのPCで確認しています。 container_main を画面いっぱいにして、 container_a とcontainer_b をセンタリングで横並びにしたいのですが、 container_a とcontainer_b が縦に並んでしまいます。 センタリングで横並びにするにはどのようにすれば良いでしょうか。 #container_main { width:100%; height:auto; } #container_a { width:500px; height:400px; margin:0 auto 0 auto; } #container_b { width:500px; height:400px; margin:0 auto 0 auto; }

    • ベストアンサー
    • CSS
  • ページ全体をセンタリングできません

    フルCSSでWEB作成をしていますが、ページ全体をセンタリングしたいのですが、IEで見ると右にずれてしまいます。ネットでいろいろ検索をして試してみたのですが、うまく行きません。 HTMLは <div id="centering"> <div id="wrapper"> </div> </div> で、CSSは #centering { text-align: center; width: 100%; position: absolute; margin: 0px; padding: 0px; } #wrapper { width: 900px; margin: 0px auto 0px auto; padding: 0px; text-align: left; です。 これではだめなんでしょうか。

    • ベストアンサー
    • CSS
  • cssでメインコンテンツをセンタリングする方法

    cssでメインコンテンツをセンタリングする方法に関する質問をお願いいたします。 下記のサイトなどをみると、 http://www.css-lecture.com/log/css-beginner/026.html *xhtml <body> <div id="wrapper"> <h1>サイト全体を中央に配置にする</h1> <p>サイト全体を中央に配置にする為のテキスト</p> <!--/ #wrapper--></div> </body> *css body { text-align: center; } div#wrapper { width: 800px; margin: 0 auto; text-align: left; border: 1px solid #FF0000; } （1）「body」においてもセンタリングを行っているいるのですが、 それはどうしてでしょうか。 「div#wrapper」だけのセンタリングでは不十分なのでしょうか？ ＞ body { text-align: center; } ＞ （2）また、「p」などのインライン要素は { text-align: center; } を使い、 「id」などのブロック要素は { margin: 0 auto; text-align: left; } を使いますすが、 body要素に対しても、 { text-align: center; } とすることが出来るのでしょうか？ (3)あと、「div#wrappe」で囲ったブロックの中の 「p」や「id」で囲ったコンテンツの中身のテキストは 「div#wrapper」の「 text-align: left; 」で 全て左寄せになりますか？ 参考書などを見ても解りづらかったので 教えていただきたくお願い致します。m(_ _)m その他参考URL: http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1010809440

    • ベストアンサー
    • CSS
  • tableの中の画像のセンタリング

    tableの中に画像を置いて、その画像をCSSでセンターに持って行きたいです。 現在ＣＳＳで .img1{ margin:auto auto auto auto; } っていう感じで書いていますが、全然センタリングできません。。 画像のセンタリングはどうやってやればいいでしょうか？ 初心者なので書き足りないことがあると思いますが、よろしくお願いします。

    • ベストアンサー
    • HTML
  • リストの「・」をセンタリングする方法について

    <ul style="text-align:center"> <li><a href="XX">項目１行目</a></li> <li><a href="YY">項目２行目</a></li> </ul> このようにしてリスト表示をセンタリングさせており、 ブラウザチェックをしていたらFire Fox(3.5.8)、Chrome(4.0.249.89)、safari(4.0.4) で表示が　・　　　　　　　　　　　　項目１行目 　　　　　　 ・　　　　　　　　　　　　項目２行目 となってしまい、文字はセンタリングしてくれましたが、「・」がブラウザの左端に寄ってしまい センタリングしてくれません。他のブラウザ(IE、opera)では「・」もセンタリングされているのですが… テーブルの時も同じような現象に陥ってしまい、 margin-left:auto;margin-right:auto;と指定する事で回避出来たのですが、 今回も同様の方法で<ul style="margin-left:auto;margin-right:auto;">やってみましたが、無反応… で、今度はautoではなくてpx数で指定すれば上手く「・」が移動してくれたのですが、ブラウザ画面を 小さくしてしまうと文字が潰れてしまい、断念。 更にlist-style-type:none;で指定してやれば見た目的にはセンタリングしていますが、「・」が無いので いまいち… どのようにしたらこれらのブラウザでちゃんと「・」がセンタリングするようになるのでしょうか？ よろしくお願い致します。

    • ベストアンサー
    • HTML
  • CSSでのセンタリングができません。

    CSSでのセンタリングができません。 こちらのページを参考にCSSで下記のようにCSSを設定したのですが センタリングされません。設定方法がまずいのでしょうか? それともWEB上で確認せずローカルで確認していることに問題があるのでしょうか? 宜しくお願い致します。 (CSSの記述はヘッダーに入れておりHTMLはBODYに記述しております) http://desperadoes.biz/style/dan/ +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+ * { margin : 0 ; padding : 0 ; } body { width : 100% ; float: center; } #my_body { position : relative ; margin-left:auto ; margin-right:auto; } #my_main { width : 950px ; } #my_header { width : 950px ; } #my_navigation { float : left ; width : 190px ; } #my_contents { float : left ; width : 750px ; } #my_contentsM { float : left ; width : 550px ; } #my_contentsS { float : right ; width : 190px ; } #my_contentsB { float : left ; width : 750px ; } HTML部分は <body> <div id="my_body"> <div id="my_header"> </div> <div id="my_main"> <div id="my_navigation"> </div> <div id="my_contents"> <div id="my_contentsM"> </div> <div id="my_contentsS"> </div> <div id="my_contentsB"> </div> </div> </div> </div> </body>

  • CSSで、何故か全体のセンタリングが出来ない

    作成途中のホームページについて、お聞きしたいと思います。 ページ全体をセンタリングしたいと思っています。 上記のページで、 <div id="container"> </div> を、 #container { margin-left: auto; margin-right: auto; } としているのですが、何故か左揃えのままで、全体をセンタリングできません。 詳しい方がいましたら、ご回答お願いいたします。

  • CSSで横の段組-センタリングするには？

    CSSで横の段組をし、センタリングしたいのですが、 横の段組のために「float: left;」を使うと、 「margin:0px auto;」と指定しても左寄りになってしまいます。 「float: left;」を消せばセンタリングできるのですが、 そうすると横の段組ができなくなって困っています。 何か単純な間違いをしているのだと思うのですが、ご助言ください。

    • ベストアンサー
    • HTML
  • スタイルシートでのセンタリングについて。

    スタイルシートでセンタリングをしたいのですが、できなくて困っています。 以下のような場合に、センタリングをしようと思い「text-align:center;」を追加しましたがセンタリングされません。 どうしたらセンタリングできるでしょうか？ ソース　------------------------------------ <html> <head> <title></title> <style type="text/css"> <!-- .test{ font-size: 10pt; font-family: ＭＳ 明朝; margin: 1px; padding: 1% 10%; border: outset 1px #EEDDFF; } --> </style> </head> <body> <span class=test>○○○○○</span> </body> </html>

    • ベストアンサー
    • HTML
  • 並んだ２つのfloatボックス、片方を固定位置にしたい

    floatでボックスを２つ並べたものの、左側のボックスを、右側のコンテンツ量が増えても、いつでもブラウザの固定された位置の表示させていと考えています。 現在、このfloatの２つのボックスは、大きなボックスで囲んでおり、 topから160pxの余白をとっています。 また、この大きなボックスは、常にセンターにある状態です。 ・トップから常に160pxのマージンが欲しい ・左側の余白は、ブラウザの大きさに寄ってかわる（センタリングの為） ・右のボックスは自由に動く。 この状況で、左のメニューだけを固定することは可能でしょうか。 教えてください。 現在ソースは下記のようにしております。 【HTML】 <div id="container"> <div id="gNavi"> 固定したいメニューBox </div> <div id="main"> スクロールするぐらいの長文Box　</div> </div> 【CSS】 * { margin:0 ; padding:0; } body { text-align:center; } #container { width:894px; margin:160px auto 65px auto; } #gNavi { position:fixed; float:left; top:160px; left:auto; width:175px; } #main { float:left; width:716px; margin:0 0 0 2px; text-align:left; overflow:auto; }

    • ベストアンサー
    • CSS

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する