サポート » 使い方全般 » サイトを16:9のPC画面にも合わせたい

  • 解決済 3mcdt

    (@3mcdt)


    現在作成中のサイトを自分のPC画面(16:9)で見ると、トップページ以外の固定ページは、みな左右合計で計算上17%ほどのスペースが空いており、折角のワイド画面が使い切れておらず残念です。一方で、タブレットで見ると固定ページは丁度ピッタリと収まっています。これをタブレットでも16:9のPCでもピッタリと収めることはできるでしょうか。尚、スマホに対してはレスポンシブで対応できています。

    因みに、固定ページには左側にウィジェットの入ったスクロールバーの付きのサイドバーを設置してあり、サイドバーの幅はCSSでやや狭く調整しています。

    尚、WordPress 6.0.1、テーマは、Lightning 13.8.11 です。よろしくお願いします。

6件の返信を表示中 - 1 - 6件目 (全6件中)
  • @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/

    トピック投稿者 3mcdt

    (@3mcdt)

    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にして挙動がどうなるか確認したのでしょうか?

    トピック投稿者 3mcdt

    (@3mcdt)

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

    トピック投稿者 3mcdt

    (@3mcdt)

    kurudriveさん

    結局のところ、教えて頂いたCSSを自分の知識で最適な形にはもっていけない事を実感し、この画面巾の調整を諦めることにします。何れにしても、ご指導ありがとうございました。

    トピック投稿者 3mcdt

    (@3mcdt)

    エラー解除の為再送信。

6件の返信を表示中 - 1 - 6件目 (全6件中)
  • このトピックに返信するにはログインが必要です。