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

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

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


コメントをどうぞ

知識の記事

  1. b09e7c3a1857a8ad2995dffd23a75b17_s
    WPの記事をTwitterで連携する際にハマる
  2. 12686
    暑い!本当に日本列島がおかしいのですが、こんなに熱いJリーグは久しぶりな件!
  3. 1093198
    ピロリ菌から見えた、健康意識の高まり
  4. 顔赤い
    なんでこんなに暑いのさ!熱中症についてまとめ

おすすめ記事

  1. スギ花粉
    鼻がムズムズ目がカユカユな花粉症についてまとめてみた
  2. 『テレビ観ないんだよね…』と言うのがかっこいいと思っている人に告ぐ!
  3. 出典:無料壁紙:格闘技がテーマの写真やイラスト画像まとめ(格闘家・ブルースリー)
    ブルース・リーの出身地ってどこだかわかりますか?
  4. ハイビスカス
    ウチナーンチュが沖縄に帰った時に必ず行くお店10選+α
  5. イニシャルサイトコーポレートサイト
    コーポレートサイトをリニューアルしました
  6. なんでもQ
    相談Q&Aサイト「なんでもQ」開発中です!
  7. さんぽすフォトコンペ開催中
    今年もさんぽすフォトコンペ開催しました!

人気の記事

  1. クロックスの偽物と本物の違い
    クロックスの本物と偽物の違いを比べてみました
  2. ファミコン
    パズドラ、モンスト、白猫に続く次のゲームは…?
  3. konagaya_20150303
    日常でつい使ってしまう間違えやすい日本語
  4. Doctor scanning mri patient with MRI scanner machine technology
    MRI検査(造影剤付き)の感想と注意点