Home » gem » activeadminを active_skin でデザインを革新的に変える

activeadminを active_skin でデザインを革新的に変える

環境

ruby 2.4.1
ruby on rails 5.1.3
activeadmin 1.1.0
CentOS 7.3

activeadmin がインストールされてるとして、進めていきます。

active_skin

activeadmin の外観を変えるgemは多くあるんですが、

今回使う active_skin は他のgemに比べて、

ダウンロード回数が一番多かったので実際に触ってみたところ

シンプルで見やすい画面になったのと、

設定が楽なので、導入しやすいと思います。

active_skinのインストール

Gemfileに gem を追加します。

gem 'active_skin'

追加後 bundle install でインストールしましょう

使用するための設定

使うために app/assets/stylesheets/active_admin.scss にimport文を記述します。

@import "active_skin";

この記述をしないと実際に適用されません。

外観のカスタマイズ

デフォルトの場合は、下のよう色合いです。

薔薇色のような色合いです。

 

左上のロゴと色の設定方法

ロゴの設定

左上にデフォルトのロゴが設定されていますが、

独自のロゴにしたい場合は、下記の記述をします。※import文の上に記述しないと適用しません。

$skinLogo: url("ここにロゴの画像を指定") no-repeat 0 0;

設定した場合、左上に適用されるはずです。

色の設定

全体を設定する場合と、ヘッダー部分のみの設定の記述方法があります。

$skinActiveColor: red; # 全体の色設定
$skinHeaderBck: green; # ヘッダー部分の色設定

色の設定もできるので、好きな色にしたい方は設定をおすすめします。

全体部分を違う色に設定した場合の例です

参考文献

, , ,

コメントを残す

%d人のブロガーが「いいね」をつけました。