サイト中央揃えのやり方

  • このトピックには14件の返信、2人の参加者があり、最後にみきにより10年前に更新されました。
14件の返信スレッドを表示中
  • 投稿者
    投稿
    • #45583
      みき
      ゲスト

      お世話になります
      サイト全体を中央に表示したいです
      どのようなコードを追加すればよいですか?
      お忙しいところ申し訳ございませんがご回答をお願いいたします

    • #45585
      hidekichi
      ゲスト

      Simplicity自体はセンタリングされていると思いますが、縦のセンタリングですかね?

      またどういう時にセンタリングされてない状態でしょうか?

    • #45586
      みき
      ゲスト

      ご返信ありがとうございます
      全体的に左寄せになっています

    • #45589
      hidekichi
      ゲスト

      何か手を加えられてそうなっているのであれば、何をどのようにしたかと言うのを書いてもらわないとなんとも言えないんですが、全体的に左と言うのが、最初の質問の「サイト全体」と言うことなら、それは何かしらの要素に閉じタグがないとかそういうことじゃなかろうかと思うんですけども…。

      どこそこから表示がおかしくなっていると言うより、サイト全体なんですよね?

      横の中央寄せの場合、
      その要素のwidthを決めて、margin: 上下 auto;とすればインライン要素以外ならセンタリングされると思うんですが、サイト全体と言うことになると該当のページのアドレスを公開してもらうか、少なくともスクリーンショットでどうなっているのかを確認したいところです。

      横のセンタリングのサンプル | jsFiddle

    • #45591
      みき
      ゲスト

      ご返信ありがとうございます
      スクリーンショトです
      スクリーンショト

    • #45592
      みき
      ゲスト

      すみません
      表示されなかったので

    • #45593
      みき
      ゲスト
    • #45594
      みき
      ゲスト

      字が違いました
      スクリーンショットです

    • #45601
      アバター画像わいひら
      キーマスター

      全体ということは、このようにしたいということなのでしょうか?

    • #45606
      みき
      ゲスト

      ご返信ありがとうございます
      1カラムのスキンを使っているので
      サイドバーは非表示にしています

      以下のような表示から
      スクリーンショット
      このようにしたいです(編集しました)
      編集

    • #45607
      hidekichi
      ゲスト

      スクリーンショットのやつですが、これはセンタリングされているんですよ。
      #body-inは1070pxがデフォルトで、その中に#mainが入っています。
      #mainはfloat:leftで左になってますからサイドバーがあれば画面中央にあるわけですが、スクリーンショットで言う#mainをセンタリングしたい場合は、

      #main {
        width: 任意; /*740px*/
        margin: 任意 auto;
        float: none;
      }

      こんな感じにすれば、#body-inの中身が#mainだけならセンタリングされると思います。
      本来は、#mainをwidth: 100%にして、#body-inに上記の設定をするとよいかと思います。marginは設定されてますし、floatはないですが、widthを決めて、margin: 0 auto;などとなっていればセンタリングされると思います。

    • #45609
      みき
      ゲスト

      hidekichi様
      ご教示いただいたコードで設定すると
      中央に表示されました
      ありがとうございました!

    • #45611
      みき
      ゲスト

      すみません
      記事などは中央に表示されたのですが
      メニューがそのままなので
      メニューを中央に表示させたいです

    • #45618
      hidekichi
      ゲスト

      なんちゃらinと言うのがいくつかありまして、上から

      #header-in,
      #navi-in,
      #body-in,
      #footer-in

      とあります。それぞれを同じように設定すれば全体的に同じ幅でセンタリングできると思います。
      が、メニューに関して言うと、メニューの数にもよりますが上手くやらないと折り返しが発生します。メニューのカスタマイズは結構大変なことなので、できるだけメニューの数やメニューの文字数を気にしながら設定する枠内に上手く入るように調整してください。

      例えば、

      #header-in,
      #navi-in,
      #body-in,
      #footer-in {
        width: 1000px;
      }
      
      #xxx-in {
        margin: 上下 auto;
      }

      こんな感じにして、センタリングしたい要素の親に当たるxxx-inの幅を揃えます。#mainはwidth: 100%みたいなことを書きましたが、それぞれのxxx-inにはまたその中身があるので、それぞれを合うように調整しないといけません。

      #body-inの中にある#mainと#sidebarは左右に分かれていますが、#header-inの中には.alignleftと.alignrightがあると言うような具合です。

      ここから先は、カスタマイズの目標として、何をどうしたいかによってやり方が変わる可能性があるので、もしやり方がわからなくなったら具体的に何をどういうふうにしたいと質問できるようにしてもらうとよいかと思います。
      そのためにはデベロッパーツールで、htmlからその要素のセレクタをみつけて、例えば先の例で言うと.alignleftの中にあるなんちゃらとか、その親に当たる#h-topがどうたらとかというようなセレクタでの要素指定と、最終的にどうなって欲しいかを説明できるようにしてください。

      質問例) #h-topの中の.alignleftと.alignrightは通常それぞれ左右に並んでますが、逆転させることはできますか?.alignrightを左側、.alignleftを右側にするにはどうすればよいでしょうか?

      みたいな感じで質問してもらえると、さっくり答えられると思います。

    • #45664
      みき
      ゲスト

      返信が遅くなってしまい申し訳ございません
      たしかにメニューは字数によっても違いますね
      (浮かばなかった)
      いろいろ考えてみます
      ご返信ありがとうございました!

14件の返信スレッドを表示中
  • フォーラム「テーマファイルのカスタマイズに関する質問など」には新規投稿および返信を追加できません。
スポンサーリンク
アドセンス(大)
アドセンス(大)