Initial Site

Initial Site

Initial Site

summerカラー!

  • サイトウ  2018/06/07 12:39
colorsub2

ブログ久しぶりの更新になりました。サイトウです。
昨年リニューアルした社内ツールは、設定画面のカスタムCSSを使って見た目をアレンジすることができます。
今回はどんな流れでカスタマイズしたのか手順をまとめたいと思います。

カラーコーディネートを考える

カラーパターンのサイトは見ているだけで楽しい!そして決められない!
今回かこちらのサイトで色を選んでみました。
Random Material Palette Generater

明るく元気なsummerカラーに決定

カラーパターン

色を決めたら、どのパーツを何色にしようか決めていきます。

どのパーツの色を変えるか決める

ヘッダーをオレンジにして、ロゴやメニューは白に。
サイドメニュー見出しは、ブルーにしよう。
メインコンテンツの見出しは、オレンジ。
それに合わせてリンク文字もオレンジにしよう。背景は黄色。
おおまかな配色が決まりました。

ブラウザのデベロッパーツールでcssを変更してみる

今回は、Google Chromeのデベロッパーツールで色を変えたらどうなるか試してみます。

Google Chromeメニュー

デベロッパーツール

カスタムCSSの画面にCSSを記述

この色でOKだなとなったところで、デベロッパーツールのCSS記述部分を選択してコピーします。

.navbar-inverse {
background-color: #EF6C00;
border-color: #EF6C00;
}

カスタムCSSメニュー

コピーしたCSSをカスタムCSSの画面にペーストして保存します。
適用されると色が変更されます。

カスタムCSS画面

この作業を変更したいパーツの箇所分繰り返してください。

完成

Befor

befor

After

after

カラーパターンのイメージに近づきました!
細かいところまで設定したので時間を要しましたが、満足です。
蛍光カラーが好きなので、マークダウンの見出しタグを蛍光ピンクのペン風にしてみました。

社員のみなさま、ぜひお試しください。
毎日業務で使用するツールなので、愛着湧きますよ♡


この記事の作者

アバター
サイトウ


総記事本数:18

コメントをどうぞ

知識の記事

  1. Young woman using a laptop computer. Graphic designer. UX design.
    仕事で大活躍のGoogle Chrome拡張機能を紹介
  2. 無題
    WordPressで出力内容が動的に変わる固定ページの<title>を変更
  3. ai_computer_sousa_robot
    【GAS】お手軽なOCRの自動化をスプレッドシートで扱いやすくする
  4. 無題
    暑い、暑いですね、会社(と紙)の話をします。

おすすめ記事

  1. 7Zdd0N3ez3tWXLf1577162732_1577162762
    「2019年最終週」事業レポート(12/23~12/27)
  2. 2vmuBJtYEC1oNxv1575967002_1575967016
    「波乱の幕開け」事業レポート(12/09~12/13)
  3. Qq6ekREW7NMriVV1575364443_1575364473
    「12月始まりました!」事業レポート(12/02~12/06)