@3mcdt
とりあえずメインエリアは max 1140px 程度になっておりますので、画面サイズによって左右の余白が 何％ かは変動すると思いますので、もしかして以下の内容は意図している部分の話とは違うかもしれません。
幅いっぱいにせずに max 1140 にしているのは幅が無制限に増えるとレイアウトの変動が大きすぎるためで、世界共通で一般的な仕様のためそれに合わせています。
とりあえず有料版だと制御する機能があった気がしますが、無料版なら以下のような感じだと思います
@media (min-width: 1200px){
.container, .container-lg, .container-md, .container-sm, .container-xl {
max-width: 1540px;
}
}
が、ここから先は下記など参照してがんばってみてください。
https://training.vektor-inc.co.jp/courses/wordpress-customize/lessons/css-customize/
kurudrive さん
ありがとうございます。
現在このサイトで以下のカスタマイズCSSを使っていますが、この設定ではmin-widthを992pxにしているということですよね。（自分のサイトでありながら、教えてもらったものなので良く分かっていません。）ということは、ご提案のCSSを加える場合は、これらのmin-width を全て1200に揃える必要があるということしょうか。よろしくお願いします。
@media (min-width: 992px){
.navbar-brand {float:none;}
.gMenu_outer {float:none;margin:auto;}
.navbar-header {text-align:center;}
}
@media (min-width: 992px) {
.mainSection-col-two {
width: 75%;
}
.sideSection-col-two {
width: calc(25% – 3em);
}
}`
ご案内したURLは確認しましたか？
まずご自身で1200にして挙動がどうなるか確認したのでしょうか？
kurudrive さん
ご提案のものがうまく行くかどうか心配で、まだ確認していませんでしたが、やってみたところ、左右の空白は完全になくなりました。一方でサイドバーのスクロールバーの位置は従来通りで、サイドバーの幅が広がりました。
さて、全体レイアウトの見た目のバランスを考えると、少し戻してこれまでとの中間ぐらいに設定したいと考え、min-width を 1200px から 1096px に変えてみましたが、何も変化がありません。という事は、max-width: 1540px の方を減らす必要があるということでしょうか。
また、広がってしまったサイドバーのの調整は、以下のCSSの％で行うということで良いでしょうか。
よろしくお願いたします。
@media (min-width: 992px) {
.mainSection-col-two {
width: 75%;
}
.sideSection-col-two {
width: calc(25% – 3em);
}
}
kurudriveさん
結局のところ、教えて頂いたCSSを自分の知識で最適な形にはもっていけない事を実感し、この画面巾の調整を諦めることにします。何れにしても、ご指導ありがとうございました。
