質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
Ruby on Rails 5

Ruby on Rails 5は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Q&A

解決済

1回答

620閲覧

Active_adminのCSSが全てのページに反映されてしまいます。

tani__san929

総合スコア61

Ruby on Rails 5

Ruby on Rails 5は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

0グッド

0クリップ

投稿2021/04/01 17:04

編集2021/04/01 17:06

active_adminのCSSをadminページだけでおさめたい。

発生している問題

現在、RailsでQ&Aのアプリケーションを作成中です。
ユーザーと管理者の両方を作成したく、gem "active_admin"を使用しました。

active_adminは、無事導入できました。
ただ、ユーザー側のログイン画面など管理者ページ以外でもactive_adminのCSSが聞いている状況です。

管理者画面
イメージ説明

ユーザーログイン画面
イメージ説明
ユーザーTOP画面
イメージ説明

※現状、このページにCSSは適応しておりません。

こちらの解決策を色々調べましたが、出てこず困っております。
お分かりの方がいましたらご教授頂けますと幸いです。

該当のソースコード

Gemfile.rb

gem "devise" gem "activeadmin" gem "refile", require: "refile/rails", github: 'manfe/refile' gem "refile-mini_magick" gem 'bootstrap', '~> 4.5' gem 'jquery-rails' gem 'font-awesome-sass', '~> 5.13' gem "pry-rails" gem 'kaminari','~> 1.2.1' gem 'rails-i18n' gem 'devise-i18n' gem 'active_admin_theme'

active_admin.scss

@import "active_admin/mixins"; @import "active_admin/base"; @import "wigu/active_admin_theme"; // Overriding any non-variable Sass must be done after the fact. // For example, to change the default status-tag color: // // .status_tag { background: #6090DB; }

application.html.erb

<!DOCTYPE html> <html> <head> <title>Answerly</title> <%= csrf_meta_tags %> <%= csp_meta_tag %> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> </head> <body> <header> <%= render "layouts/header" %> </header> <p class="notice"><%= notice %></p> <p class="alert"><%= alert %></p> <%= yield %> <footer> <%= render "layouts/footer" %> </footer> </body> </html>

_header.html.erb

<nav class="navbar navbar-expand-lg navbar-light"> <a class="navbar-brand" href="/"></a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNavDropdown"> <ul class="navbar-nav ml-auto"> <!--customersログイン時のヘッダー--> <% if user_signed_in? %> <li class="nav-item"> <%= link_to destroy_user_session_path, method: :delete do %> <i class="fas fa-sign-out-alt">ログアウト</i> <% end %> </li> <% else %> <!--ログイン前時のヘッダー--> <li class="nav-item"> <%= link_to "#" do %> <i class="fas fa-store-alt">About</i> <% end %> </li> <li class="nav-item"> <%= link_to new_user_registration_path, data: {"turbolinks" => false} do %> <i class="fas fa-user-plus">新規登録</i> <% end %> </li> <li class="nav-item"> <%= link_to new_user_session_path do%> <i class="fas fa-user">ログイン</i> <% end %> </li> <% end %> </ul> </div> </nav>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

application.css と別に admin.css を作る。
各々必要なものだけ取り込む

そして
案1 ActiveAdminとその他の画面で layoutを変え、取り込む styleを変える
案2 applidation.html.erbのstyle取込み部分を、controllerに応じて切り替える

投稿2021/04/01 23:06

winterboum

総合スコア23567

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tani__san929

2021/04/03 14:32

回答ありがとうございます。それで対応させていただきました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問