[ 解決済 ] サイドバーの横幅を狭くする方法を教えてください

[長野利雄]

■ WordPress のバージョン
5.9

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

■ テーマの種類
Lightning ( G3 ) + Lightning G3 Pro Unit

■ テーマのバージョン
14.20.3

■ Pro Unit のバージョン
0.19.0

■ スキンの種類
Origin III

■ 関連しそうなプラグインを一つづつ停止して症状が改善するか確認してください。
確認しました。

■ 期待する動作
カスタマイズの追加CSSによりサイドバーの幅を狭くすること(デフォルトのメインセクションとの比率を約3：7から2：8へ変更)

■ 自分で試した事
カスタマイズの追加CSSへ過去のフォーラムの回答を見て以下を追記しましたが、変化なしです。

@media (min-width: 992px) {
/*メインセクション*/
.mainSection-col-two {
width: 80%;
}
/*サイドバー*/
.sideSection-col-two {
width: calc(20% – 3em);
}
}

■ 症状が発生するブラウザ
Chrome

■ 実際の症状
サイドバーの幅が変化しません。

---

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

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

[対馬 俊彦]

Lightning のバージョンによって指定方法が異なります。

【Lightning Pro (G2)】.mainSection-col-two / .sideSection-col-two

【Lightning G3】.main-section–col–two / .sub-section–col–two

書き換えて試してみてください。

参考にされたのは Lightning Pro (G2) に関するトピックだと思います。

• この返信は1年、 11ヶ月前に対馬 俊彦が編集しました。

[長野利雄]

対馬様

Lightning G3用に書き換えましたが、変わりなしです。
追加CSSの画面を添付します。どこか間違ってますでしょうか？

Attachments:

You must be logged in to view attached files.

[対馬 俊彦]

すみません、反映されない原因のひとつは私のタイプミスです。

誤【Lightning G3】.main-section–col–two / .sub-section–col–two

正【Lightning G3】.main-section--col--two / .sub-section--col--two

追加 CSS は以下のようになると思います。

@media (min-width: 992px) {
.main-section--col--two {
width: 80%;
}
.sub-section--col--two {
width: calc(20% - 3em);
}
}

ただし、この設定だとサイドバーが狭くなりすぎるように感じます。

また、サイドバー固定設定 は サイドバーを固定しない に設定してください。
そうしないとカスタマイズの手間がさらに増えてしまいます。

【追記】以下のレッスンをおすすめします。CSS によるカスタマイズの勉強になります。

できる！CSSカスタマイズ

• この返信は1年、 11ヶ月前に対馬 俊彦が編集しました。

[長野利雄]

できました！ありがとうございます。CSS勉強してみます！

[投稿者]

投稿