【rails6】controller_nameを使って、共通レイアウト（fooder,header）の特定のページだけ色を変える。

前提・実現したいこと

rails6で学習アプリのクローンを作っています。

様々なコンテンツのページに共通のfooder,headerの特定のコンテンツだけ色を変えたいと思っています。

試したこと

app/views/layouts/application.html.erb

<body class='<%= "#{controller.controller_name}" %>'>

を記載して、

app/assets/stylesheets/products.css.scss
.products {
  background-color: green;

  fooder {
    color: yellow;
  }
}

のように記載したら、bodyのバックグラウンドのみがgreenになります。

※controller_nameを使った分岐について様々な記事を参考にしましたが、特にheader,
fooder分岐についての情報がなく、その他の分岐の情報で応用出来ていないので、ピンポイントで問題についてご質問させて頂きましたm(__)m

行動規範の内容に同意します

回答1件

ベストアンサー

どの部分の色を変えたいのかが良くわかりません
「様々なコンテンツのページに共通のfooder,headerの特定のコンテンツだけ色を変えたい」
「様々なコンテンツのページに共通のfooder,headerの色を特定のコンテンツの時だけ色を変えたい」
ですか？
とすると
<body class='<%= "#{controller.controller_name}" %>'>
ではなく

<footer class='<%= "#{controller.controller_name}" %>'> ですね。でCSSに `.SomeController{ background-color: green; } .AnotherController{ background-color: blue; } ` でしょうか

投稿2020/05/01 11:36

winterboum

総合スコア23567

syuu1227

2020/05/01 11:53

ご回答ありがとうございます。このサイトはよく辿り着くので、初めて質問してみました。初回答嬉しいです。すみません。日本語が下手でした。 A、B、C、Dの４つのページで共通の青いフッターとヘッターがあるとします。 Cのフッターとヘッターだけ緑色にしたい。という意味です。現状では、フッターヘッターは青いまま、bodyのみが緑になります。そのやり方で試してみて、またコメントしますm(__)m

winterboum

2020/05/01 12:19

<body>にclassしているからです

syuu1227

2020/05/01 13:10 編集

<footer class='<%= "#{controller.controller_name}" %>'> はどのページに記載したらいいですか？共通ページが、app/views/layouts/application.html.erbと_fooder.html.erbと、_header.html.erbの３つのファイルに分かれていて、とりあえず、_fooder.html.erbに、 ``` <nav class="navbar navbar-expand navbar-dark" > 　<footer class='<%= "#{controller.controller_name}" %>'> <ul class="navbar-nav"> <li nav-item><a href="#" class="nav-link active">ブログ</a></li> <li nav-item><a href="#" class="nav-link active">youtube</a></li> </ul> </nav> ``` として、cssにも、 .SomeController{ background-color: green; } .AnotherController{ background-color: blue; } を記載すると、色を変えたいページのヘッダーは緑になりましたが、他のページのヘッダーが消えてしまいます(^^;

winterboum

2020/05/01 13:10

SomeController　AnotherController　部分は実際には何をいれましたか？

syuu1227

2020/05/01 13:30

SomeControllerは1度目はそのまま、2度目は、色を変えたいページの「.line_texts」 AnotherControllerはそのままです。(^^; すみません。SomeController　AnotherControllerはあくまで仮名なのですね。

winterboum

2020/05/04 03:26

では footer { background-color: blue; } fotter.SomeController{ background-color: green; } としてみてください

行動規範の内容に同意します