[ 解決済 ] サイドバーに背景色を入れたい

[雄介 橋本]

■ WordPress のバージョン
6.2.2

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

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

■ テーマのバージョン
Lightning 15.9.5

■ Pro Unit のバージョン
Lightning G3 Pro Unit 0.25.1

■ スキンの種類
Evergreen

■ スキンのバージョン
Lightning G3 Evergreen 0.2.2

■ 期待する動作
投稿ページにサイドバーを表示させていますが、サイドバーに背景色を入れたい。
追加CSSを入力したものの、背景色が反映されませんでした。
もし、スキン(Evergreen)特有のサイドバーの背景色設定方法があればお伺いしたいです。

■ 自分で試した事
以下を追加CSSに入力。

/* サイドバーの背景色を変更する */
.sidebar {
   background-color: #e6e6fa;
}

上記で反映されなかったので、以下も試してみました。

/* サイドバー背景色 */
.sidesection {
background-color: #e6e6fa;
}

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

■ 実際の症状
サイドバーに背景色が反映されない。

---

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

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

[うなこ]

サイドセクションのクラス名は以下になりますが、左右の余白など、いろいろデザインの調整が必要になりそうなため、セクションベース機能を使うのはいかがでしょうか。

/*サイドセクションの背景色*/
.sub-section {
    background-color: #e6e6fa;
}

セクションベース設定で、やりたいデザインに近いものができるのではないかなと思いましたがいかがでしょうか？
ぜんぜん意図と違っていたらすみません。

▼セクションベース設定とは

セクションベース設定

• この返信は8ヶ月、 4週前にうなこが編集しました。
• この返信は8ヶ月、 4週前にうなこが編集しました。

[雄介 橋本]

早速のご教示ありがとうございました。
sub-sectionの追加CSSで背景色を反映させることができました。

ただ、意図しないところまで色がついてしまったので
ご提案いただいたセクションベース設定をLightning設定で試しているところです。

追加の質問となり恐縮ですが、このセクションベース設定を “投稿ページにのみ” 適用させたいのですが、
そのようなことは可能でしょうか。

[雄介 橋本]

(( 質問内容を訂正いたします ))

個別のページで「セクションベースあり」「セクションベース無し」の設定はできましたが
もし、投稿のアーカイブページでのセクションベースの設定方法がございましたらご教示いただければ幸いです。

よろしくお願いします。

[うなこ]

個別のページで「セクションベースあり」「セクションベース無し」の設定はできましたが
もし、投稿のアーカイブページでのセクションベースの設定方法がございましたらご教示いただければ幸いです。

アーカイブページとその詳細ページのサイドセクションの背景色を変えたいということであっていますか。
機能ですと、アーカイブページのみの設定方法がないですので、以下のCSSでどうでしょうか？

/*アーカイブと詳細ページのサブセクション*/
.post-type-archive .sub-section,
.single .sub-section {
background-color: #efefef;
padding: 1rem;
border-radius: var(–vk-size-radius-lg);
}

CSSにつきましては、こちらのページを一度見ていただけますと、わかりやすいと思います。

できる！CSSカスタマイズ

[対馬 俊彦]

横から失礼します。

個別のページで「セクションベースあり」「セクションベース無し」の設定はできましたが
もし、投稿のアーカイブページでのセクションベースの設定方法がございましたらご教示いただければ幸いです。

サイト全体の設定を「セクションベースあり」にして、
セクションベース不要の固定ページなどを個別に「セクションベース無し」にする、
というアプローチをとればご希望の結果になると思います。

また、
* 投稿がどんどん増えていく
* 固定ページはそんなに増えない
という典型的な WordPress サイトの場合はこのアプローチの方が合理的です。

[雄介 橋本]

うなこ様、対馬様

ご丁寧にご教示いただきありがとうございました！
今回、うなこ様に教えていただいたCSSで運用することにいたしました。
一人では解決できなかったので、本当に助かりました。

今後、対応ページが増えてきましたら対馬様ご提案の方法も是非試していきたいと思います。
この度は、ありがとうございました。

[投稿者]

投稿