小技シリーズ第6弾 ダッシュボードのデザイン

小技6 ダッシュボードのデザイン

このシリーズでは、Yellowfin のレポートやダッシュボードをより魅力的なものに作成するための小技を紹介します。第6回はダッシュボードのデザインです。
前回はレポート上の軸に対して、固定した色を配色する技の一つを紹介しました(『小技シリーズ第5弾 効果的な配色』)。今回は、ダッシュボードの色彩をCSSで定義して、イメージファイルを差し替える方法を紹介します。

ダッシュボードデザインの変更

規定のデザインでは、Yellowfin のダッシュボードは青を基調とした色使いです。青い海を Yellowfin Tuna (キハダマグロ) が泳いでいるイメージってところですかね。しかし、ダッシュボードの色合いを、各社のコーポレートカラーなどに合わせたい要望もありますよね。

これを、以下のような緑系の色を基調としたデザインに変更してみようと思います。ついでに、ロゴも会社のロゴに張り替えてみました。

Yellowfinサーバーの環境

既定のデザインは、Yellowfin インストールディレクトリの以下フォルダに保管されている CSS ファイルとイメージファイルで構成されています。
  CSS         (Yellowfin)\appserver\webapps\ROOT\css\
  イメージ (Yellowfin)\appserver\webapps\ROOT\images\

これらをカスタマイズするためには、以下のディレクトリに CSS や SVG ファイルを保管し、既定のデザインを上書きします。
  CSS         (Yellowfin)\appserver\webapps\ROOT\customcss\
  イメージ (Yellowfin)\appserver\webapps\ROOT\customimages\
ちなみに、既定のファイルを書き換えることでもデザインの変更は可能ですが、危険なのでやらないでください。

以下の内容を記述した CSS ファイルを \appserver\webapps\ROOT\customcss\ ディレクトリ直下に保管します。「.css」が末尾についていれば、ファイル名は custom.css でも override.css でも何でも大丈夫です。

custom.css

:root {
	--primary-color: #008080;
	--loader-color: #556b2f;
	--leftnav-hover-color: #008b8b;
	--primary-button-color: #008b8b;
	--primary-button-hover-color: #008b8b;
	--grey :#cccccc;
	--background-grey: var(--grey);
	--border-grey: var(--grey);
	--signal-positive-color: #008080;
	--signal-negative-color: #ff7f50;
	--dark-grey: #666;
	--black: #000;
	--background-black: var(--black);
	--white: #fff;
	--background-white: var(--white);
	--primary-text-color: #333740;
	--light-grey: #f0ffe9;
	--light-grey-background: var(--light-grey);
}
.tabContainer .tab .selectedDropDown {
	background-color: #008b8b;
}
.tabContainer .activeTab .selectedDropDown {
	background: url(../images/arrow-dropdown-white.svg) no-repeat center;
	background-color: #008b8b;
}
.header-cell-container{
	background-color: ##008b8b;
}

CSS ファイルを保管したら、ブラウザをリフレッシュします。画面全体が緑基調のデザインに変更されましたね。もし変更されない場合は、ブラウザのキャッシュを消して再度試してみてください。

ここで、CSS ファイルの内容を少し説明します。CSS ファイルの先頭に :ROOT{ } の定義個所があります。Yellowfin9.6 以降では、:ROOT{ } で定義した内容が環境全体に共通して反映されます。それ以降で定義する内容は、:ROOT{ } の定義内容をオーバーライドします。この処理の流れを念頭において、以下の設定を施してみましょう。

ボタンの色を変更

画面右上の「ログアウト」ボタンの色を変えてみます。利用者が誤ってログアウトしないためにも、他の個所と色を変えて際立たせます。
[ログアウト] ボタン上で右クリックして、[検証] を選択します。なお、以下の画面は Chrome のものですが、Chrome 以外のブラウザでも、類似の操作で処理が可能です。Firefox、Opera、Safari では Chrome 同様 [右クリック] > [検証]、Edge は [右クリック] > [開発者ツールで調査する] です。

デベロッパーツールが表示され、その中に同ボタンに関するデザインを定義している箇所を見つけることができます。

div.dashButton{ } の background-color の個所で、ボタンの色が定義されていることが分かります。--primary-button-color は :ROOT{} で定義されているため、環境全体でボタンには共通してこの色 (濃い緑) が適用されていることが分かります。

では、custom.css の最終行に以下を追加して、[ログアウト] ボタンの色を変更しましょう。

custom.css

div.dashButton {
    color: white;
    background-color: #d2691e;
}

ブラウザをリフレッシュすると、ボタンの色が変わっているのが分かります。

また、デベロッパーツールでCSSの定義内容が変更されていることが確認できます。

ロゴの差し替え

続いて、画面左上のロゴを変更します。お好きなロゴをSVG 形式 (Scalable Vector Graphics) で準備し、ファイル名を logo.svg とします。SVG 以外の形式でイメージファイルをお持ちの場合は、変換ツールや変換サイトを使って、ファイルを SVG 形式に変換してください。また、ファイル名は logo.svg としてください。
ここでは、以下のイメージファイルをロゴとして使用します。

ファイルが準備できたら、以下のディレクトリに logo.svg を保管します。
(Yellowfin)\appserver\webapps\ROOT\customimages\logo.svg
ブラウザをリフレッシュすると、ロゴが差し変わっているのが分かります。

画面イメージ

画面全体としては、以下のようなデザインに生まれ変わりました。

ちょっとしたことで、見た目がすっかり変わりますね。是非、お試しください。
See you then. Cheers!