[ 解決済 ] Ligftning pro 2カラムの際の全体の幅を広げる方法について

VWSとは フォーラム Lightning [ 解決済 ] Ligftning pro 2カラムの際の全体の幅を広げる方法について

[ 解決済 ] Ligftning pro 2カラムの際の全体の幅を広げる方法について

  • このトピックには3件の返信、3人の参加者があり、最後にpepepeにより10ヶ月前に更新されました。
4件の投稿を表示中 - 1 - 4件目 (全4件中)
  • 投稿者
    投稿
  • #84386

    pepepe
    参加者

    ■ WordPress のバージョン
    WordPress 6.4.3

    ■ テーマ・プラグインは全て最新版で確認してください。
    確認しました。

    ■ テーマの種類
    Lightning ( G2 )

    ■ テーマのバージョン
    WordPress 6.4.3

    ■ スキンの種類
    Origin II

    ■ 期待する動作
    投稿ページを2カラムにしています。左に本文、右にウィジットを配置していますが、今のカラムの幅だと本文のスペースが狭く読みにくいため本文のスペースをもう少し広くしたいです。

    過去のフォーラムを検索したところ、2カラムの左右比率を変えて本文を広くする方法はわかったのですが、カラム全体の幅を広げて本文を広くする方法が見つからなかったため、ご教授いただければ幸いです。

    G3だとカラムの変更も簡単に可能なようですが、サイト崩れが心配で移行できずにいます…

    G2のまま変更できる方法がありますでしょうか。
    よろしくお願いいたします。

    ■ 自分で試した事
    2カラムの左右比率変更して運用しておりましたが、やはり少し狭いので、広げたいです…

    ■ 症状が発生するブラウザ
    グーグル

    ■ 実際の症状
    既存のカラムの幅を広げることができない

    Attachments:
    You must be logged in to view attached files.

    該当URL : https://*********

    ※該当URLはフォーラムライセンスが有効のユーザーにのみ表示されます

    #84407

    Lighting Pro のカラム全体(コンテナ)の幅を指定している CSS は以下の通りです。

    @media (min-width: 992px) {
      .container {
        max-width: 960px;
      }
    }
    
    @media (min-width: 1200px) {
      .container {
        max-width: 1140px;
      }
    }

    9601140 の部分を増やせば幅を増やすことができますが、極端に増やすと画面幅によっては見た目がイマイチ(左右が狭すぎて窮屈なかんじ)になってしまう不安があります。

    大きめの画面で見たときのことを考えて調整したいのであれば、以下のような CSS を追加するのが効果的だと思います。

    @media (min-width: 1300px) {
      .container {
        max-width: 1240px;
      }
    }
    #84396

    DRILL LANCER
    モデレーター

    Lightning Pro のご利用誠にありがとうございます。株式ベクトルの平川と申します。

    .container {
    	width: 100%;
    }
    
    @media (min-width: 576px) {
    	.container {
    		max-width: 540px;
    	}
    }
    
    @media (min-width: 768px) and ( max-width: 1023px){
    	.container {
    		max-width: 720px;
    	}
    	.mainSection-col-two {
    		float: none;
    		width: 100%;
    	}
    	.sideSection-col-two {
    		float: none;
    		width: 100%;
    	}
    	.headerTop {
    		display: none;
    	}
    }
    
    @media (min-width: 1024px ) {
    	.container {
    		max-width: 960px;
    	}
    	.mainSection-col-two {
    		width: 60%;
    	}
    	.sideSection-col-two {
    		width: calc(100% - 60% - 3rem);
    	}
    }
    
    @media (min-width: 1200px ) {
    	.container {
    		max-width: 1140px;
    	}
    }

    上記 CSS コードをベースに色々調整していただければできると思います。
    よろしくお願いします。

    #85300

    pepepe
    参加者

    ご教授いただいた方法で
    @media (min-width: 992px) {
    .container {
    max-width: 960px;
    }
    }

    @media (min-width: 1200px) {
    .container {
    max-width: 1300px;
    }
    }
    にすることでパソコンで良いバランスに設定することができました!
    ありがとうございます。

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