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

このトピックには3件の返信、3人の参加者があり、最後にpepepeにより9ヶ月、 3週前に更新されました。

4件の投稿を表示中 - 1 - 4件目 (全4件中)

投稿者

投稿
2024年1月31日 11:36 AM #84386

pepepe
参加者

■ WordPress のバージョン
WordPress 6.4.3

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

■ テーマの種類
Lightning ( G2 )

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

■ スキンの種類
Origin II

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

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

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

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

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

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

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

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

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

2024年1月31日 5:38 PM #84407
対馬俊彦
参加者
制作実績
Lighting Pro のカラム全体（コンテナ）の幅を指定している CSS は以下の通りです。
```
@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}
```
960 と 1140 の部分を増やせば幅を増やすことができますが、極端に増やすと画面幅によっては見た目がイマイチ（左右が狭すぎて窮屈なかんじ）になってしまう不安があります。

大きめの画面で見たときのことを考えて調整したいのであれば、以下のような CSS を追加するのが効果的だと思います。
```
@media (min-width: 1300px) {
  .container {
    max-width: 1240px;
  }
}
```
2024年1月31日 5:52 PM #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 コードをベースに色々調整していただければできると思います。
よろしくお願いします。
2024年2月6日 3:20 PM #85300

pepepe
参加者

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

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

投稿